Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESPONSIVE WEB
DESIGN
Created by Vladimir Zhydal
WHAT?
Responsive Web Design (RWD) is an approach to web
design aimed at crafting sites to provide an optimal viewing
exper...
ONE SITE FOR EVERY SCREEN
WHY?
Day by day, the number of devices,
platforms, and browsers that need to work
with your site grows. Responsive web
des...
WEB STATISTICS
HISTORY
2004
A site layout example that adapts to browser viewport
width was first demonstrated by Cameron Adams.
2009
CSS...
HOW CAN WE DO RESPONSIVE?
viewport
media queries
flexible images and media
adaptive images
grids
flexbox
responsive tables
VIEWPORT
VIEWPORT BASICS
DEVICE PIXELS AND CSS PIXELS
Device pixels give the formal resolution of whichever
device you’re working o...
VIEWPORT BASICS
THE DESKTOP VIEWPORT
The function of the viewport is to constrain the <html>
element, which is the uppermo...
VIEWPORT BASICS
THE MOBILE VIEWPORTS
The visual viewport is the part of the
page that’s currently shown on-
screen.
The CS...
VIEWPORT META TAG
A meta viewport tag gives instructions on how to control the
page's dimensions and scaling.
VIEWPORT META TAG HISTORY
It was first implemented by Apple for the Safari/iPhone
browser, but has since been implemented ...
VIEWPORT META TAG SYNTAX
<meta name="viewport" content="width=device­width, initial­scale=1">
VIEWPORT META TAG BASICS
default width=device-width
VIEWPORT META TAG PROPERTIES
Property Description
width Width of the viewport in pixels (or device-width). If width isn’t
...
VIEWPORT META TAG PROPERTIES
Property Description
minimum-
scale
(0 to 10.0) The minimum multiplier the user can “zoom out...
CSS @VIEWPORT
The @viewport rule consists of the @-keyword followed by a
block of property declarations describing the vie...
CSS @VIEWPORT PROPERTIES
Property Description
width Sets both max and min-width. It's a shorthand descriptor.
auto | devic...
CSS @VIEWPORT PROPERTIES
Property Description
zoom 'zoom' equates to 'initial-scale' in meta tag.
auto | number | percenta...
SUMMARY
Use a meta viewport tag to control the width and scaling
of the browsers viewport.
Include width=device-width to m...
MEDIA QUERIES
MEDIA QUERIES
Media queries let the presentation of content be tailored to
a specific range of output devices without havi...
SYNTAX
A media query consists of a media type and zero or
more expressions that check for the conditions of
particular med...
LOGICAL OPERATORS
and
or
not
only
@media (min­width:500px) and (orientation:landscape){ … }
@media (min­width:500px), (max...
MEDIA TYPES
Type Description
all Suitable for all devices.
braille Intended for braille tactile feedback devices.
embossed...
MEDIA TYPES
Type Description
projection Intended for projected presentations, for example
projectors.
screen Intended prim...
MEDIA FEATURES
Property Description
aspect-
ratio
is defined as the ratio of the value of the ‘width’ media
feature to the...
MEDIA FEATURES
Property Description
device-
height
describes the height of the rendering surface of the output
device.
dev...
MEDIA FEATURES
Property Description
monochrome describes the number of bits per pixel in a monochrome
frame buffer.
orient...
JS API
var widthQuery = window.matchMedia("(min­width: 600px)");
if (widthQuery.matches) {
    /* the viewport is at least...
JS API: MEDIAQUERYLIST
matches
Boolean whether the query matched or not.
media
Serialized media query list.
addListener
Ad...
SUMMARY
Media queries can be used to apply styles based on device
characteristics.
Use min-width over min-device-width to ...
FLEXIBLE IMAGES AND
MEDIA
FLEXIBLE IMAGES
img {
    max­width: 100%;
}
FLEXIBLE VIDEO
video {
    max­width: 100%;
}
FLEXIBLE AUDIO
audio {
    width: 100%;
}
FLEXIBLE SVG
Modern browsers make svg flexible from the box. For old
browsers a padding 'workaround' can be used.
.svg­con...
FLEXIBLE CANVAS
If you resize the canvas, the drawn content is always erased.
You can either redraw the content after resi...
ADAPTIVE IMAGES
SRCSET
A list of one or more strings separated by commas
indicating a set of possible image sources for the user
agent to ...
SRCSET
WIDTH DESCRIPTOR PIXEL DENSITY DESCRIPTOR
<img
srcset="
    imgs/large.jpg 1920w,
    imgs/medium.jpg 960w,
    img...
SIZES
A list of one or more strings separated by commas
indicating a set of source sizes.
Source size values specify the i...
SIZES
<img
srcset="
    imgs/large.jpg 1920w,
    imgs/medium.jpg 960w,
    imgs/small.jpg 480w"
sizes="(min­width: 33em) ...
PICTURE AND ART DIRECTION
srcset if you’re lazy, picture if you’re crazy.
Mat Marquis
ART DIRECTION
Tailoring image content to fit specific environments.
Sometimes this means cropping an image.
Other times, i...
PICTURE
<picture>
    <source media="(orientation: landscape)" srcset="landscape.jpg" />
    <img src="portrait.jpg" alt="...
PICTURE
<picture>
    <!­­ 16:9 crop ­­>
    <source
            media="(min­width: 36em)"
            srcset="imgs/large....
SOURCE TYPE
<picture>
    <source type="image/svg+xml" srcset="logo.svg" />
    <source type="image/webp" srcset="logo.web...
GRIDS
GRIDS LIBRARIES
Skeleton
Neat
Simple Grid
csswizardry-grids
Profound Grid
Griddle
Extra Strength Responsive Grids
Proporti...
GRIDS LIBRARIES BASICS
GRIDS LIBRARIES BASICS
.grid {
    margin­right: ­30px;
}
.grid:after {
    display: table;
    clear: both;
    content: ...
RESPONSIVE GRIDS
Extra small
devices
Phones (<768px)
Small
devices
Tablets (≥768px)
Medium
devices
Desktops (≥992px)
Large...
FLEXBOX
FLEXBOX TERMINOLOGY
FLEXBOX BASICS
Flex container
Flex items
FLEXBOX BASICS
FLEX CONTAINER
display
defines a flex container.
flex-direction
establishes the main-axis.
flex-wrap
allows...
FLEXBOX BASICS
FLEX CONTAINER
justify-content
defines the alignment along the main axis.
align-items
defines the default b...
FLEXBOX BASICS
FLEX ITEMS
order
controls the order in which flex items appear in the flex
container.
flex-grow
defines the...
FLEXBOX BASICS
FLEX ITEMS
flex-basis
defines the default size of an element before the
remaining space is distributed.
fle...
RESPONSIVE TABLES
SCALE
DESKTOP MOBILE
SCROLL TO THE RIGHT
DESKTOP MOBILE
CONTENT: ATTR(DATA-CONTENT)
DESKTOP MOBILE
ADVICES
USE RELATIVE UNITS
A key concept behind responsive design is fluidity and
proportionality as opposed to fixed width layout...
DON’T USE RELATIVE UNITS
Don’t use relative units everywhere. Ask yourself a question:
Is this property depending on the v...
CHOOSE CORRECT BREAKPOINTS
Defining breakpoints based on specific devices, products,
brand names, or operating systems tha...
‘MOBILE’ FIRST
Use the simplest layout as a start point.
Forces You to Focus on Core Content and Functionality.
In most ca...
DON’T USE MIN-DEVICE-WIDTH
creating queries based on *-device-width; is strongly
discouraged.
DON’T USE ABSOLUTE VALUES FOR
DEFINING VIEWPORT
USE CSS PREPROCESSORS
Use CSS preprocessors to define bundles
@phone = ~’320px’
PREVIEWING &
TESTING
EXTERNAL RESOURCES
Responsinator.com
displays as numerous devices
iOS Simulator
if you have a Mac. (After launching Xcode,...
BROWSER DEVTOOLS
Chrome
DevTools Device Mode
Firefox
Responsive Design View
TEST ON REAL DEVICES
Nothing beats holding a device and touching a site.
How far do you need to reach to tap something?
Ho...
RESOURCES
https://developer.mozilla.org/en-
US/docs/Web_Development/Mobile/Responsive_design
http://alistapart.com/article...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,097 views

Published on

A Guide To Responsive Web Design (for developers).

Published in: Education
  • There is a useful site for you that will help you to write a perfect and valuable essay and so on. Check out, please ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Web Design

  1. 1. RESPONSIVE WEB DESIGN Created by Vladimir Zhydal
  2. 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. 3. ONE SITE FOR EVERY SCREEN
  4. 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
  5. 5. WEB STATISTICS
  6. 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. 7. HOW CAN WE DO RESPONSIVE? viewport media queries flexible images and media adaptive images grids flexbox responsive tables
  8. 8. VIEWPORT
  9. 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. 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. 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. 12. VIEWPORT META TAG A meta viewport tag gives instructions on how to control the page's dimensions and scaling.
  13. 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. 14. VIEWPORT META TAG SYNTAX <meta name="viewport" content="width=device­width, initial­scale=1">
  15. 15. VIEWPORT META TAG BASICS default width=device-width
  16. 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. 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. 18. CSS @VIEWPORT The @viewport rule consists of the @-keyword followed by a block of property declarations describing the viewport. @viewport {     width: 980px;     min­zoom: 0.25;     max­zoom: 5; }
  19. 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. 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. 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. 22. MEDIA QUERIES
  23. 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. 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 (min­width:500px) { … }
  25. 25. LOGICAL OPERATORS and or not only @media (min­width:500px) and (orientation:landscape){ … } @media (min­width:500px), (max­height:500px){ … } @media not screen and (color){ … } @media only screen and (color){ … }
  26. 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. 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. 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. 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. 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.
  31. 31. JS API var widthQuery = window.matchMedia("(min­width: 600px)"); if (widthQuery.matches) {     /* the viewport is at least 600 pixels wide */ } else {     /* the viewport is less than 600 pixels wide */ }
  32. 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. 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.
  34. 34. FLEXIBLE IMAGES AND MEDIA
  35. 35. FLEXIBLE IMAGES img {     max­width: 100%; }
  36. 36. FLEXIBLE VIDEO video {     max­width: 100%; }
  37. 37. FLEXIBLE AUDIO audio {     width: 100%; }
  38. 38. FLEXIBLE SVG Modern browsers make svg flexible from the box. For old browsers a padding 'workaround' can be used. .svg­container {   display: inline­block;   position: relative;   width: 100%;   padding­bottom: 100%;   vertical­align: middle;   overflow: hidden; } .svg­content {   display: inline­block;   position: absolute;   top: 0;   left: 0; }
  39. 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. 40. ADAPTIVE IMAGES
  41. 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. 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. 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. 44. SIZES <img srcset="     imgs/large.jpg 1920w,     imgs/medium.jpg 960w,     imgs/small.jpg 480w" sizes="(min­width: 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. 45. PICTURE AND ART DIRECTION srcset if you’re lazy, picture if you’re crazy. Mat Marquis
  46. 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.
  47. 47. PICTURE <picture>     <source media="(orientation: landscape)" srcset="landscape.jpg" />     <img src="portrait.jpg" alt="A rad wolf." /> </picture>
  48. 48. PICTURE <picture>     <!­­ 16:9 crop ­­>     <source             media="(min­width: 36em)"             srcset="imgs/large.jpg  1920w,                     imgs/medium.jpg  960w,                     imgs/small.jpg   480w" />     <!­­ square crop ­­>     <source             srcset="imgs/large­square.jpg  822w,                     imgs/medium­square.jpg 640w,                     imgs/small­square.jpg  320w" />     <img             src="imgs/medium.jpg"             alt="Details." /> </picture>
  49. 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. 50. GRIDS
  51. 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
  52. 52. GRIDS LIBRARIES BASICS
  53. 53. GRIDS LIBRARIES BASICS .grid {     margin­right: ­30px; } .grid:after {     display: table;     clear: both;     content: ''; } [class^='grid­col­'] {     float: left;     box­sizing: border­box;     min­height: 1px;     padding­right: 30px; } .grid­col­1­1 {     width: 100%; } .grid­col­2­3, .grid­col­8­12 {     width: 66.66%; } .grid­col­1­2, .grid­col­6­12 {     width: 50%; } .grid­col­1­3, .grid­col­4­12 {     width: 33.33%; } .grid­col­1­4, .grid­col­3­12 {     width: 25%; }
  54. 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. 55. FLEXBOX
  56. 56. FLEXBOX TERMINOLOGY
  57. 57. FLEXBOX BASICS Flex container Flex items
  58. 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. 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. 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. 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.
  62. 62. RESPONSIVE TABLES
  63. 63. SCALE DESKTOP MOBILE
  64. 64. SCROLL TO THE RIGHT DESKTOP MOBILE
  65. 65. CONTENT: ATTR(DATA-CONTENT) DESKTOP MOBILE
  66. 66. ADVICES
  67. 67. USE RELATIVE UNITS A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts.
  68. 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. 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. 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. 71. DON’T USE MIN-DEVICE-WIDTH creating queries based on *-device-width; is strongly discouraged.
  72. 72. DON’T USE ABSOLUTE VALUES FOR DEFINING VIEWPORT
  73. 73. USE CSS PREPROCESSORS Use CSS preprocessors to define bundles @phone = ~’320px’
  74. 74. PREVIEWING & TESTING
  75. 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. 76. BROWSER DEVTOOLS Chrome DevTools Device Mode Firefox Responsive Design View
  77. 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?
  78. 78. RESOURCES https://developer.mozilla.org/en- US/docs/Web_Development/Mobile/Responsive_design http://alistapart.com/article/responsive-images-in-practice https://html.spec.whatwg.org/multipage/embedded- content.html#attr-picture-source-media http://www.quirksmode.org/mobile/viewports.html https://developers.google.com/web/fundamentals/layouts/in hl=en https://developer.mozilla.org/en- US/docs/Mozilla/Mobile/Viewport_meta_tag https://css-tricks.com/snippets/css/a-guide-to-flexbox

×