Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportionbased grids, flexible images, and CSS3 media queries.
Trang 1DESIGNING
Trang 2I’m Jon
Trang 5pixel fonts!
Trang 9SO TELL ME
I SHOULD CARE?
Trang 102005
Source: NBC News
Trang 11Source: Cisco Visual Networking Index
IN 2012
GREWGLOBAL MOBILE DATA TRAFFIC
Trang 12Look & Feel
Trang 13THE LOOK & FEEL lookin’ good
Trang 14ONE WEB IT’S NO LONGER
Trang 1602
03
Desktop First
Trang 20Mobile First
01
02
03
Trang 22THE EXPERIENCE feelin’ good
Trang 23Pinch & Zoom
Trang 28Drag
Trang 31THE CONTENT makin’ sense
Trang 35THE TECHNOLOGY what makes it tick?
Trang 36Responsive
Trang 37.container { width: 960px; margin:0 auto; }
@media screen and (max-width: 768px) {
Trang 38Single codebase;
Less expensive and more
efficient to maintain
More code to render;
image resizing may be inadequate
some pros: some cons:
Responsive
Trang 39Dedicated
Trang 40some pros: some cons:
Dedicated
Trang 41RESPONSIVE
VERSUS or
Trang 42THE CASE STUDIES putting it all together
Trang 43BU HOMEPAGE
bu.edu
Trang 48THE BUS
bu.edu/bus
Trang 58bu.edu/bostonia
Trang 64THANK YOU