Have you ever thought about the devices which are most used to access your web page? If not, I think it’s high time and I’m going to tell you why.
Some important questions you need to ask yourself when running a website, blog, web shop or any other online platform are these: What size is the display used to view my content? Which format do the users’ screens have? How strong is their internet connection when they view my content?
A few years ago, these questions were easily answered. The different display sizes and kinds of devices used for surfing the net were not as varied. And more often than not, the device used was a desktop PC. Therefore, websites were made to fit the size and features of these PCs. Such designs covered the needs of most visitors and user statistics did not really influence the basic layout size at all.
When smartphones and other such technological marvels came around, which meant that we could be online constantly, all of that changed dramatically. You didn’t need to sit at your desk in order to go online, you could do that anywhere and anytime. You can read up on some interesting statistics and facts about the behaviour of mobile users here. One such interesting fact is that more than 50% of smartphone users will reach for their phone immediately after they wake up in the morning in order to tweet, to go on Facebook or to read the latest news.
Then, 2014 saw mobile data traffic overtake that of desktop PCs for the first time. And by now, the percentage of internet users who own a smartphone and use it to surf the internet has risen to 80% (which you can read up on here).
All of that should definitely make you reconsider your website’s target audience and the devices they are using and the thing is, that your audience now more or less contains the majority of internet users – including those who mainly use their smartphone to view it. If you don’t want to forego a large amount of users and traffic from the get-go, because they simply can’t find what they need on your site, you’re going to have to automatically adapt the look and feel of your online presence to the devices used. This is particularly important in the field of e-commerce, since the traffic will, of course, directly influence sales.
This approach is called “responsive design”. The basic idea is taking into account the various devices and their individual features and limitations, which the name already hints at pretty heavily. What happens here is that the general layout is optimized so that it can respond to each user’s individual needs.
Well, that sounds awesome in theory, but, of course, it begs the question: what’s the best way to put this concept into practice? Now, there’s a number of ways you can go. You can, for example, start by designing your website for mobile devices and add on more functions and more complex design elements depending on each display’s size. This method is called “mobile first” and is used (no surprises there) when mainly mobile devices are targeted. But, of course, also a desktop PC can access the content, in which case additional features may be visible, which, however, are not strictly necessary for the website to fulfill its core purpose – they are so-called “nice-to-haves”. The other way round, designing for desktop PCs with a full feature set which is then reduced, works just as well. And if you want my two cents (if not, you’re going to get them anyway, sorry), you should really let go of the thought that your website absolutely has to look the same on every device and thus for every user. What’s way more important is that the important content can be ideally viewed on any device – while it needs to be designed equally well, that usually means it will look slightly different.
Really, I can best show you what I’m talking about with reference to some examples. The website http://mediaqueri.es/ does a pretty good job of collecting great examples of responsive designs with the help of media queries and it shows you screenshots of the same page when viewed with various display sizes.
Typical elements of responsive design are a dropdown or off-canvas navigation and flexible grid systems, as well as flexible images. Basically, all these elements are made without a fixed size, but will be automatically fitted to the size of the device that displays them. In the case of grid systems, a different number of columns is displayed according to the width of different displays. As soon as the contents can no longer ideally displayed due to a restricted width, the content elements per row are reduced – e.g. from four columns to only two. The navigation will behave similarly in this case. With large screens, you can use the full width and the structure will be clearly navigable. In order to preserve this clarity on smaller devices, you can either place the menu at the top and turn some sub-menus into dropdowns, or you can add a menu button at the side which will display the full menu when clicked (off-canvas navigation). You can find an example for a dropdown menu here, and here‘s where you can take a look at an off-canvas navigation. Try to adjust the windows to different sizes in order to test the responsiveness of these examples.
Here at CodeFlügel, we’re huge fans of innovative ideas like that and try to use responsive design in each of our web projects and concepts. If you’re now just as convinced that this is the way to go, we’d love to help you turn your static layout into a responsive one. Thus, we try to do our part in making the web that little bit more responsive and fully accessible to everyone.
Some further helpful links: