In the last post I talked about frameworks and how they speed things up, and how they make designs and layouts generic at times. To be honest there are times when we are not as creative as we would love to be. In cases like that it might make sense to take a break, step back from what we are doing, or simply ask someone else for a quick idea or inspiration instead of defaulting to the simplest common denominator of "works" and "client will accept it". This is no different when it comes to responsive website design.

Well, it just stacks up

Responsive web-design is nothing new anymore. As a matter of fact some companies and agencies are even moving away from it in some cases again. But that is not the point of this article. It just goes to show that we have reached a decent saturation of RWD (Responsive Web Design) in the wild. When you ask many designers about how they approach RWD you will be surprised how often they throw this back at you: „Well, the thing with RWD is that it stacks up when you go mobile“. Some will tell you that they go mobile first and begin with the smallest breakpoint(s) and work their way up. „As soon as I have more space, I place items next to each other“. That is an approach. I would call it the path of least resistance, but not the award winning road to UX and design glory.

Priorities and accessibility

While none of the above is wrong or to be condemned in any way, it still is only the basic 51% of the job. To be honest with you, that can be done by any framework out of the box. It does not really need a designer for that. Challenge people when it comes to RWD.

Starting with a mobile first approach is great because it a) caters towards what many users will be seeing as smartphones take over the majority of page impressions on the web, and b) it helps to clarify what you want and need to do and where. When you only have a limited space and need to get your priorities right in order to have things nearby when they are needed the discussion about priorities becomes much more focused. Imagine a mobile shopping app with the add to cart button at the bottom of the page, that would be an epic fail wouldn’t it?! But all too often it makes sense to think a bit further when the device width increases and one might be tempted to have the things just simply move next to each other.

Hi! My name is flexbox and I am your friend, and so is my pal CSS grid!

With CSS technologies like flexbox we have the chance to reorder components on the pages, distribute them in exciting ways and shape the layouts in ways which make the content and functions stand out and work well. For those who would like to understand a bit about it, there is an awesome game on the web showing you what can be done with flexbox: Flexbox froggy. And once you have played all level Read up on another great thing: CSS grid. This is yet another upcoming way of handling all your layout needs. Both need to be used with caution due to the danger of not being implemented in your target groups old IE of choice or an old browser version in general but using it and planning with it is pure gold. You will understand what I mean when you start reading the text.

Readability as a guiding principle

Nothing is more annoying than bad readability and underperforming typography. In the RWD world typography can be done right: There are breakpoints which offer us the chance to not only move things around and change their order but to shape the typography as well. Text does not need to stretch from 320px in width to 1680px. Now, every breakpoint offers the chance to evaluate how the content can be distributed and how the type works up until the next breakpoint where the same evaluation can take place again. We can introduce whitespace, create columns as long as that does not break with the typical reading habits on screen-based devices, we can turn images into backdrops and have overlaying captions move to sides and below images. Some items might even turn into something sticky, hanging at the edge of the viewport (remember that add to cart button?). Start looking around and figure out where you want your content shaped and how. Actually, do it the other way around: Shape your content and decide how you want your breakpoints to be set based on that. Breakpoints follow content not content follows breakpoints or even worse, device-specific breakpoints.

Don’t just make it a boring 12-column-grid-based stack-system which turns blocks from 4-4-4 into 6-6|6 and then 12|12|12 column-wide arrangements. The 6-6|6 shows the trouble with these simple approaches already. All of a sudden one column turns out to be twice as wide as the others. That doesn’t always work out so glorious.

When we relaunched breuninger.com to become responsive in 2013 there were a few decisions to be made which were quite the opposite from simple stacking. When you look at the way filters and sorting options behave on product lists across all breakpoints you have a wonderful example of how one can tailor the items to fit at every size of the device. Be creative and get together with your UX-designer, your front-end developer, your concept developer and figure out ways how things would be perfect. How you want them to be, not how they can be crammed into predefined iOS-device breakpoints.

Supersize me!

A last word on large screens. Everyone talks about the mobile revolution and that the mobile devices are taking over. True, there is a lot of movement. But aren’t we forgetting something? More and more screens are at 16:9 and have resolutions at Full HD (1920 × 1080 pixels). This is a nice format for many things. There is a lot of space to have large images and arrange modules side by side. Why are so few designs taking that into consideration? The majority of designers rather limit the width of a website and recreate the same thing from 900px width all the way up to 1600px and then simply add padding to the left and right. Come on! at close to 2000px in width you have to start in a different way. This is almost two websites next to each other. No designer would arrange things from a vertical A4 layout identical on a landscape layout and simply add a bit of padding in the print world, would they? So start using that canvas and let the user feel and experience the full screen. Layouts adding just padding are throwing away lots and lots of opportunities at the same time.

Summing up

When designing RWD or evaluating designs make sure you challenge the RWD behaviour. You are spending a lot of time and money on these projects, why just live with the boring framework ideas when you can really make an impact by challenging the designer to make the canvas and content excel in parity. Content is king (again) and it should obviously make the rest follow.

Up next

Do a mistake once and correct it? No problem. See someone else's mistake and copy it? Plain stupid. Many things go wrong in UI and UX land but unfortunately all too often patterns are being used because they look cool, or because they are simply animated. This aspect of being different tends to lure many of us onto the bandwagon of trendiness and makes us forget that there are jobs to be done. Now we have fancy eye candy but fail at succeeding with the task at hand. In the next post I will focus on some of these hip new points of failure.

In this series

1. Parallax until you vertigo
2. Bad font decisions
3. Frameworks which break design
4. Boring responsive design
5. Adopting UX flaws
6. Icons without cause