Responsive design - Progressive Web App Training

Key Takeaways

how do you build websites that work well for all your users no matter what device screen or window size why do we need responsive design well the problem is that on the web one size does not fit all we have different devices browsers and screens you know and even different data requirements and this is a core part of the progressive web app attitude we need to build layouts and content that work for everyone everywhere if your site doesn't adapt to the user's device you break engagement and lose trust now check out these two quotes about responsive design as Liza says you know manage risk focus on content the first thing to remember is that you can make virtually any site usable simply by sizing elements and content correctly now the golden rule for great progressive web app is not to let content overflow horizontally especially on mobiles this sounds basic but you know lots of sites break this rule by styling wide images inputs and other elements with fixed pixel sizes instead use relative measurement units Amram saw percentage and make the most of CSS grid and CSS flex these are both widely supported and by far the best way to build layouts and achieve responsive sizing there are good fall backs as well anyway adding a meta viewport tag will also solve a lot of problems this tells the browser the size of the imaginary or virtual viewport on which it renders a web page without setting the viewport meta tag correctly most browsers scaled down a page to fit a virtual viewport that's 980 pixels wide the best examples I've seen are the ones that we're linking to here the initial scale value sets the zoom default for this page don't set a maximum value that'll make it impossible for users to zoom and that's a big problem for accessibility and one other thing you should be aware of the viewport meta tag will mess up the layout for fixed width sites the meta viewport tag is designed to work with responsive layouts if you use it in a fixed sized layout it will break things until you convert the site to a responsive layout so try document.documentelement clients to see how the viewport meta tag effects the virtual viewport and here's another really simple technique this solves many layout problems you set the preferred size and the maximum size this works with a video and audio as well so you might think that relative sizing would fix everything in fact for a while back in the day some of us thought that relative sizing could solve everything we had liquid layout maybe even text could be relatively sized but turns out relative sizing is not enough simplistic relative sizing like this means that you have content areas that are too big on desktop and too small on mobile and this is why media queries were invented it's a simple concept use different CSS for different sized viewports based on width now that doesn't just mean making the same layout fit every device on a phone you might want a single column layout to column on a tablet three column for desktop and so on you can use media queries to select different layouts and element sizes depending on viewport dimensions here's a single column layout on mobile two column layout on tablet three column layout on desktop so you think about devices and you might think you could get away with this now ask yourself what could go wrong with this approach what about new devices new viewport sizes you know what about changing window sizes on desktop we'll come back to this so is that all there is well no of course not there is a better way remember content is what matters devices keep changing and device viewports are getting bigger and smaller not to mention pixel density pixel shape display quality man so on now don't force your designers and developers to make a change every time a new device appears start the design process with the smallest form factor then add the major breakpoints for the form factors that you work with phone tablets laptops and widescreen devices you can then create minor breakpoints to handle specific changes to elements that don't affect all elements the final detail to keep in mind is to optimize the content for reading now ideally keep the width of your content to 70 to 80 characters wider than that value it makes content harder to read that doesn't mean you stop thinking about devices and device classes you know you might want one column for phones two columns for tablets three columns for desktop or whatever you can find out more about these recommendations on web fundamentals now remember the earlier media queries example in the mobile first world of pwace we need to turn that around make small viewports the default you can see an example here by the way there is no fixed rule about whether or not to include media queries inline or to use a separate file also you might want to consider using m's or REMS for units here but yeah I won't go into that now by the way you can also do responsive layout in JavaScript the code sample here shows a simple way to do conditional content the match media method used here is well supported and there are polyfills but anyway getting back to CSS the calc function is really useful in responsive designs where you want to use a combination of fixed widths and percentages in this example we have two thumbnail images side by side 50% the width of the parent element with a 10 pixel margin between them no matter what the size of the viewport as I said earlier you should also look at CSS grid and CSS flex for layout sizing and margins but now responsive design you know it's about more than just changing sizes and layouts you may also need to manipulate content for example on a phone you might want to make sure important page content is visible when the user arrives at your homepage so you could opt for a hamburger menu for navigation and put banner ads lower on the page also you know if need be you can just get rid of stuff on desktop your users will want full functionality but not on mobile right well no wrong don't guess your users needs based on viewport size don't assume users will want less content or less functionality on phones than desktop say again this is a crucial part of the PWA attitude understand your users don't second-guess them designs should be driven by data so build content layouts and functionality to help users get to what they want as quickly as possible our data shows that every step to get to content loses 20% of users rather than removing content a more sensible option can be to choose different content for images this is called art direction choosing different images or image crops you can see an example of this in our responsive images video you might even want to provide different text for different viewports such as shorter headlines but be careful not to assume mobile users want less content for video the general rule is to choose a smaller resolution for smaller viewports this can result in massive reductions in bite size playback performance and streaming cost the best way to do this is with adaptive streaming - or HLS not just media queries you can find out more about adaptive streaming in the course materials but just to reiterate the key point here is that when you're delivering a video to mobile don't use resolutions larger than required and talking about video content don't forget to caption videos using the track element it's really easy let's take a look at a relatively new technique for creating responsive layouts CSS flex provides flexible sizing and alignment element reordering and better performance than floats CSS flex is well supported and we strongly recommend it easy centering is the holy grail of CSS take a look at the code here it's an incredibly simple and yeah I still find that slightly thrilling anyway by the way the materials that accompany this video have links to lots of flex examples including the ones shown here so let's look at the CSS for the example this uses CSS flex for three different layouts depending on the viewport width let's start with the defaults for smaller viewports remember mobile first the container is declared to use CSS flex the Flex flow property means child elements can wrap rather than all being squashed onto the same line you can also use inline flex it's shorthand for flex direction and flex wrap properties the default is Rho no rap 100% width for each div in the container add a different layout for a slightly larger viewport and differ it again once the width it's 800 pixels the container is now a fixed width and centered horizontally using margins now let's take a look at the example here once again this uses CSS flex for 3 different layouts depending on the viewport width and again let's start with the defaults for smaller viewports for viewports wider than 600 pixels the order has changed on smaller viewports we give child 1 full width but for a slightly larger viewport we can put it next to child to I could go on CSS flex and grid have revolutionised layout and sizing on the web finally two other properties I'd like to draw your attention to justify content how items are packed and aligned items how items are aligned CSS grid is in some ways related to the old grid system concept familiar to graphic designers a page is thought of in terms of lines tracks between lines cells and areas I won't go into the details here but CSS grid is now widely supported and it works really well in combination with CSS flex you'll find more information in the resource for this video the accompanying lab exercises will help you get started with media queries breakpoints flex and grid and you know if you haven't used CSS for a while you'll find that responsive positioning and sizing is much easier than it used to be thanks for watching [Music]