Transcript NM290 Module 1 Lecture Notesx

NM290 Mobile Web Design
Module 1 Understanding the Mobile Landscape
•
•
•
•
•
•
•
•
•
•
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
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
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-isand-how-to-use-it/
• Progressive Enhancement: Past, Present, and Future by Nick Pettit
http://blog.teamtreehouse.com/progressive-enhancement-past-present-future
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-pastpresent-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:
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
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.
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
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:
<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
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/
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
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
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
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
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
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
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
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
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
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
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
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
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