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

2. Who am I Uwe Kristen I grew up in ze Black Forest Front-end developer since 1997 Boyle Software, Inc. (http://boylesoftware.com)http://boylesoftware.com Clients: NYU, Adobe, American Media Inc., Morgan Stanley, Scholastic Twitter: @FloatNone © 2014 Boyle Software, Inc.

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

4. 1996 – 575px © 2014 Boyle Software, Inc.

5. 1999 – 600px © 2014 Boyle Software, Inc.

6. 2001 – 800px © 2014 Boyle Software, Inc.

7. 2014 – 1024px © 2014 Boyle Software, Inc.

8. 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.

9. Size matters © 2014 Boyle Software, Inc.

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

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

12. DESIGN & FRAMEWORKS © 2014 Boyle Software, Inc.

13. 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.

14. 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.

15. 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.

16. 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.

17. 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?” http://susy.oddbird.net/ © 2014 Boyle Software, Inc.

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

19. CHALLENGES © 2014 Boyle Software, Inc.

20. 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.

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

22. 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: http://httparchive.orghttp://httparchive.org Explicit or let browser decide with img srcset? © 2014 Boyle Software, Inc.

23. Other RWD challenges Explaining the concept of RWD to a client. Tables / Responsive HTML emails. 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.

24. 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 (http://dev.w3.org/csswg/css-flexbox/)http://dev.w3.org/csswg/css-flexbox/ Solved by Flexbox A complete guide to Flexbox HTML Don’t use (most of the time) http://responsiveimages.org Responsive Images: If you’re just changing resolutions, use srcset Accessibility Section 508 checklist: http://webaim.org/standards/508/checklisthttp://webaim.org/standards/508/checklist Tools What works in which browser: http://caniuse.comhttp://caniuse.com Media queries test: MQTestMQTest Responsive Email template: AntwortAntwort Line-length bookmarklet 45-75-characters45-75-characters © 2014 Boyle Software, Inc.