OVERVIEW
We begin with a concept of the proposed website. Our graphic designer in the UK office will create a website concept which will include a set of Photoshop images comprising the layout, graphics, photos, navigation and all the essential elements required for a Client’s website. This concept will then be converted into an interactive website.
We convert the Photoshop images (.psd) concept design into a hand-coded HTML cross-browser compatible website using precision pixel level quality standards and then carry out a process known as Theming.
Theming is where we apply the industry’s Best Practices to make the website compliant with Drupal, Joomla or WordPress standards. These are known as Content Management Systems (CMS) where content can be managed with ease by a non-technical individual.
We create the website using a CMS and applying a theme which matches the client’s requirements.
GENERAL PROCESS – WHAT ACCURA-TECH DOES
- The Project Manager in the UK will meet the Client and collect all their information and requirements.
- The designers will prepare the design concept (.psd) for the website if a new design is required or else a readymade template can be used for a quick turnaround.
- The Project Manager will create a case with all the relevant details using the Project Management Tool used to share the project details.
- Accura-Tech developers will plan the structure of the site according to the designs and the project details provided.
- The developers begin building the site.
- After completing the development process, the Quality Assurance (QA) process commences.
- Once the site achieves our quality standards, the beta website will be sent to the Project Manager.
- The Project manager demonstrates the site to the Client and passes the Client’s feedback to Accura-Tech.
- The amendments are incorporated and the website is sent back for approval. This process is repeated until the Client is perfectly happy with the website.
- The website is launched and goes live for public interaction.
THE FOLLOWING TECHNIQUES ARE USED FOR STREAMLINING OUR PRODUCT:
- Using less code
- Using less JavaScript
- Using classes for styling
- Use common classes and helper classes wherever possible
- Using CSS to get the button styles instead of using the images
- Use Drupal views to display dynamic content and slideshows
- Using content types for contents such as testimonials, case studies, etc.
- Using Google accredited maps instead of using a map image
- Using Font Awesome icons instead of images where possible
- Using the latest cutting edge and open source technologies such as XHTML, HTML5, CSS 3, Div based structure (not tables), etc.
The CMS keeps the design of the site separate from the content, making it simpler to manage and update.
QUALITY
Accura-Tech’s highest quality standard is what make us the differentiator from the myriad of similar services in the market. As stated by our Clientele’s testimonials, we are at the forefront of the design concept to web conversion service due to our:
- One pixel precision level attention to detail.
- Browser compatibility across Mozilla Firefox, Google Chrome, Apple Safari, Internet Explorer 11, 10, 9, 8 7. Mobile Operating Systems – iPhone iOS and Android
- Device compatibility for desktops, tablets and mobile phones for responsive sites.
- Implementation of Industry’s Best Practices.
- W3C compliant standards.
Introduction
A responsive website adjusts its appearance and layout based on the size of the screen that the website is displayed on. Responsive architecture provides the best quality browsing experience on a desktop, smartphone, tablet, netbook or e-reader regardless of the operating system. Responsive sites are growing in popularity due to the increased number of users using mobile devices to access websites.
According to the design .psd provided by the project manager, we start building the site on the Drupal framework using the Bootstrap responsive child theme.
Challenges:
- Adjusting the layout of the site for different screen sizes on different browsers and operating systems.
- Adjusting the sizes of the images on buttons for displaying on small screens
Technologies used:
- Bootstrap – popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
- Drupal – an open source content management platform (back-end framework)
- Zen – a master theme and subthemes used to control the look of the site
- LESS – makes CSS more maintainable, Theme able and extendable.
- Font-awesome icons – size, color, drop shadow, and anything can be done.
Introduction
Responsive Migration sites involves the conversion of a non-responsive site to a responsive site. There will be a perfect design match with the non-responsive website where the current site will be used as the .psd.
These sites have the qualities of both responsive sites and migration sites mentioned above.
Challenges:
- Planning the responsive layout because the current site is not a responsive site.
- Adjusting the layout of the site for different screen sizes on different browsers and operating systems.
- Adjusting the sizes of the images on buttons for small screen sizes
Technologies used:
- Bootstrap – popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- Drupal – an open source content management platform (back-end framework)
- Zen – a master theme and subthemes used to control the look of the site
- LESS – makes CSS more maintainable, Theme able and extendable.
- Font-awesome icons – size, color, drop shadow, and anything can be done.
Introduction
These sites are built on a responsive template which allows for the customizing of the website through an administration panel where site admins can change the look and feel of their site through a dashboard.
All customizations such as changing the logo, branding color, slogan, etc. can be done through the dashboard.
Introduction
This involves migrating a site based on an old platform to one of our Content Management Systems. The site will be built on top of the new landscape to create a website which will look very similar to the current website but with added functionality. The current live site will be used as the reference design.
These sites have the qualities of both responsive sites and migration sites mentioned above.
Advantages:
- The design and styles used in the current live site can be replicated and therefore the development time is greatly reduced.
- The website on the new platform will have the functionality to enable a non-technical user to update the content of the site and carry out changes.
- For the QA process, we perform per pixel comparison between the current live site and the newly built site by using a customized tool.
Challenges:
- As the amendments, the client may want to change many aspects of the website and then we have to design/style it on our own.
Technologies used:
- Bootstrap – popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- Drupal – an open source content management platform (back-end framework)
- Zen – a master theme and subthemes used to control the look of the site
- LESS – makes CSS more maintainable, Theme able and extendable.
- Font-awesome icons – size, color, drop shadow, and anything can be done.
Introduction
In this category, we redesign existing sites and create new sites. According to the design (.psd) provided by the project manager, we build the site using a Zen Master theme on a Drupal framework and create sub-themes to control the look and feel of the site.
After building the website, we check it with a Quality Assurance document which covers all the areas of the site including visual appearance and pixel perfection with the original design, browser compatibility, WC3 Validation, page weight, etc.
Challenges:
- The CSS coding will have to reflect the psd design.
Technologies used:
- Drupal – an open source content management platform (back-end framework)
- Zen – a master theme and subthemes used to control the look of the site
- LESS – makes CSS more maintainable, Theme able and extendable.
- Font-awesome icons – size, color, drop shadow, and anything can be done.
Introduction
In Integration sites, we add new sections to a current website such as the ‘Resources’ section, ‘Careers’ section, etc. These sections are created as separate components and then integrated to the current site.
After building the website, we check it with a Quality Assurance document which covers all the areas of the site including visual appearance and pixel perfection with the original design, browser compatibility, WC3 Validation, page weight, etc.
Challenges:
- There should be a perfect match between the newly added components and the other parts of the existing site.
Technologies used:
- Drupal – an open source content management platform (back-end framework)
- Zen – a master theme and subthemes used to control the look of the site
- LESS – makes CSS more maintainable, Theme able and extendable.
- Font-awesome icons – size, color, drop shadow, and anything can be done.
Introduction
A mobile site’s layout and content are very similar to its main site without some features such as slideshows and certain interactive elements present in the main site.
Accura-Tech uses the PW Mobile theme. All the mobile sites created using this theme have the same look and feel with only the colors, images and fonts changed according to the client’s preference. JQuery Themeroller is used to apply the styles to the site.
After the development of the mobile website, the site is checked on a number of mobile devices and all browsers ensuring that the logo, favicon and the Apple touch icon are not blurred. All the links in the content area are also checked to confirm that they link to the specific mobile page and not to the pages of the main site.
Technologies used:
- Drupal – an open source content management platform (back-end framework)
- Zen – a master theme and subthemes used to control the look of the site
OUR HISTORY OF DESIGN CONVERSION
