1 of 39

Responsive Design

Layout, UI and UX

for all your users

Progressive Web Apps

2 of 39

What is responsive design

Combination of

Fluid grids
Flexible images
Media queries

Progressive Web Apps

3 of 39

Why “responsive design”?

Different users
Different devices
Different data needs

Progressive Web Apps

4 of 39

Progressive Enhancement

HTML

+

CSS

HTML

+

CSS

+

Javascript

If CSS supported

If JavaScript supported

Progressive Web Apps

As well as form factor and accessibility we must take into account device support for our app. The user may have outdated hardware/software that may not support some of our awesome responsive features. We need to make sure we provide a good default experience with a technology or language (such as HTML) that is widely supported, and then conditionally add the features we want based on support for those features.

Remember: The content is the most important part of our app. The goal of progressive enhancement is to preserve the content, so that if something breaks, our content will still be there in our default experience.

On the same note, progressively enhancing our app should not change the core content for different users (unless that's the desired result). The content should be the same for the user regardless of form factor or support for a particular feature. It may affect any styles, layout, responsiveness, performance, etc.

OLD STUFF BELOW (might be useful for the presenter to read before deleting so I'll leave it for now):

We then add CSS to change the style and, if necessary, the layout of our content. This is where we use media queries to change elements of our HTML content and where the layout will change to accommodate different users. The content remains the same… we are giving the same content to all our users

The last enhancement is to add Javascript for interactivity. The content for the site should display whether Javascript is enabled or not. These days it’s hard to accept that people may disable Javascript deliberately but it may happen so we need to take that possibility into account.

Whatever you do to enhance your content you need to be sure that the content remains readable to the user.

5 of 39

Sizing elements matters

Progressive Web Apps

6 of 39

PWA golden rule

Never make users scroll horizontally

Progressive Web Apps

7 of 39

Viewport meta tag

Progressive Web Apps

8 of 39

max-width

img {

max-width: 100%;

}

img.foo {

width: 300px;

}

Progressive Web Apps

9 of 39

Relative sizing is not the (full) solution

One relative-sized layout for all

10%	80%	10%

Too big on desktop, too small on mobile

Progressive Web Apps

10 of 39

Enter media queries

Can use media queries to select layouts

Progressive Web Apps

11 of 39

Media queries example

/* elements in common for phones and tablets */

@media (max-width: 480px) {

/* layout for phones */

}

@media (max-width: 720px) {

/* layout for tablets */

}

Progressive Web Apps

12 of 39

Mobile-first design

Progressive Web Apps

13 of 39

Media Queries: Select layout by device

320, 480px: phone
768px: tablet
992px: laptop
1200px: widescreen

Progressive Web Apps

14 of 39

Revisiting responsive design

One stream of content
Find the best layout for devices and viewport sizes
Manipulate blocks of content for the needs of the layout

Progressive Web Apps

15 of 39

Match breakpoints to content

Start small
Add major breakpoints
Add minor breakpoints if necessary
Optimize for reading: 70–80 characters per line

Progressive Web Apps

16 of 39

Content-based media queries

Understand your users
Understand your target devices
Design content
Use media queries to select layouts

Progressive Web Apps

17 of 39

Mobile first media queries

/* small */

@media (min-width: 480px) {

/* medium */

}

@media (min-width: 720px) {

/* large */

}

Progressive Web Apps

18 of 39

You can also use JavaScript

var min = '(min-width: 25em)';

if (window.matchMedia(min).matches) {

/* include something */

}

Progressive Web Apps

19 of 39

...and don't forget calc()

img.thumb {

margin-right: 10px;

max-width: 400px;

width: calc((100% - 10px) / 2);

}

img.thumb: last-of-type {

margin-right: 0;

}

Progressive Web Apps

20 of 39

Content first

Progressive Web Apps

21 of 39

Manipulating content

Reorder
Reposition
Replace
Remove (last resort)

Progressive Web Apps

(I guess the point here is to make the most important content the most visible and easiest to access. - Nick)

Responsive design is about more than just changing layouts.

Media queries can do more than just change layouts, they also allow designers to manipulate content, depending on the viewport size and device type.

On a phone, you might want to make sure page content is visible when the user goes to your home page — so you might opt for a hamburger menu for navigation, and move ads lower on the page.

As a very last resort we can remove content. However, this is not recommended:

Plan content and functionality carefully.

Don't guess your users needs based on viewport size.

Don't assume users want less content or less functionality on phones than desktop. Remember that we can change the layout for different types of device so we don’t need to remove content for the sake of smaller devices.

Understand your users, don't second guess them. If available use data driven design!

22 of 39

Keep it as simple as possible

Help users get to content

Progressive Web Apps

23 of 39

Content choice

Images, e.g. different crop or different image
Video, e.g. different resolution

Progressive Web Apps

24 of 39

Layout

Progressive Web Apps

25 of 39

The common way...

12-column grid: Bootstrap/MDL/...

Fixed breakpoints and fixed sized per device family
CSS classes set block widths in columns

Pros: easy, well-understood
Cons: data usage, fixed widths

Works poorly on some devices, content

Progressive Web Apps

26 of 39

Resources

Progressive Web Apps

27 of 39

Lab Overview

Set the visual viewport and style the page with CSS
Add breakpoints to your content
Use a grid layout
Use Flexbox

Progressive Web Apps

28 of 39

Extra Credit: Flexbox

Progressive Web Apps

29 of 39

CSS Flexbox

Flexible sizing and alignment
Element reordering
Better performance than floats

Progressive Web Apps

30 of 39

CSS Flexbox: good support

Progressive Web Apps

31 of 39

CSS Flexbox: centering

.container {

display: flex;

height: 300px;

}

.child {

height: 100px;

margin: auto;

width: 100px;

}

Progressive Web Apps

32 of 39

Layouts for different viewports: 1

.container {

display: flex;

flex-flow: row wrap;

}

.child1, .child2, .child3, .child4, .child5 {

width: 100%;

}

Progressive Web Apps

33 of 39

Layouts for different viewports: 2

@media (min-width: 600px) {

.child2, .child3, .child4, .child5 {

width: 50%;

}

Progressive Web Apps

34 of 39

Layouts for different viewports: 3

@media (min-width: 800px) {

.container {

margin-left: auto;

margin-right: auto;

width: 800px;

}

.child1 { width: 60%; }

.child2 { width: 40%; }

.child3, .child4, .child5 { width: 33.33%; }

}

Progressive Web Apps

35 of 39

CSS Flexbox for ordering: 1

.container {

display: flex;

flex-flow: row wrap;

}

.child1, .child2, .child3 {

width: 100%;

}

Progressive Web Apps

36 of 39

CSS Flexbox for ordering: 2

@media (min-width: 600px) {

.child1 {

order: 2;

width: 60%;

}

.child2 {

order: 1;

width: 40%;

}

Progressive Web Apps

37 of 39

CSS Flex: more

flex-direction
justify-content
align-items

Progressive Web Apps

38 of 39

CSS Grid

Oriented to two-dimensional layout
Works with CSS Flexbox
Optimized for UI design
Separation of layout and content

Progressive Web Apps

39 of 39

CSS Grid: get ready

Progressive Web Apps