1 / 24

Responsive Design for the Modern Web

Learn about responsive design, a flexible and device-independent approach to web design that optimizes layout, images, and content for each device. Discover the pros and cons of responsive design, examples of successful implementations, and techniques for achieving responsive design with mobile-first and flexible grid-based layouts.

hardeman
Download Presentation

Responsive Design for the Modern Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Be Where Your Customers Are Responsive Design for the Modern Web Gary Elsbernd April 21, 2016

  2. Just a few years ago…

  3. Today…

  4. growth of MOBILE WEB HAS OUTPACED growth of desktop web 8X Source: Luke Wroblewski, Mobile First presentation, An Event Apart, Minneapolis, 2010 Source: ITU, Mark Lipads, Morgan Stanley Research

  5. MOBILE WEB HAS OVERTAKENthe desktop web

  6. cell phonesas their primary means of accessing the Internet 3in10 USE Americans Source: http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

  7. Introducing Responsive Design • Responsive design is NOT mobile design. • Responsive design is NOT adaptive design. • It is flexible, device independent design for the web.

  8. What is responsive design? Responsive web design dynamically optimizes the layout, images and even content for each device, based on size and feature thresholds. Responsive design fluidly changes and responds to fit any screen or device. The page responds to not only the device, but the orientation of the device to provide an optimized experience.

  9. Responsive Web Design in a nutshell Pros: • You only need to manage one set of content. • Site updates only have to be applied once, with usually only a short amount of time spent adjusting styles for the different environments. Cons: • A responsive website may only hide elements that are not suitable for viewing in certain environments (mobile, tablet, smart TV etc). All of the markup, JavaScript and content is still downloaded. This means, for example, that download times when browsing over a mobile network can be quite long. • Responsive sites are more of a streamlined version of a desktop site with the same user journey, and does not fundamentally restructure the site for an optimized mobile experience or context.

  10. Do we need RWD? • Do you know from where your users are coming? • Do you know how your users access your site? • Do you understand your analytics?

  11. Examples • Good responsive design • Boston Globe • Change.org • ESPN • Mashable • Non-responsive(but there’s an app for that) • USA Today • Amazon • Ebay • American Airlines

  12. How do we achieve RWD? • Mobile first design, • A flexible, grid-based layout, • Flexible images, • USE A FRAMEWORK

  13. Mobile First Design Graceful Degradation Serve up the best user experience possible, and then scale back as the viewport becomes smaller and the system simpler. Progressive Enhancement Focus on providing a complete user experience on mobile, and then take advantage of the reduced constraints offered by larger platforms. Starting mobile first results in a project that is both super lean and quite impressive. It forces you to trim down the content to its most vital elements. Instead of facing the decision of what to cut and how to compromise your product, you instead get to decide how to make it even more robust! http://www.ferrispark.com/audio/DOCUMENTS/mobile-first.pdf

  14. Flexible, grid-based layout

  15. Bootstrap Grid System There are three major components—containers, rows, and columns. • Containers • Rows • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. Example: <div class="col-md-12"> (Spans full width) <div class="col-md-4"> (Spans 1/3 of full width) Grid can be defined at four device sizes Col-xs- Extra small devices Phones (<768px) Col-sm- Small devices Tablets (≥768px) Col-md- Medium devices Desktops (≥992px) Col-lg- Large devices Desktops (≥1200px)

  16. Keep your breakpoints in mind

  17. Flexible images • Images can be coded so they shrink and grow with the space allotted. OR • Media queries allow you to analyze the target device, and load the images appropriate to the size – smaller screens get lower resolution – saving bandwidth. <imgsrc=“lowRes.r.png” data-fullsrc=“highRes.png”>

  18. Use a framework • Frameworks come with a pre-built design template for typography, forms, buttons, navigation, UI elements, and javascript. • Twitter Bootstrap, Foundation, Pure, Skeleton, Materialize, HTML KickStart

  19. Testing RWD • Resize your browser • Use inspector in Chrome • Check multiple browsers – especially if you support legacy versions of IE

  20. Questions? Gary Elsbernd gary@elsbernd.com

  21. Common Issue - Viewport • Mobile browsers usually emulate desktop view, squeezing huge resolutions into tiny screens. But it's an obstacle to responsive design. You can solve this problem with the viewport meta tag in the <head> section: <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

  22. Fluid Images • What happens when you include fixed-width images into your flexible design? If your image is much wider than its container, the excess content simply overflows, and is visible to the user. If you don’t apply any constraints to the image it is not aware of its flexible environment. But there is a rule that prevents images from exceeding the width of their container: img {max-width: 100%;} • Now the img element will render at whatever size it wants, as long as it's narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image's width to match the width of its container.

More Related