The use of mobile devices to surf the web is growing at an astronomical pace. The increase of economical Mobile phones and data plans worldwide, means that during 2015 mobile web access will surpass that of desktop units.
Unfortunately the largest proportion of the web isn't optimised for those devices. Mobile devices are usually constrained by display size and require a unique approach to on-screen content layout.
So you recently visited a company's website on your smartphone and noticed that it had an m-dot address. The idea crossed your mind that, with mobile web access on the rise, it might be a good idea to invest in a mobile site of your own. Don't!
With the constantly changing size of phones and tablets, and the variations between landscape and portrait mode, there is in no practicable method of having a design for each of them. Apart from this fact, you will be penalised by Google, who recently issued a statement that adaptive websites will receive a higher SEO ranking than sites that publish multiple versions of their content.
So what is the solution?
Responsive web design adjusts to suit the capability of the device that a client is using. The layout will change according to screen size and orientation. For example, on a phone, users could see content shown in a single column view, while a tablet might show the same content in two or even three columns, depending on its orientation. Responsive web design allows websites to adapt to a variety of devices and rules out of the extra cost of designing for each device separately. Responsive Web Design will make full use of the size of your devices screen, the contents of a site will be optimised for the appropriate resolution and unnecessary zooming, panning, and scrolling while visiting a website is eliminated.
The easiest way of confirming that a website is responsive or not, is to resize your browser window. If you see the contents of the site alter their size or shuffle around to fit the new size of your browser window, you will be able to view the website on any device — desktop, laptop, tablet or mobile.
The transfer from desktop to mobile devices compels web developers to create a design that is responsive to varying screen sizes. For a while, we assumed that the solution was mobile templates – two or more different sites that would load automatically, depending on the device detected. However, this creates extra initial design costs and can trigger havoc when updating content. A Responsive Web Design makes the enterprise not only easier, but is cheaper and more efficient for revisions – an administrator only needs to adjust one set of web content, saving time and ruling out errors.
As previously stated, SEO (Search Engine Optimisation) is a further key factor to consider. Google evidently prefers responsive web design over mobile templates – It is both easier and safer for a Search Engine to navigate a single URL.
Consider the situation of just two different sets of web content; a desktop version and a mobile template. Technical information was updated on the desktop version, but your webmaster either forgot to update the mobile version, or put off the alterations until after the weekend. Search Engines now have conflicting information. The situation can not arise if you have a single, adaptive website.
From the user's point of view, a responsive design provides a better experience. Responsive Design reduces user actions and the exasperation that users frequently experience when using a static website. If a visitor to your site is using a mobile device and, due to panning and zooming, is unable to quickly find exactly what he is looking for, there is an extremely high chance that he will navigate away from your site to visit a competitor. Google informs us, however, that if a user is happy with his experience on your website, the chance of him becoming your customer increases to 67%.
Four things you can do to ensure a positive user experience
If this is your first responsive design, it is tempting to build a web page that is easily compatible with mobile devices. Are you compromising the design in the process? Responsive web design can be challenging to implement, but when it is applied properly, it will provide better results. However, don't neglect the fact that Apple's most popular PCs now have a screen size of 27 inches and a resolution of 2650 x 1440px!
Using a Responsive Grid System, such as Bootstrap or Foundation can assist in making your design fit the content and vice versa.
Remember that users may be accessing your website on slower 3G connections (UK, Asia) and/or less economical provider plans (USA, UK, Asia). Loading times are important and large file sizes can cause a visitor to leave your site even before it loads completely.
Bear in mind that a mobile visitor will be using his finger to navigate your website. Pay attention to link placement. Apple recommends a minimum acceptable size for mobile controls of 44 pixels. Any links viewed on a Smartphone should fit underneath a finger.
Don't disable zooming. In doing so, you are reducing your visitor's control over your website and indirectly reducing his positive experience.
Web design is is in a constant state of change and has been since its inception. We are continually reviewing the methods that we use to improve our websites.
For the near future one thing is undisputed: Responsive Web Design is the road we are traversing. With a multitude of new screen sizes and devices being introduced on a monthly basis, Responsive Web Design is the means for both developers and Search Engines to stay ahead of the development.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.