Adaptive design planning.
Today, we can no longer design any site without considering carefully the many different devices and screensizes affecting layout and presentation. A good responsive design will allow the content to adapt to the viewport, be that a computer or TV, or mobile. While the specifics will depend on project and target group – a mobile first approach will deliver best results.
It is now some years ago that the wonderful Ethan Marcotte coined the term “responsive web design“, or RWD, via his article on A List Apart in 2010. Though there have been great developments with more tools and debates in different approaches – this article is still the perfect introduction to the topic :)
read ‘Responsive Web Design’ | view final demo
The subject continues to be studied, debated and new methods and practices are emerging and continue to evolve.
Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”Ethan Marcotte “Responsive Web Design” hat tip: John Allsopp “A Dao of Web Design”
A few weeks ago, I pointed you to one of Andy's excellent Inspired Design Decisions articles - hope you enjoyed it :) Here are a few more which I'd highly recommend — so much to learn! :)
Bea Feitler, An Unstoppable Creative Force
Most fitting to our topic today is this design exploration - as shown on SmashingMagazine:
Fortunately, browsers have come a very long way :) You're lucky to begin your journey into web work at a time when you do not need any specific tools to test your responsive designs with. Our browsers now have built in dev tools - easy.
If you cannot see these options, check your preferences and enable the developer tools (sometimes found under 'advanced' settings). Get used to the 'Inspect Element' and use the tools for 'responsive design view', some call it 'device toolbar', to check on your RWD.
My advice is to learn those keyboard shortcuts and make them part of your workflow :) Personally, I also like testing my designs in a few other tools - some lend themselves nicely to taking screenshots of the varying layouts for client presentations and the like.
- "Develop responsive web apps 5x faster!"
- by Manoj Vivek | PC / Mac/ Linux
- "... quickly get an indication of how their responsive site will look on the most popular devices."
- by Tama Pugsley and Andy Hovey
- Am I responsive
- "A time saving exercise by @justinavery for RWD Weekly Newsletter"
- by Justin Avery
Welcome your new habit…
… endless resizing :)
Now that you've learnt how websites should adapt to viewport sizes, you will learn a lot more by viewing sites at different sizes and aspect ratios. This will (and should :D) become quite a routine habit which will be (mostly) fun - as well as frustrating at times.
How do you plan for your breakpoints?
Designing for different viewport sizes is a mental hurdle you'll have to overcome at the very start. Aim to think of your designs and layouts as fluid, as something that will change according to screens - and not pages, fixed within a specific browser or device.
No matter what your design, always begin by considering its content, establishing a clear structure and proceeding to markup your pages in a meaningful and semantic manner.
- always start with plain content
- with your HTML in place, start the design with a focus colour and typesetting
- start work on layout by viewing the small screensize, then working your way up to wider viewports
- don't get stuck on fixed ideas of dimensions for layout changes - let the content flow guide your breakpoints
- good starting rule is to use media queries with
min-width- adjusting layout to ever-increasing widths to accommodate the medium-larger viewports (rather than starting with those and then scaling down)
How many breakpoints?
The following links are to pages of my studio's website. Have a look and resize the viewport to check on how many layout adjustments are in place across the different views.
As you view the pages, consider the following questions:
- how many different layouts are displayed? resize the window and check on the number of changes presented across different screen widths.
- what is the common variation in layout? an easy one: to recognise the most common approach to responsive layout from small to medium/larger screens.
- are there any specific changes included? consider all content elements to see how screensize affects their presentation within layout.
This is a beautiful example of how creative you can be with grids, now possible to implement in the browser via CSS grid. In this video, you'll not only learn a few more bits about grid but also how to use the dev tools to view it.
watch on YouTube | view demo
※ Eric Meyer on using <b> elements for styling parts of a Grid: Faux Grid Tracks
In our layout session, we saw an inspired solution to a custom layout, I hope you enjoyed it and that you've checked out Jen Simmons and her work. In her role as developer advocate at Apple she is publishing excellent articles and videos, at the time of writing primarily focusing on new techniques like grid. I’m sure she will not only teach but inspire you :)
A quick reminder to have a look at Jen’s YouTube Channel, Layout Land – short and to-the-point videos looking at design and implementation of grids. If you've not done so already, do check out Jen's Lab too — currently, there are a few broken links as she's updating her site. But the workshop examples page has plenty of learning material.
Responsive web design turns ten.,
A post by Ethan Marcotte on his original article.
Responsive Web Design
Collected articles on Smashing Magazine
- Articles Tagged responsive
Responsive Web Design – How to Make a Website Look Good on Phones and Tablets
Adam Henson for freeCodeCamp
[book, available to read online, or to purchase in various formats]
"Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components."
Website Style Guide Resources
"Together with Anna Debenham, we’ve created an open-source resource dedicated all things style guides and design systems."
This is responsive.
"Patterns and resources for creating responsive web experiences."
implementing given layout
As we did not get to complete this last time - I've planned in plenty of time for us to work through the common layout techniques and discuss their uses. And even better, we'll do this together, mobile first and each given layout will use a specific layout method, giving you an example to refer back to later :)
One of the reasons for this kind of task is to allow you to work from a static image to implement the design and layout as webpage. This is a typical interview/application task for web dev roles and is a useful practice run. For now, I'm not going to give you the links to the actual webpages (yet) - and we'll focus on working together bit by bit.
- work with the given HTML, each layout has its own HTML file!
- make copies of the existing CSS to edit for each of the layout versions + link to relevant HTML
- mobile first CSS with focus on colour, typesetting and spacing
- expand CSS with media queries and add layouts for larger viewports
webpage files (HTML/CSS/JPG)
screenshots of layouts, today's version
screenshots of layouts, for next week
original text + photos
Phase 1 - mobile first layouts
Phase 2 - responsive layouts
videos to watch
Here are some video tutorials which will help you get to grips with layout methods and responsive design. All are by Morten Rand-Hendriksen who dives deep into the topics and will surely teach you lots :)
- Making Sense of the CSS Box Model
An excellent recap if you need it ;) ~ going over the topics David discusses in his explainer on the web standards model.
- Advanced Responsive Layouts with CSS Flexbox
This one is a few years old now, so you won't need to worry about the prefixes and so on anymore :) Still very helpful to learn flexbox.
- CSS: Advanced Layouts with Grid
“...learn how to take full advantage of the new capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive.“
Level up: CSS layout
This one's a perfect winter break challenge ~ it'll confirm what you've learned and allow you to see if you can solve the set tasks, highly recommended!!