Published: September 30, 2014
I’m always excited when I see a company launch a new website. One of the first things I check when viewing one is whether or not it’s responsive – that is, does it adjust as I resize my browser window? Many front-end developers and designers will remember a time in the mid-2000s when Cascading Style Sheets (CSS) were growing in importance – the first thing we would do back then was disable the CSS in our browser to see how much of the rendering used CSS vs HTML to lay out and style the page (font tags, tables etc.). I recall being disappointed to see how many newly-launched sites still used tables or other ‘old’ methods to style their pages.
Now, in a time of mobile and responsive, I’m finding I’m still let down when I see how some sites handle their responsive experience. A large number of redesigned sites I see use what I call “lazy responsive” web design. So what is lazy responsive web design? My definition focuses primarily on layout but other things could be included as well.
Lazy responsive means: Picking arbitrary responsive breakpoints such as phone, tablet and desktop and ignoring the ‘in-between’ areas. Lazy responsive always has fixed layouts during the breakpoints. This means rather than allowing the content to be flexible on smaller screen sizes, the layout remains fixed.
The problem with picking arbitrary breakpoints such as 320px (iPhone), 768px (iPad) and 1024px (Desktop) is that the world doesn’t only use Apple products. Even Apple has broken these pre-defined breakpoints with the release of the iPhone 6 and 6 Plus (now 375px and 414px wide).
As Open Signal pointed out years ago, Android has hundreds of different screen sizes. By only designing and coding your site for a handful of iOS breakpoints, you’re ignoring the 50-75 percent of other mobile users using Android.
Examples of Lazy Responsive Design
Below are some examples of sites that fall into this category.
The one thing I found in common on all of these sites is they all use Twitter’s Bootstrap framework. While I’ve never been a fan of using other people’s HTML/CSS frameworks (I have one of my own that I’ve honed over the last seven years) I wonder if developers are using it as a crutch and aren’t trying to further learn about responsive?
Another theory put forth by a co-worker is – the developers of these sites are taking the designer’s mockups a bit too literally and building the site to match a mobile, tablet and desktop design file as opposed to taking some liberty to style things in the ‘in between’ breakpoints.
Below is an example site that isn’t using this lazy responsive method –
Other Factors in Lazy Responsive
While I primarily talked about lazy responsive in the lens of layout, Responsive Design does cover many other areas of development.
Here’s a few other considerations:
- Is the overall weight of the page smaller for mobile?
- Do UI elements change to allow for touch devices? (such as drop down navigation)
- Are vector images being used where possible?
By Neal Grosskopf, Software Engineering Director
As our Software Engineering Director, Neal enjoys finding creative technical solutions for our clients. He also keeps the Envano team informed about new technology that helps us operate more efficiently and easily. When not at work, he’s most likely pursuing his other passion, photography, which often means lugging around camera gear cliffside at 2 a.m. to get that perfect shot of the night sky.
