1 / 22

Mobile Web Design: Understanding Responsive and Adaptive Techniques

Learn about the differences between responsive and adaptive web design, and how to create color palettes, use HTML elements and CSS rules effectively. Explore progressive enhancement and common weaknesses of newbie web designers.

acooper
Download Presentation

Mobile Web Design: Understanding Responsive and Adaptive Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related