RESPONSIVE WEB DESIGN NYU Webmaster Meetup, October 3 rd, 2014

Who am I Uwe Kristen I grew up in ze Black Forest Front-end developer since 1997 Boyle Software, Inc. ( Clients: NYU, Adobe, American Media Inc., Morgan Stanley, Scholastic © 2014 Boyle Software, Inc.

WHY ON EARTH RWD? © 2014 Boyle Software, Inc.

1996 – 575px © 2014 Boyle Software, Inc.

1999 – 600px © 2014 Boyle Software, Inc.

2001 – 800px © 2014 Boyle Software, Inc.

2014 – 1024px © 2014 Boyle Software, Inc.

Mobile internet 2007: Apple presents the first iPhone. According to CNN, “Americans used smartphone and tablet apps more than PCs to access the Internet (in January 2014) — the first time that has ever happened.” Source: Business2CommunityBusiness2Community © 2014 Boyle Software, Inc.

Size matters © 2014 Boyle Software, Inc.

Fluid layout & media queries Fluid or liquid layouts – relative units instead of pixels. Media queries – control over percentage-based layouts. print {body {font-family: serif;} } and (min-width: 800px) {.column {float: left;} } © 2014 Boyle Software, Inc.

2010: Responsive W. Design is born © 2014 Boyle Software, Inc.

DESIGN & FRAMEWORKS © 2014 Boyle Software, Inc.

Photoshop Question: Graceful Degradation vs. Progressive Enhancement? “Photoshop is the most effective way to show your clients what their website will never look like.” Stephen Hay © 2014 Boyle Software, Inc.

Mobile first PROs: Most people will view your site on a handheld device (designing for desktop = designing for a minority). Mobile first helps to identify what users really need. Content first. CONs: It is the opposite of what we have been doing for the past 20 years. © 2014 Boyle Software, Inc.

Design & Development Design and development can no longer be separated. Designers must understand the impact of their design choices. Developers need to learn about current technology. Wireframes are the manual of a website. © 2014 Boyle Software, Inc.

Frameworks Bootstrap, Foundation, Skeleton PROs: Work on mobile, tablet and desktop. Even in IE. Common terminology within a framework. CONs: All you can eat! Created based on someone else’s needs. HTML often more complex than it needs to be: © 2014 Boyle Software, Inc.

Susy: Anti-framework framework “CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?” © 2014 Boyle Software, Inc.

Organize your CSS well OOCSS: Object-oriented CSS CSS Pre-processors: Sass, LESS Live stylesheet © 2014 Boyle Software, Inc.

CHALLENGES © 2014 Boyle Software, Inc.

Accessibility Responsible web design. Alt text for all images. “Skip nav” link. WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) roles provide information about new structural HTML tags. © 2014 Boyle Software, Inc.

Layout Balancing line length: characters. Vertical stacking order. Flexbox: most recent versions of all browsers. © 2014 Boyle Software, Inc.

Images Average page size of Top 1000 websites is 1.7 MB, of which 1 MB are images. Big download for a small screen! Source: Explicit or let browser decide with img srcset? © 2014 Boyle Software, Inc.

Other RWD challenges Explaining the concept of RWD to a client. Tables / Responsive HTML s. Converting an existing site to be responsive. Testing: how can we test in all the different devices. For most HTML5 or CSS3 features that are not fully supported by all browsers, there is most likely a polyfill. Polyfill: downloadable code which provides facilities that are not built into a web browser. © 2014 Boyle Software, Inc.

Resources RWD Ethan Marcotte: Responsive Web DesignResponsive Web Design RWD weekly newsletter: responsivedesign.isresponsivedesign.is Clarissa Peterson: Learning Responsive Web DesignLearning Responsive Web Design CSS An Introduction To Object Oriented CSS (OOCSS) Sass vs. LESS Flexbox ( Solved by Flexbox A complete guide to Flexbox HTML Don’t use (most of the time) Responsive Images: If you’re just changing resolutions, use srcset Accessibility Section 508 checklist: Tools What works in which browser: Media queries test: MQTestMQTest Responsive template: AntwortAntwort Line-length bookmarklet characters45-75-characters © 2014 Boyle Software, Inc.