BLOG

DESIGN OF RESPONSIVE AND ADAPTIVE WEBSITES
Wed, 30 December 2015 7:46 pm

In today’s ever-changing technologies and methodologies with the Internet regarding desktop PCs, laptops, tablets, smartphones, and other mobile devices, the need to inform clients to attain their full understanding of the differences between static, responsive, and adaptive website designs is crucial to the successful completion of projects.  More so when the client has certain or specific target audiences for whom the proposed website is intended, thus dictating the compatibility and functionality of the website being produced.  This is literally the elixir web designers need in ensuring the satisfaction of clients once the job is done.

I am writing this article as a way of informing clients who may not have the full understanding of the methodologies professional webmasters use.  As such, after reading this post, at least they will be armed with adequate considerations and justifications that can reinforce their decision for the best course of action to get their projects done punctually and cost-effectively.

Static, Responsive and Adaptive Websites

Unlike responsive and adaptive websites, static versions have fixed screen widths, that with smaller screen of mobile devices, viewers must zoom-in the display and scroll side-to-side just to horizontally view or read website contents – something that almost everyone despise doing.  On the other hand, responsive and adaptive websites, interactively adjust their contents to conform with the width of the screen of the mobile device end-users use.  Responsive designs interact fluidly with screen widths; whereas, with adaptive designs (while being responsive), page contents tend to ‘jump’ when resolutions are manually resized by the viewer for the sake of legibility.

I will focus this article on these methodologies as I feel the need to let clients know of the comprehensiveness of the web work necessary in producing an efficient an adaptive or responsive website.


Convenience

A major drawback with adaptive website is the need to maintain two websites when it is used as a separate version of a conventional static website.  Website updates and/or revisions require extra work to attain consistency of information between the two sites.  However, from the webmaster’s standpoint, working on the pages is much easier though time consuming.

Meanwhile, webmasters find working on a responsive website design a little more restricting, difficult, and takes more time in the coding process than its adaptive counterpart.  Design and load speeds are readily compromised due to the addition of third party applications and widgets, Google fonts, and excessively large images.  Big companies can maintain IT personnel on staff to create high-end applications for conformity with smartphones and other mobile devices, but for the casual webmaster, keeping the site properly functioning and/or maintained, can be a time-consuming task.

 

Domain Name

The adaptive version of an existing static website may be contained in a folder inside a domain’s URL.  There are also services that offer hosting of clone websites that are solely for mobile devices.  In either case, a script will have to be embedded in the static site to automatically redirect mobile viewers to the location of the adaptive site.

Stand-alone responsive websites, as most are, use a top level domain name preserving the use of the canonical URL, thus avoiding redirects.


Building a New Website

Adaptive websites are much easier to build allowing webmasters to cater to the mobile experience while employing different objectives than they would for desktop users.  When building sites, they usually start their design layout with the smallest screen resolution viewport, usually at 320 pixels, then progressing towards the common 480, 760, 960, 1200, and 1600 viewport widths.  The mind set behind this is that the adaptive design, which is based on the aforementioned breakpoints, don’t respond once they’re initially loaded.  It works to detect the screen size first and then load the appropriate layout for it.  Overall, the design process appears to be more work intensive as the webmaster has to design the site in accordance with the aforementioned screen resolution widths.  However, with the use of WYSIWYG (what you see is what you get) applications like Adobe Dreamweaver, Incomedia’s WebsiteX5, Mobirise, etc., production time to complete the site is significantly reduced.

Professional webmasters consider responsive design to be the more of a forward thinking way of building modern websites.  It is also a good approach for website owners who have no plans for layout changes. With responsive designs, professional webmasters design layouts with a primary focus on creating a viewport for mid-resolution, and then use third party media queries to adjust for low and high resolutions later on.  Ironically, the responsive design has been made easier for the less experienced designers and developers, thanks to the availability of templated themes accessible through Bootstrap, WordPress, Joomla, and Drupal.

So in essence, professional webmasters prefer to use responsive methodologies for new projects, and adaptive for retrofits of existing conventional static websites.

 

Search Engine Optimization (SEO)

Adaptive designs are good for mobile ranking.  They usually pass the Google Mobile-Friendly Test.  Because an adaptive mobile site generally includes extra pages and content, the consensus among SEO experts is that it is better for mobile ranking since Google sees it as a better user experience.

In the same token, responsive designs are also good for mobile ranking; and, it also passes the Google Mobile-Friendly Test.  The top level homepage of the site will be mobile for better SEO.  Because it is less specifically tailored to mobile, it may rank slightly lower than its adaptive counterpart.


Design Constraints

The design of an adaptive website allows for total creative freedom on the full website.  Any sub-site should, or can be treated as a responsive design.

Responsive is the type of design that should be simple and include less design elements.  Because a responsive design must respond to a maze of different mobile devices, webmasters are compelled to make compromises most especially when clients plan to implement future website changes.  The bottom line to this is, when the design becomes more complicated, it can be very difficult to change any design elements.


Updating An Older Website

For very large websites, the creation of a mobile sub-site may be a better approach as it allows the webmaster to ease the design into mobile in a more seamless way.  As the website update transpires, the webmaster can more easily see how the responsive design works.  Ultimately, once the design satisfies the client’s requirements, replacing the older website can easily be done incurring no downtime for the site’s Internet presence.

Updating a current website to become responsive will literally require addition of CSS Media Queries.  In most cases, a site can pass the Google SEO test if fonts and linked images are made larger, elements are hidden for mobile operation, and the layouts are made to flex at the reduction or enlargement of screen resolutions.  In light of these prerequisites, knowledge and application of Media Queries is essential, and the design will take a lot of design changes and testing processes.  In essence, through the magic of CSS Media Queries, website fonts can be made to increase in size; menu buttons get larger and/or in some way, may be hidden to slim the menu; and, some elements may also need to be hidden.  This is the type of “reverse” Media Queries whereby instead of the site getting smaller for mobile, some elements get larger for mobile so the full website can be legible on all devices.


Conclusive Findings

The design of a mobile version of a full website allows more freedom of design if the decision is made to target  mobile and desktop users separately with a plan to add new elements to the website and change design layout.  As such, this type of design is best for larger and complicated sites and targets specific devices; promotes better user experience thus better for SEO; extra webpages to maintain; and, requires the use of automatic redirection scripts.

While many professional webmasters think that responsive design is the best solution, the nagging drawback persists to prevail concerning the difficulty of adding and/or updating elements.  Templated theme designs can readily be purchased if the client has no plans to change website layout.  Conversely, a responsive design is also a good choice for experienced webmasters and new users who want to learn more about this style of design.

All In all, responsive design is good for small simple sites; has less pages to maintain; simplifies the web addresses; is slow to load; and, has complicated codes and more prone to errors.

* Name:
 
* Email:
 
* Comments:
* Enter verification code:
 
 
* - Required fields

We implement rigorous processes of creation relying on creativity, design, patience and knowledge.   We are backed by 17 years of experience.