Responsive Web Design
•
6 likes•1,566 views
Responsive web design allows sites to adapt to different screen sizes and devices. Key techniques include using flexible layouts with relative units, media queries to apply styles conditionally, responsive images, and grid systems. The viewport meta tag controls scaling. Flexbox and grids help build flexible layout structures. Tables can be made responsive by scrolling or rearranging content for small screens. Mobile-first and content-focused approaches support responsive goals.
Report
Share
Responsive Web Design
- 1. RESPONSIVE WEB DESIGN Created by Vladimir Zhydal
- 2. WHAT? Responsive Web Design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience across a wide range of devices.
- 3. ONE SITE FOR EVERY SCREEN
- 4. WHY? Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come. Jeffrey Veen
- 6. HISTORY 2004 A site layout example that adapts to browser viewport width was first demonstrated by Cameron Adams. 2009 CSS3 media queries were almost ready for prime time. 2010 Ethan Marcotte coined the term responsive web design. 2012 Responsive design was listed as #2 in Top Web Design Trends.
- 7. HOW CAN WE DO RESPONSIVE? viewport media queries flexible images and media adaptive images grids flexbox responsive tables
- 8. VIEWPORT
- 9. VIEWPORT BASICS DEVICE PIXELS AND CSS PIXELS Device pixels give the formal resolution of whichever device you’re working on. At zoom level 100% one CSS pixel is exactly equal to one device pixel. Zooming to 200% makes one CSS pixel grow to four times the size of one device pixels.
- 10. VIEWPORT BASICS THE DESKTOP VIEWPORT The function of the viewport is to constrain the <html> element, which is the uppermost containing block of your site. The <html> element takes 100% of the width of that viewport. The viewport has the width and height of the browser window — on desktop.
- 11. VIEWPORT BASICS THE MOBILE VIEWPORTS The visual viewport is the part of the page that’s currently shown on- screen. The CSS layout, especially percentual widths, are calculated relative to the layout viewport.
- 12. VIEWPORT META TAG A meta viewport tag gives instructions on how to control the page's dimensions and scaling.
- 13. VIEWPORT META TAG HISTORY It was first implemented by Apple for the Safari/iPhone browser, but has since been implemented for most of mobile browsers.
- 14. VIEWPORT META TAG SYNTAX <meta name="viewport" content="width=devicewidth, initialscale=1">
- 15. VIEWPORT META TAG BASICS default width=device-width
- 16. VIEWPORT META TAG PROPERTIES Property Description width Width of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari). height Height of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property. initial- scale (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out
- 17. VIEWPORT META TAG PROPERTIES Property Description minimum- scale (0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari. maximum- scale (0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari. user- scalable (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari.
- 18. CSS @VIEWPORT The @viewport rule consists of the @-keyword followed by a block of property declarations describing the viewport. @viewport { width: 980px; minzoom: 0.25; maxzoom: 5; }
- 19. CSS @VIEWPORT PROPERTIES Property Description width Sets both max and min-width. It's a shorthand descriptor. auto | device-width | length | percentage max-width auto | device-width | length | percentage min-width auto | device-width | length | percentage orientation Lock orientation or leave to auto. auto; // auto | portrait | landscape
- 20. CSS @VIEWPORT PROPERTIES Property Description zoom 'zoom' equates to 'initial-scale' in meta tag. auto | number | percentage max-zoom Largest allowed zoom factor. min-zoom Smallest allowed zoom factor. user-zoom Equates to 'user-scalable' in meta tag. fixed | zoom
- 21. SUMMARY Use a meta viewport tag to control the width and scaling of the browsers viewport. Include width=device-width to match the screen's width in device independent pixels. Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels. Ensure your page is accessible by not disabling user scaling.
- 22. MEDIA QUERIES
- 23. MEDIA QUERIES Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
- 24. SYNTAX A media query consists of a media type and zero or more expressions that check for the conditions of particular media features <link rel="stylesheet" media="screen and (color)" href="ex.css"> @import url("ex.css") screen; @media (minwidth:500px) { … }
- 26. MEDIA TYPES Type Description all Suitable for all devices. braille Intended for braille tactile feedback devices. embossed Intended for paged braille printers. handheld Intended for handheld devices (typically small screen, limited bandwidth). print Intended for paged material and for documents viewed on screen in print preview mode.
- 27. MEDIA TYPES Type Description projection Intended for projected presentations, for example projectors. screen Intended primarily for color computer screens. speech Intended for speech synthesizers. tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
- 28. MEDIA FEATURES Property Description aspect- ratio is defined as the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature. color describes the number of bits per color component of the output device. color- index describes the number of entries in the color lookup table of the output device. device- aspect- ratio is defined as the ratio of the value of the ‘device-width’ media feature to the value of the ‘device-height’ media feature.
- 29. MEDIA FEATURES Property Description device- height describes the height of the rendering surface of the output device. device- width describes the width of the rendering surface of the output device. grid is used to query whether the output device is grid or bitmap. height describes the height of the targeted display area of the output device.
- 30. MEDIA FEATURES Property Description monochrome describes the number of bits per pixel in a monochrome frame buffer. orientation is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. resolution describes the resolution of the output device, i.e. the density of the pixels. scan describes the scanning process of "tv" output devices. width describes the width of the targeted display area of the output device.
- 32. JS API: MEDIAQUERYLIST matches Boolean whether the query matched or not. media Serialized media query list. addListener Adding event listener to a media query. Listener is invoked when the media query's evaluated result changes. removeListener Removing event listener from a media query.
- 33. SUMMARY Media queries can be used to apply styles based on device characteristics. Use min-width over min-device-width to ensure the broadest experience.
- 38. FLEXIBLE SVG Modern browsers make svg flexible from the box. For old browsers a padding 'workaround' can be used. .svgcontainer { display: inlineblock; position: relative; width: 100%; paddingbottom: 100%; verticalalign: middle; overflow: hidden; } .svgcontent { display: inlineblock; position: absolute; top: 0; left: 0; }
- 39. FLEXIBLE CANVAS If you resize the canvas, the drawn content is always erased. You can either redraw the content after resizing. var previousWidth = window.innerWidth; var resizeCanvas = function(context){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; scale = window.innerWidth/previousWidth; context.scale(scale, scale); drawRectangle(context); }; window.addEventListener('resize', resizeCanvas.bind(null, context), false);
- 40. ADAPTIVE IMAGES
- 41. SRCSET A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use. Getting images to scale efficiently across varying viewport widths and screen resolutions.
- 42. SRCSET WIDTH DESCRIPTOR PIXEL DENSITY DESCRIPTOR <img srcset=" imgs/large.jpg 1920w, imgs/medium.jpg 960w, imgs/small.jpg 480w" src="imgs/medium.jpg" alt="Details."/> <img srcset=" imgs/large.jpg 1x, imgs/medium.jpg 2x, imgs/small.jpg 3x" src="imgs/medium.jpg" alt="Details."/>
- 43. SIZES A list of one or more strings separated by commas indicating a set of source sizes. Source size values specify the intended display size of the image.
- 44. SIZES <img srcset=" imgs/large.jpg 1920w, imgs/medium.jpg 960w, imgs/small.jpg 480w" sizes="(minwidth: 33em) 33em, 100vw" src="imgs/medium.jpg" alt="Details."/> That says: is the viewport wider than 33em? This image will be 33em wide. Otherwise, it’ll be 100vw.
- 45. PICTURE AND ART DIRECTION srcset if you’re lazy, picture if you’re crazy. Mat Marquis
- 46. ART DIRECTION Tailoring image content to fit specific environments. Sometimes this means cropping an image. Other times, it can mean a different image altogether that may have different proportions or may be changed in other ways to communicate more effectively in a layout.
- 49. SOURCE TYPE <picture> <source type="image/svg+xml" srcset="logo.svg" /> <source type="image/webp" srcset="logo.webp" /> <img src="logo.png" alt="RadWolf, Inc." /> </picture> If the browser supports a source’s type, it will send that source’s srcset to the img.
- 50. GRIDS
- 51. GRIDS LIBRARIES Skeleton Neat Simple Grid csswizardry-grids Profound Grid Griddle Extra Strength Responsive Grids Proportional Grids Dead Simple Grid Responsive Grid System ... Most of CSS frameworks contain their own grid systems
- 54. RESPONSIVE GRIDS Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Container width None (auto) 750px 970px 1170px Class prefix .col‐xs‐ .col‐sm‐ .col‐md‐ .col‐lg‐
- 55. FLEXBOX
- 57. FLEXBOX BASICS Flex container Flex items
- 58. FLEXBOX BASICS FLEX CONTAINER display defines a flex container. flex-direction establishes the main-axis. flex-wrap allows the items to wrap. flex-flow is a shorthand flex-direction and flex-wrap properties.
- 59. FLEXBOX BASICS FLEX CONTAINER justify-content defines the alignment along the main axis. align-items defines the default behaviour for how flex items are laid out along the cross axis on the current line. align-content aligns a flex container's lines within when there is extra space in the cross-axis.
- 60. FLEXBOX BASICS FLEX ITEMS order controls the order in which flex items appear in the flex container. flex-grow defines the ability for a flex item to grow if necessary. flex-shrink defines the ability for a flex item to shrink if necessary.
- 61. FLEXBOX BASICS FLEX ITEMS flex-basis defines the default size of an element before the remaining space is distributed. flex is the shorthand for flex-grow, flex-shrink and flex-basis combined. align-self allows the default alignment to be overridden for individual flex items.
- 64. SCROLL TO THE RIGHT DESKTOP MOBILE
- 66. ADVICES
- 67. USE RELATIVE UNITS A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts.
- 68. DON’T USE RELATIVE UNITS Don’t use relative units everywhere. Ask yourself a question: Is this property depending on the viewport width?
- 69. CHOOSE CORRECT BREAKPOINTS Defining breakpoints based on specific devices, products, brand names, or operating systems that are in use today can result in a maintenance nightmare. The content itself should determine how the layout adjusts to its container.
- 70. ‘MOBILE’ FIRST Use the simplest layout as a start point. Forces You to Focus on Core Content and Functionality. In most cases this approach will get less css styles overrides.
- 71. DON’T USE MIN-DEVICE-WIDTH creating queries based on *-device-width; is strongly discouraged.
- 72. DON’T USE ABSOLUTE VALUES FOR DEFINING VIEWPORT
- 73. USE CSS PREPROCESSORS Use CSS preprocessors to define bundles @phone = ~’320px’
- 75. EXTERNAL RESOURCES Responsinator.com displays as numerous devices iOS Simulator if you have a Mac. (After launching Xcode, go into the Xcode menu and chooseOpen Developer Tool > iOS Simulator) Browserstack for cross browser and device testing.
- 76. BROWSER DEVTOOLS Chrome DevTools Device Mode Firefox Responsive Design View
- 77. TEST ON REAL DEVICES Nothing beats holding a device and touching a site. How far do you need to reach to tap something? How well does the device respond?