By Eric Karkovack
Source: speckyboy
With the sheer number of devices and screen sizes out there, responsive design has become standard protocol. It’s vital that we design for and test our websites to ensure that users can navigate and easily access content – regardless of how they’re accessing it.
As with just about everything in the web design space, there are different philosophies for how we should approach the design for smaller screens in particular. But, those differences aside, there are some tenets of responsive design that we should all keep in mind.
When designing your next website, think about the following as you customize for mobile devices:
Readability and Usability Come First
Everyone wants their design to look beautiful on every screen. But there is a danger in trying to get a bit too fancy when it comes to mobile. A high-end layout or feature that looks stunning on a desktop may just not make sense for a phone.
Things need to be simplified, where appropriate. If it turns out that a specific element is just too clunky on a small screen – there’s no shame in removing it or replacing it with something that does the job more effectively.
When it comes to typography, size and contrast are just as (if not more) important on a phone. Staring at even high-quality mobile screens can still be a bit tedious when reading long articles. Make sure that text is a decent size and that line spacing and margins are set to help increase readability.
The takeaway is that the same effort that goes into usability for desktop users should also go towards making the mobile experience a great one.
Take Advantage of Available Screen Real Estate
Multi-column layouts are ubiquitous, but text-heavy columns often aren’t appropriate for the smallest of screens. In that case, it makes sense to simply turn multiple columns into a single column. But when we’re talking about both tablets and even phones held in landscape orientation, columns can still be quite effective.
The point is that it’s worth the extra effort to see how we might best use whatever screen real estate we have available to us. So many times, we roll right past these in-between resolutions and instead focus on solutions for only the smallest and largest viewports. A tablet in portrait orientation, for example, should be thought of differently than a phone in that same view.
One of the easier ways to implement this type of strategy is by using CSS Flexbox. Properly configured, it is often quite good at automatically serving up the best layout for the current viewport. You may need to make some slight adjustments via media queries, but the results are worth that little bit of additional tweaking.
Everything Doesn’t Have to Be in the Same Exact Spot
It’s easy to fall into the trap of placing every single design element in the same relative spot for both mobile and desktop viewports. And, while the desire for consistency is laudable, this approach can sometimes really backfire on smaller screens.
For example, many websites place items such as search forms or social media icons in their header. That works wonderfully on a larger screen, but can often get in the way of the main content on a phone. This is especially the case on secondary pages, where users may really just want to read the text of the page and not have to worry about all the extraneous junk.
There are several options beyond just sticking those types of items uncomfortably the site’s header. You might consider tucking those items within a button that displays them at the user’s request. Or, they could become part of whatever mobile navigation solution you’ve implemented.
The same thing may also apply to features such as sidebars. Other elements may be hidden altogether. Again, media queries (and maybe some conditional code) can place these items into more appropriate spots on mobile devices. Use your best judgement as to what should go where.