CTN 161 Web Production 2

Hello

These classes are winding up, but they may be offered again

http://www.eventbrite.com/org/39108859?s=1330937

Exercise 18: Creating Optional StyleSheets

We have explored two different reasons to create alternative stylesheets. Choose one of the following below:

• Create a print stylesheet for the page your created for Exercise 3 ( http://enyasi.com/ctn161/?p=44 )
• Create a mobile stylesheet for  for the page your created for Exercise 3 ( http://enyasi.com/ctn161/?p=44 )
• Create a print stylesheet for your portfolio site

<link rel=”stylesheet” media=”print” href=”print.css” />

Some Tips for Creating a Print CSS

• Use appropriate fonts
• Use points for printing rather than pixels
• Hide navigation, sidebars or ads
• Adjust margins
• Remove background colors or images
• Use Page break to separate sections such as comments
• Make sure links can be printed

CSS Design Going to Print
http://www.alistapart.com/articles/goingtoprint/

How to Create a simple css print page for your site
http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/

Visual QuickStart Guide HTML ,XHTML & CSS
Chapter 14: StyleSheets for Printing page 209-214

Mobile Web Design Lecture  (pdf | ppt )

Visual QuickStart Guide HTML ,XHTML & CSS
Chapter 13: StyleSheets for Handhelds Page 199- 208

• W3C Mobile Web Initiative
  http://www.w3.org/Mobile/
• Mobile Web Best Practices
  http://www.w3.org/2007/02/mwbp_flip_cards.html
• Mobile Web Design Trends
  http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
• 5 Minute Mobile Makeover
  http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/
• Make your mobile site friendly
  http://carsonified.com/blog/features/css/make-your-site-mobile-friendly/
• Mobile Web Design Tips and Techniques
  http://www.cameronmoll.com/archives/000577.html

Exercise 17(pdf)

When it comes to web design, footers are one of the most overlooked parts of a web site.  A site user will often not bother to scroll, but if they can’t find something a footer is one of the first places they go.  Don’t waste the opportunity or the space, create a useful footer for your site.

Example 1 |  http://socialsnack.com/

Example 2 |  http://www.starbucks.com/

Example 3 | http://seattletimes.nwsource.com/html/home/index.html

Example 4 |  http://www.cnet.com/

Resources:

Footers in Modern Web Design
http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/

CSS Based Footers: Modern Solutions
http://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/

Informative and Useful Footers in Web Design
http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/

Is your navigation killing your site traffic, confusing your user and sabotaging your goals?  Could your navigation be more effective at guiding people through your site?

Exercise 16

Lecture (pdf)