Chapter 15 Responsive Web Design
Web Designers
- Create a Mobile and Desktop Web Site - not prudent move to advance app and maintenance down the road is expensive
- Responsive site, responsive to the device view it, in general implement only vertical scrolling, readable on current device
- fluid grid design layout, fluid width is based on device at hand
- grid 1-4 columns across, linearize a page (image next to text) to image then text
- CSS2/3 media queries, so CSS is applied correctly to the fluid grid layout design
Current RWD
- Flexible media for images and video; HTML5 added meta tag name viewport scales images
- Most books design for Mobile first, then add media queries to take advantage of real estate
better desktop first (use real estate implementing 12 grid approach) and find where design breaks (add hamburger ☰ menu HTML Entity - extended Unicode 🍔 )
- Fluid grid layout incoroporated into Bootstrap, ( fluid grid + HTML 5 + jQueryUI Variant) - Well integated as of DW CC 2015.
- skeleton lighter weight, no jQuery UI variant, will be covered in next chapter.
- Basic RWD Example jsimmons14 (slick carousel)
Creating RWD Page...
- add <meta name="viewport" content="width=device-width"> below <title> tag
Viewport is the browser window
- CSS Media Queries load CSS relative to screen width,
Strategies for Using Media Queries
- Single columns for small devices; float and multiple columns for large devices
- Fluid width; set widths to 80% for desktop; 100% for smart phone
Text book errata authors is using flexible grid, CSS 3 added flex box module, fluid grid is historical name
- Desktop white space increases readbility; smart phone shrink margins and padding
- Desktop smaller text and large font-size headers; smart phone increase overall text size but no large headers
- desktop fancy tabs and/or buttons for navigation, smart phone drop down hamburger menu, finger only links
Can use different JavaScript frameworks for NavBar
- Hide content for smart phone display:none; visibility:hidden;
- Use Smaller background images for smare phone
- Typical breakpoints widths 480, 769, 1024;
Note use browser resolution stats its 1024 and higher
- Desktop or mobile first
I like desktop first, lots or real estate to work with, then add media queries for mobile
Most books mobile first, then add special queries for 769 and 1024
Creating Media Queries in the Web Page <head> block
- A Query is just a question
- <!-- add some link media queries (normally but all code in one css file)-->
<link href="css/small.css" rel="stylesheet" media="screen and (max-width: 480px)" />
<!-- if device is screen return true other devices print, all
if device has max-width up to 480 return true -->
- <link href="css/medium.css" rel="stylesheet" media="screen and (min-width:481px) and (max-width:768px)" />
<!-- min-width:481px if device width is less than 481 return false
max-width:768px if device width is greater than 768px return false -->
- <link href="css/large.css" rel="stylesheet" media="screen and (min-width: 769px)" />
- <link rel="stylesheet" type="text/css" media='only screen and (max-width:480px) and (orientation: portrait), only screen and (max-width:800px) and (orientation: landscape)' href="mobile.css" />
- note recent smart phones (1440x2560) wo we look at device pixel ratio
- @media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width:1920px) { }
Creating Media Queries iside a style sheets
- @import import directive will import a file
- @import url( css/small.css) (max-width:320px);
load small.css for small width browsers
- @import url(css/base.css); /* no media query, applies to all devices */
- @import url(css/medium.css) (min-width:481px) and (max-width:768); /* 481..768 load medium.css*/
- @import url(css/small) (max-width:480px); /* load small.css for 0..480px width browsers */
- @media directive is a container (aka CSS block) that holds CSS rules
- body { background-image: url( "large.jpeg") }
@media (max-width:481px) {
- body { background-image: url( "smaller.jpeg" ); }
- .style { .. }
- } /* end media query block */
Best Practice Where Does Design Break and Smart Phone HDPI
- Major problem HW is ahead of SW, labtops can come across as hi res smart phone,
original CSS3 media query designed for small devices w low resolution; not smart phones with hi res
thye are adding
They are adding media resolution query.
- Site to test dpi and min pixel ratio (also list devices) my moto droid 2 max -webkit-min-device-pixel-ratio 3.0 288dpi, 3.0dppx
-
javascript code
- Active Device:
- My HD1080P Curerent Viewing Device: 1dppx, 2dppx or more is a hi res device, 4K Monitors(2840x2160) come in at $400, desktop seem to have 1dppx.
- Media queries using SaSS mixins.
Fluid Grids
- fluid grid: div width is liquid, aka percentage of the containing block
- Two div blocks: use 33% and 66% for desktop; 95% for smart phone - fluidGrid1.html
- note on grid design you want the most important content listed first
- need to reset * { box-sizing: border-box; } to avoid float drops
- float drops occur when 2nd column cannot fit with first column, e.g. 33%+67% allocates no space for border
- never use pixels as width
- aokay to use percentaages .navBar 18.75%; .content 81.25%
Responsive Images
- img { max-width:100%; } you should never scroll right to view image
- do not use the img height or width attribute, do all formatting using CSS
- for smaller systems use small percentages like 40%
- HTML4 responive meta tag: <meta name="viewport" content="width=device-width" />
- note it is often better to have various sized images: small, medium and large
It is unwise to download a large image and then resize it to smaller.
Photoshop, GIMP, ImageMagick etc have batch processing modes that automatically create muliple image sizes.
Can use adaptive techniques in which JavaScript and/or PHP will resize image before download
Testing Responsive Designs
- Simple to use Web Developer Addon Resize ⇒ View Responsive Layouts
- DW Live View has Gutter, Automatically Lists @media Query locations at top, easy to see when design fails
DW CC 2017 also gives your a QR code for live view testing smart phone (lower right corner document window)
- Chrome is King - Add Responsive Web Design Tester
- Sites for testing on multiple browsers browserstack.com pay and browsershots.org free
browserstack.com/responsive for device testing
- Browser Stats including smart phones: chrome 50%; safari 14%; uc 8% (worldwide), firefox 7%; opera 5% ie 4% (12/2016)
desktop only chrome 50%; ie 20% firefox 13%; safari 4%; edge 4% (edge windows 10 browser)
- Browser Resolution Stats: 31% + 1080p; 17% 1920x1080;; 35% 1366x768, 1280-1024 12%; 4% lower 1024x768 1/2017
Videos and Flash
- /* can use */ iframe, img, video, embed, object { max-width: 100%; }
but most are iframe or sizes set by loading
- embedresponsively.com will responsively embed YouTube or popular sites.