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:
developer tools
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.
- Responsively
- "Develop responsive web apps 5x faster!"
- by Manoj Vivek | PC / Mac/ Linux
- Responsinator
- "... 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
- Resizer
- "An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet."
- by Google
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.
tips
- 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
Last week 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 Designer Advocate at Mozilla 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.
useful reading
-
Responsive web design turns ten.,
A post by Ethan Marcotte on his original article. -
Responsive Web Design Is…
Responsivedesign.is is a side project of Justin Avery & Simple Things -
Responsive Web Design
Collected articles on Smashing Magazine - Articles Tagged responsive
CSS Tricks -
Responsive Web Design – How to Make a Website Look Good on Phones and Tablets
Adam Henson for freeCodeCamp
Brad Frost
-
Atomic Design
[book, available to read online, or to purchase in various formats] -
pattern lab
"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 week - 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 :)
The exercise
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.
Steps:
- 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
Source files:
- FOLDER:
10-principles
webpage files (HTML/CSS/JPG) - FOLDER:
layouts(phase1)
screenshots of layouts, today's version - FOLDER:
layouts(phase2)
screenshots of layouts, for next week - FOLDER:
srcs
original text + photos
Phase 1 - mobile first layouts
/layout-01-phase1.png)
/layout-02-phase1.png)
/layout-03-phase1.png)
Phase 2 - responsive layouts
