On the 1st day of Christmas a great site gave to me...a mobile page that renders seamlessy

Posted by Mark Underdown on 08 December 2017
Filed under: Mobile, UX

Click here to listen to the song in its entirety

52% of users say a bad mobile experience makes them less likely to engage with a company*

Responsive website design is not new but figures show that companies have been slow to modify their existing websites to take advantage of this great way of bringing a superior experience for users accessing their sites on mobile devices. Most of us spend a lot of time using our phones and tablets to access the Internet; the biggest difference for website designers is the consideration that navigating a site on a smaller screen is a pain if you constantly need to zoom and pan.

Enter the idea that the same website through the magic of stylesheets and appropriately designed templates, can actually move, drop and repurpose the furniture on the page in response to the screen’s resolution. Superb!   No need to build a costly separate mobile website that is a hassle to maintain. It also removes a compelling reason to build a separate mobile application – though there may be other reasons to do this.

So if responsive website design means that your website can adapt to the screen size and orientation of your device, does that mean it works on my latest whizz-bang acquisition? What about that older model so beloved by a large group of the site’s users? Here comes the subtle but important need to understand the difference between responsive and adaptive website design. The easy clue is in the words; a responsive site responds to changes in available pixel width (screen size/orientation) whereas an adaptive site adapts its behaviour to the actual device being used and can in principle give quite different look and feel depending on the device itself.

At Unified we build responsive websites. They are a cost-effective way of making mobile-friendly sites involving only a one-off project that ensures your site will look good on the most popular devices. By most popular we mean according to your website analytics and will usually include a smattering of Apple, Samsung and Amazon devices. But (as customers often ask) will my new site “work” on my phone which isn't an Apple, Samsung or Amazon device? The short answer is yes; the site will render as best the browser on the device can show, be sized appropriately and will use that device’s native functionality for the normal things you do on any website on that device, for example selecting options on a form is done one way on iOS and another on Android.

If you feel you want to go further and tweak the look and feel of your site to adapt to specific devices then be aware that the cost will increase in two important ways. Firstly your website needs to “know” what device you are using. Our CMS partners offer powerful third-party integrations with companies who track devices for you so you’ll always know about the latest ones – but this service will cost you something to enjoy. Secondly armed with this information, your website needs to have appropriate designs for that device or range of similar devices – these will need to be designed and built and depending on how granular you want to be, could entail quite a lot of both initial and a lesser ongoing cost to maintain.

This is the reason why most customers feel that going adaptive is just not needed. Yes but will it “work” on the … (deep breath and repeat the above). When designing responsive sites we use your analytics to derive the most active devices. We look at their CSS resolutions and design the pixel widths at which the design changes to give the best display at those widths. Do you know the pixel width of your device? It is not the same as the screen resolution…check out http://mydevice.io/ on your device and it’ll tell you; the site also lists the sizes for the most popular devices.

We typically have design changes to support:

1) above 1024px (aka desktop view)

2) at 1024px (aka) tablet landscape view

3) at 768px (aka tablet portrait view)

4) at 320px (aka mobile portrait view).

That doesn’t mean that between those widths nothing changes; often we’ll switch off a menu a mid-point or lose a slider at another so the behaviour of a site in a browser where the widths are changing dynamically is fluid. Yes but will it “work”…?

All you need is know your device’s CSS width and compare it to the behaviour defined at the various defined responsive pixel widths. If your design agency can’t tell you what those are…then stop using them and come and talk to US instead.

(*Source: Adobe.com)