Blog

Responsive design : what about medium-size screens ?

Today more than ever, World Wide Web is in constant revolution. From text and desktop based, it has been turning into a visual and responsive space where content matters, but so does viewport flexibility… I could say here that more and more resolutions are coming every day with smartphones, tablets, TVs and, let’s say watches. But who reads content, or does online shopping on a smartwatch…

 

For the other viewports, great work has been done to allow increased responsiveness with tools like Bootstrap, Foundation and other grid system frameworks. So one user can comfortably browse a given website on various support while the designer of such a website can easily develop it to be suited for all of these various supports.

You know what they say : first impression matters, specially in web marketing… To be successful, a campaign material (such as a website/webpage) needs two things : visual appeal and function (that’s where content matters).

Now, it just seems sometimes that the « responsive design » concept has shifted in its definition from something like « flexibility for all screen sizes » (as in smartphones, tablets, laptops, desktop computers… and eventually TVs) to a (kind of extreme) « mobile-first » approach in which are considered only smartphones and desktop screens, while tablet screens are sometimes left behind and laptop are simply forgotten usually.

Why does that happen ? Well, « Mobile first » approach means what it tells : the applications are designed at first for mobile screens. All the thinking is done on a mobile phone canvas, streamlining the content, the navigation and the interactions according to the space available there. This usually takes a lot of time on custom layouts… Then, time being the essence, that design gets just extrapolated to tablets and desktops viewport. By « extrapolated », understand it gets magnified to fit in these larger viewports.

Now it is true that usually, especially when web page content is sufficiently thought through, and given the advantage of the grid system, the website morphs well between the various viewport even though it was designed for one specific viewport.

However sometimes, when the amount of content increases or new interactions are coming in, a website can become kind of a Frankenstein’s creature ! I’m sorry, but that’s the truth !

 

Take the website below for example.

responsive web design mobile
responsive web designtablet
responsive web design laptop
responsive web design desktop

Clearly the layout works fine on a desktop and mobile screen, whereas the tablet and laptop viewports seem they have been left behind on that occasion.

So is that a big deal ?!

Well, although it’s been established that most of the web traffic is made via mobile devices, that doesn’t mean nobody uses laptop or larger screens anymore to browse the internet. Actually, it has also been established that some people often use several devices to complete a given operation. For example, online shoppers often start searching for a product on their smartphone first and they continue shopping on their laptop later. What about what I would call XL mobiles ?  Like the iPad Pro for example which has a screen size of 1366 by 1024 pixels ? That’s bigger than a laptop’s, still it’s a mobile device.

Unfortunately, Bootstrap will not do the job if the source code of your device has not been thought to do so.

How to prevent this ?

It is important to figure out the whole range of screens available out there and design the layout to cover all of them. Wireframing for each one of them, streamline content and organise the interactions according to the space available.

Then on the development stage, do actually implement the right Bootstrap components within the HTML code, or the relevant media queries in the stylesheets, in order for this optimisation to actually happen of the user’s screen.

System testing has to include, not only mobile devices and desktop viewports but also the viewport which are in between these, like laptops.


000webhost logo