ptg16476052468 LESSON 16: Using Responsive Web Design
there are lots of other ways. Here are some ways you can improve the experience of your
site for everyone:
n Think mobile first.
n Write semantic HTML.
n Use HTML5 and CSS3.Use the Best Breakpoints for Your Website, Not for Devices
Focus your breakpoints on where your design starts to fail rather than worrying about
specific devices or widths. It’s also a good idea to strive for as few breakpoints as your
design can handle and not be broken.Be Flexible But Think Small
Web design is a lot more flexible than print design because there’s no way to really con-
trol how your pages will look on every device that views them. But you want to make
sure of the following:
n Your layouts should fit the screen they are on.
n Images should fit the screen, too.
n Video needs to be small so that it downloads quickly.
n Compress everything that you can.
n Don’t use more than two or three external resources (like web fonts).If you keep these best practices in mind, you will create a really great, responsive website.Summary
Responsive web design covers a lot of areas of web design, from designing for mobile
devices through images and optimization and even into how your pages display on vari-
ous devices.
When you’re building a responsive website, first you need to plan your site so that you
know what it’s going to need and what the customers want. Then you can create a layout
and add multiple columns to larger screen devices. Responsive images and videos flex
with the width of the container but are never larger than their source file. And the best
responsive designs try to stay small so that they load quickly no matter who is viewing
them.