Designing For Mobile - Nov 2016Whether you have an existing website, or are planning to build a new site, recent trends in SEO stress the importance of being mobile compliant. Search engines like Google will list a site better for mobile searches if your web pages are mobile friendly. The following information outlines some of the options available so you can make an informed decision about how to update your current site, or create a new mobile compliant website.
View Short Version
How they work||
This type of design responds by shrinking or expanding to fit smartphones, tablets and desktop computers. It allows for a single website for all devices. Read more...||
This setup includes a top level desktop website and a second website either inside a folder or on another domain specifically for mobile viewing. Read more...|
Little known facts||
Responsive design is difficult to work with but has the benefit of less webpages. In essence you are still creating two websites but are putting them both in the same webpage.||
Responsive code is included in the mobile version and additionally you can still add responsive elements to the full, or "top level" website.|
This will be mobile friendly, however how mobile friendly depends on how many elements are included to allow for desktop display.||
The mobile version will be mobile friendly.|
Is it responsive?||
The mobile version will usually be responsive.|
Needs to include code for both desktop and smartphone display as well as tablet. Extra code is needed to allow the webpages to flex. This type of design will be slower.||
If auto detection is included loading will be quick. The sub-site is a condensed version of the top level site setup specifically for mobile device display and speed.|
Good for SEO. Will rank well in both desktop and mobile searches. Passes the Google Mobile-Friendly Test.|
This style of design will rank a little lower in mobile searches than a dedicated mobile version due to page load speed.
Good for SEO. Because this setup has one website specifically designed for desktop and one for mobile this type of design may do slightly better in searches. Passes the Google Mobile-Friendly Test.
May get better ranking due to Google seeing this site as a better user experience.
Ease of use||
Responsive design is generally more cumbersome and does not allow the addition of some types of widgets, some animation applications and large tables of information. In general there will be 30% to 60% more code so the layout can conform or "flex" for all devices. Not as design friendly for the casual user.|
You could look at it as if a town were to make a single vehicle for postal delivery, fire fighting and police. Maintenance and repairs would be more involved and you might be more limited as to what can be included in the vehicle. Plus it would be damn confusing.
With this type of setup two separate websites must be maintained. Because there is less code in each site the webpages and files may be easier to work with, and how the site works can be more easily understood. Less testing is usually needed.
Although it may sound more difficult to maintain two websites, because the code and pages are more simplified this can be a better choice in some cases.
Usually will not allow for as many applications and interactive elements to be added. Adding elements like large tables of information can be difficult. Although you can hide elements on mobile devices you will still need to have a version of the same information on the same page in a simpler form that displays on mobile.||
The top level website can include any type of application, widget, images and interactive elements. The sub-site will be limited to mobile friendly applications.|
Designing for multiple devices and desktop all in the same webpage does offer some challenges. In general you will need to compromise on what can and can not be included on the site. These limitations may make for a less rich user experience.|
Obvious, but generally not considered is that long pages full of text will not display well on mobile. Will your site have loads of information? If you plan short pages of info and/or few images this is a good way to go.
There will be one site configured for desktop display and one specifically for mobile. This allows the developer to create a more customized version of each site allowing for a better user experience. You can present a more condensed version of your top level website in the sub-site.|
Responsive design is complicated. Although it is all the buzz right now (or trending if you prefer) authors of articles espousing the benefits or RWD are usually developers or are very familiar with current design and industry trends failing to understand that everybody wants a website, but everybody does not want to be a code guru. Small business webmasters in the real world may not want to learn the code needed for this type of design.||
Two websites are more difficult to keep updated, however webmasters that have setup sites in the past, before RWD, will find it much easier to work with separate websites and code that is more similar to what they have used in the past.|
A sub-site can introduce novice webmasters to responsive without overwhelming them.
Updating old sites||
Can be used to update any website no matter how old it is, but it can be complicated.|
You can update an older coded website using Media Queries responsive code. Because HTML5 and CSS3 are subsume (can be mixed together) with older HTML, new CSS3 Media Queries code can be added to even very old designs. Updating with new CSS may not work on every website but with enough work some older sites can be made to pass the Google Mobile-Friendly Test.
Allows older sites to be updated without disturbing the current site.|
Optionally, you can create the mobile version using a responsive web template, edit the new site over a period of time and once you are satisfied with the sub-site you can move it to the top level hosting folder and make it your main site. This allows for a more seamless update.
Building new sites||
Best choice if you plan a more simple design and will not be adding a large number of applications and images or an abnormally large amount of page text.|
Example: The page you are reading is not mobile friendly because it would be unreadable as responsive. We removed the viewport meta tag on this page to instead allow mobile zooming.
Best choice if you want to create a very complex website for desktop or if you want to more specifically target mobile and/or desktop users.|
Only a single domain is needed.||
Can optionally be a separate website with its own domain name, or the mobile site can be inside a folder under the same domain. Google ranks webpages inside folders the same as if they were in the top level folder.|
This may be the best choice if your business targets desktop and mobile visitors equally. Say for example if you are a restaurant or a candy shop.||
This is best for a business that sells downloads or software, or if you want a very elaborate top level website with lots of information, but only need to show mobile users your location and phone number.|
This type of design is relatively new and is still evolving. There will be more changes in how RWD works but they may not affect a site built using current responsive code. Another consideration is that as smartphones become larger and tablets smaller, how will this affect the css code used that in general detects the screen resolution to create the responsiveness.||
Using this type of setup you can optionally make the sub-site the top level website at some future date.|
If auto detection is used it may need to be updated as new devices become available.
When to use||
For new websites that will not include a lot of text, images or page elements.||
When you have larger tables of information, many images, lots of products or want to target specific devices.|
Generally more complicated to work with, slower loading speeds and the design has more limitations as to what can be included on the webpages. The real benefit of RWD is that you only need to maintain a single website.|
This is an excellent choice for webmasters that want to learn how to design using Media Queries responsive code and also for users that plan to not add a lot of new elements or make any changes in the website layout.
Good for SEO.
Allows for more creative freedom and tailoring to specific devices. The drawback is that you need to maintain multiple websites.|
This is the best choice for webmaster that would like to more specifically target desktop users with a more feature rich site, and/or target mobile visitors with something specifically created to display well and load quickly on mobile devices.
Has a slight edge over RWD for SEO in most, but not all cases.
External ResourcesResponsive Web Design Basics
Google Mobile Friendly Test
Make It Responsive
Web Starter Kit
Google Responsive Web Design
Mobile Friendly Sites With WordPress
Other ResourcesUpdating an Older Website For Mobile
W3Schools HTML Responsive Web
Responsible Responsive Design
Responsive Design Breakpoints
Journey Into Mobile Tutorial
Responsive Navigation Trends