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.
Ethan Marcotte - he started it ;P
"Inspired Design Decisions" by Andy Clarke
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.
how many breakpoints?
Welcome your new habit…
… endless resizing :)
Now that you've learnt about 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 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.
Jen Simmons - CSS Grid like you are Jan Tschichold
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.
phases 1 + 2
implementing given layout
As we did not get to 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 :)
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.
Once we're done, I'll update this page with links to the online demos so you can view the code :)
download source files
webpage files (HTML/CSS/JPG) FOLDER:
screenshots of layouts for small viewports FOLDER:
screenshots of layouts for medium-larger viewports FOLDER:
original text + photos 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 CSSS with focus on colour, typesetting and spacing
expand CSS with media queries and add layouts for larger viewports
1. layout for small viewports / portrait orientation
2. responsive layouts for larger viewports / landscape orientation
Just a little reminder of my view of learning web layout: step-by-step and slowly does it :)
This was one of the steeper parts of the journey for me when I started. And if you're finding this difficult, that is normal! Hang in there and persist ~ it won't be as bad as you think in the end :)
My advice would be to tackle these in a way your brain can handle. Start with floats and flexible sizing for starters and understand that method enough to implement your designs. Then venture further. CSS Grid will no doubt become the default as it is very powerful. However, remember that it is often used in combination with other layout methods which also serve as fallbacks ~ hence equally important to learn.