Last Updated on May 22, 2023
Responsive design is about more than just layout; it’s about designing for the Web
We may think of Mobile First and Responsive Design being in answer to a mostly mobile phone accessed internet. However, Samsung just unwrapped its new 3400 pixel monitor and kids are accessing the internet more and more from their game consoles. So how do we ensure our websites will be seen regardless of device size? Mobile Different, Mobile Forward, Device Agnostic, Resilient Design, Pattern-Based Design … there has lately been a lot of discussion about how we ensure visitors can access and use our content regardless of screen size.
Designing for Context
The days of designing websites for 800×600 pixel browsers have come and gone. It was a comfortable time, making websites you knew would always be seen in the same way, by visitors always in front of a modem dial-up, with a desktop, and in their office or at home. Today users have a scarily manifold amount of devices, could be parachuting, and eating, and it could be great wifi or lousy. We really don’t know. We really only know that users will have a browser. The rest we just don’t know.
A meaningful analysis of a user’s context requires not only an understanding of users’ goals but also their behaviors: What are they doing? How are they feeling? What are they capable of? And context really is the most important word here. Context is the golden word because it means we need to be able to give them the content they want, when they want it. Regardless of device. Brad Frost gave a brilliant talk about the amount of bullshit there is on websites and it is so very true. Think about the last time you were looking for a restaurant and its menu. In your car, on a rainy night, parked on the corner hazards flashing, looking for the address and menu of a restaurant … but you have to wait for the website to download and then click through the history of the restaurant and a gallery of its interior decor … BAD CONTEXT. Who needs it?
Responsive design is about more than just layout; it’s about designing for the Web.
We think usually of Responsive Design being about making large websites smaller so they fit on a mobile device without completely falling apart. We have normally designed our websites as a collection of pages, held together with a navigation, and containing a few nifty add-ons such as sliders, info boxes, contact forms … but the web requires something more – WE require something more. It will require information modules that can be brought together as required by the device and by the user. The web designs of the future will not be based on pages but on patterns. Patterns of content and services called up when required.
As Ethan Marcotte tells us during his recent Event Apart talk “Moving from pages to patterns: this is a huge shift from creating grids that get filled with stuff. Our previous “canvas in” approach is no longer sustainable given the quantity and variety of devices we have to design and develop for.”
Design Patterns
Design patterns—small, reusable modules of information brought together as required by the user and in the space available. If you add to this Artificial Intelligence and Machine Learning? We might be at the beginning of a beautiful relationship …
Patterns? Modules? You might be reminded here of the Server Side Includes of the 1990’s, of Flash objects, and of course of the basics tenants of Content Strategy. You might be nodding your head smiling when you see Google serve you different results on your mobile than on your desktop. It really all comes back to the same thing: People want something from your site. We can’t let them go away without it. When an average visitor spends at most 90 seconds on your site, engaging, relevant, consistent, and EASILY FOUND content is not a nice to have – it is a necessity.
It was not very long ago that Google began testing its search algorithm to favour those websites which were device friendly (see our post from January). We know that Google already displays different search results on mobile than desktop. However we could ask the question – should there be only one website? It is good that your site works on all devices. It is good that some sites show certain content on mobile devices and other content on desktops. But remember the days when there were mobile websites with the m. domain and other websites? Each had information unique to the user context. We almost had it then, didn’t we? We were on the threshold, albeit without knowing, of offering context-friendly content.
We talk about websites being scaleable, being responsive, adaptive, cross-browser, mobile friendly, future friendly – but what we really need is, as much as possible, that content that will always be accessible regardless of device and context. Our designs need to be resilient. Jeremy Keith wrote about this in 2016 and said “That first step is the most important: acknowledging and embracing unpredictability. That is the driving force behind resilient web design. The best way to be future-friendly is to be backwards‐compatible.”
As Jakob Nielson said in 2012“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer user’s key questions, they leave.”
You can read more about this and expanded upon by various great minds:
Jakob Nielsen (2012) Usability 101: Introduction to Usability https://www.nngroup.com/articles/usability-101-introduction-to-usability/
Brad Frost (2013) Death to Bullshit http://bradfrost.com/blog/post/death-to-bullshit-at-creative-mornings/
Trent Walton (2014) Device Agnostic http://trentwalton.com/2014/03/10/device-agnostic/
Ethan Marcotte (2015) A Book Apart, Responsive Design: Patterns & Principals
Jeremy Keith (2017) The Road to Resilient Web Design https://www.smashingmagazine.com/2017/03/resilient-web-design/
Chris Coyier and Ethan Marcotte (2017) https://css-tricks.com/container-query-discussion/
Ethan Marcotte Design Beyond Our Devices (2017) http://www.lukew.com/ff/entry.asp?1971
and another source from this talk http://www.perpendicularangel.com/2017/04/an-event-apart-2017-design-beyond-our-devices-by-ethan-marcotte/