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 Module 1 Understanding the Mobile Landscape

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, rule, and fluid grids that use percentages to create a flexible foundation

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 Progressive Enhancement: What It Is, And How To Use It? By Sam Dwyer and-how-to-use-it/ Progressive Enhancement: Past, Present, and Future by Nick Pettit

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 present-future

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: These websites offer loads of pre-selected color palettes Colour Lovers Adobe Color CC Color Hex Color Combos

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

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,,,, etc. When to use an id versus a class When and how to use the element How to use CSS to style the page

Block versus Inline Elements block element – 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:,,,,,,, Comprehensive list of inline elements found on this page:

Resources for HTML Elements and CSS Rules w3Schools HTML tutorial w3Schools CSS tutorial CSS Portal, specifically the ‘CSS Generators’ section 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 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

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: HTML and CSS: Design and Build Websites 1st Edition by Jon Duckett ISBN-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)

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)

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)

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

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

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

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

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

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

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

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

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