Mobile Web Design: Understanding Responsive and Adaptive Techniques

1. Module 1 Understanding the Mobile Landscape NM290 Mobile Web Design Responsive Web Design Progressive Enhancement Adaptive Web Design Resources for color palettes Create a document for your color palette Common weaknesses of newbie web designers block versus inline elements Resources for HTML tags and CSS Rules Let’s talk layouts How to use the webpageshells

2. Responsive Web Design • responsive web site will fluidly change and respond to fit any screen or device size • create breakpoints for tablets (768px) and phones (320px) • breakpoint versions of websites have different layouts (remove floats and hide elements), less content, less images, adaptive images • focus on delivering content as text versus images and gadgets • achieved by incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation

3. Graceful Degradation / Progressive Enhancement Progressive Enhancement • layer 1: clean, semantic HTML • layer 2: well coded CSS • layer 3: JavaScript functionality • Module was very brief on these topic. Here are some more reading resources. • Understanding Progressive Enhancement by Aaron Gustafson http://alistapart.com/article/understandingprogressiveenhancement • Progressive Enhancement: What It Is, And How To Use It? By Sam Dwyer http://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/ • Progressive Enhancement: Past, Present, and Future by Nick Pettit http://blog.teamtreehouse.com/progressive-enhancement-past-present-future

4. Adaptive Web Design • Most resources you read will say that Responsive Web Design and Adaptive Web Design are the same, but they are not • Put simply, responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height etc., and only one of these is necessary for the site to adapt to different screens. • Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t respond once they’re initially loaded. • Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths, which are 320, 480, 760, 960, 1200, and 1600px • That doesn’t sound the same at all, does it? • Read this article for the scoop on how these techniques differ. Progressive Enhancement: Past, Present, and Future by Nick Pettit http://blog.teamtreehouse.com/progressive-enhancement-past-present-future

5. Resources for Color Palettes • This website is a great culmination of some of the best resources available for selecting colors to build your own palette: http://www.creativebloq.com/colour/tools-colour-schemes-12121430 • These websites offer loads of pre-selected color palettes • Colour Lovers http://www.colourlovers.com/palettes • Adobe Color CC https://color.adobe.com/explore/newest/ • Color Hex http://www.color-hex.com/color-palettes/ • Color Combos http://www.colorcombos.com/combolibrary.html

6. Create a Document for Your Color Palette • Strongly recommend that you create a Word document that contains a screenshot of your color palette, list of the hexadecimal color codes for each of these main colors, and corresponding snips from w3Schools. • To get lighter and darker hues of your color scheme, paste each of the color codes for the primary colors of your palette, one at a time, into the ‘Or Enter a Color’ box on the w3Schools color picker. Take a snip of the Shades box to the right. http://www.w3schools.com/tags/ref_colorpicker.asp • View the ‘Snow Black Emerald Color Palette.docx’ file provided by your instructor as an example of how to create this document. • Taking the time to do this now will save you LOTS of time and frustration when you start adding color to your webpages.

7. Common Weakness of Newbie Web Designers • Understanding that web page layouts are simply boxes inside boxes inside boxes • block elements versus inline elements • Typing readable, well-documented code • When to use a specific html tag <section>, <article>, <p>, <br>, etc. • When to use an id versus a class • When and how to use the <span> element • How to use CSS to style the page

8. Block versus Inline Elements • blockelement – spreads across the page, filling the entire space of its parent element • inline element – happily sits next to another element • inline elements we use frequently: <a>, <br>, <img>, <span> <button>, <input>, <label>, <select>, <textarea> Comprehensive list of inline elements found on this page: http://www.htmlhelp.com/reference/html40/inline.html

9. Resources for HTML Elements and CSS Rules • w3Schools HTML tutorial http://www.w3schools.com/html/default.asp • w3Schools CSS tutorial http://www.w3schools.com/css/default.asp • CSS Portal, specifically the ‘CSS Generators’ section http://www.cssportal.com/ Crazy cool website to get obtain code quickly. It is cranky about browsers, so if you don’t see the code getting generated dynamically for you when you move the sliders, try another browser. • CSS3 Box Shadow Generator http://www.css3.me/ This one only does box shadows but is still really cool and easy to use. • A couple more generators that are bit more difficult to use http://css3gen.com/ http://enjoycss.com/

10. Resources for HTML Elements and CSS Rules • If you have the funds, I highly recommend these textbooks. They will take you through several years of work before you outgrow them. CSS3: The Missing Manual Third Edition Edition by David Sawyer McFarland ISBN-13: 978-1449325947 HTML and CSS: Design and Build Websites 1st Edition by Jon Duckett ISBN-13: 860-1200464207

11. Let’s Talk Layouts old school = header, footer, and content all appear inside a box, most likely centered, but may be left-justified (the default) www.irs.gov

12. Let’s Talk Layouts old school = header, footer, and content all appear inside a box, most likely centered, but may be left-justified (the default) www.michigan.gov/sos

13. Let’s Talk Layouts old school = header, footer, and content all appear inside a box, most likely centered, but may be left-justified (the default) https://onlineservices.michigan.gov/ExpressSOS

14. Let’s Talk Layouts old school = header, footer, and content all appear inside a box, most likely centered, but may be left-justified (the default) OOPS This is new school if scroll to footer www.broadwaydanceco.com

15. Let’s Talk Layouts new school = header, footer, and/or content have background color or background image that spread across entire page, and content seems to center in the middle between them www.rasmussen.edu

16. Let’s Talk Layouts new school = header, footer, and/or content have background color or background image that spread across entire page, and content seems to center in the middle between them www.ebay.com

17. Let’s Talk Layouts new school = header, footer, and/or content have background color or background image that spread across entire page, and content seems to center in the middle between them www.4rsmokehouse.com

18. Let’s Talk Layouts new school = header, footer, and/or content have background color or background image that spread across entire page, and content seems to center in the middle between them www.paypal.com

19. Let’s Talk Layouts buckets= usually on a homepage, columns that are used to organize and present categories of content found within the website www.whitehouse.gov

20. Let’s Talk Layouts buckets= usually on a homepage, columns that are used to organize and present categories of content found within the website www.telerik.com

21. Let’s Talk Layouts buckets= usually on a homepage, columns that are used to organize and present categories of content found within the website www.mint.com

22. Project Shells html5 shells created for you to choose from: • 1column_newschool.html • 2column_newschool.html • 3column_newschool.html • 1column_3buckets_newschool.html • 1column_oldschool.html • 2column_oldschool.html • 3column_oldschool.html • 1column_3buckets_oldschool.html