DGM2740 Principles of Web Languages
This course was built by Dr. Paul Cheney for the Digital Media Department at UVU
Unit05 Adaptive Navigation
- Implement sucker-fish navigation for desktop
- Implement side navigation for tablet
- Implement option/select navigation for phone navigation (Home Center)
- Implement accordion navigation for phone navigation (News)
- Implement 3 desktop columns.
- Practice using Mondrian Design
- Demonstrate building a responsive page from a wireframe.
In this unit you will be implementing three different kinds of phone navigation as well as vertical and horizontal navigation on a tablet. You will also learn to build sucker-fish menus for the desktop.
Since the release of the iPhone in 2007 and Android OS in 2008 as well and the entrance of the tablet in 2010 there has been an explosion in the number of mobile devices being used to view web sites. When a traditional site is viewed on a phone or tablet, the experience can be frustrating if the site does not adapt to the smaller screen size. This is particularly difficult when using a phone.
In a news story (June 30, 2011) from Nielsen.com they reported that 38% of all phones sold are now smart phones and capable of browsing the Internet.
Consumers are now choosing to purchase mobile devices (phones and tablets) rather than computers (desktop and laptops). As of Feb 2011 the total sales of portable devices surpassed the total sales of computers. As this trend continues, more and more of your website visitors will be using mobile devices to view your website.
Steven Musil of cnet News reported that as of October of 2011 mobile access in the US grew to 7%. He also reported that "the number of U.S. consumers using mobile devices to access the Web grew to more than 116 million, a 19 percent increase in the past year."
In an article on the Adobe Newsletter, Mr. Henderson says that the focus is shifting away from developing native apps to developing mobile sites that provide an excellent experience for users. So what do these trends mean for you as a web designer? It means we design for Mobile, NOW!
In this unit you will learn to make two level navigation that displays for chubby human fingers on phone and tablet as well as drop-down navigation on a desktop where you have a mouse to make choices. Have you ever thought about the fact that touch screen devices lack a :hover state and so we have to design differently for these devices.
All videos listed below are available on Udemy
- Watch Craft-Overview of the finished site
- Watch Craft-Explaination of the HTML artistic columns
- Watch Craft-Markup the Header
- Watch Craft-Markup the wrapper, left and middle divisions
- Watch Craft-Markup for the phone navigation button
- Watch Craft-Add the Google font and body texture
- Watch Craft-Stylize the header
- Watch Craft-Stylize the decorative bar
- Watch Craft-Stylize the phone navigation
- Watch Craft-Stylize the tablet navigation
- Watch Craft-Stylize the desktop navigation
- Watch Craft-Stylize the Mondrian columns
- Watch Craft-Markup the main page content
- Watch Craft-Stylize the page content into columns
- Watch Home-Overview of the finished page
- Watch Home-Code the navigation
- Watch Home-Stylize the phone navigation
- Watch Home-Stylize the tablet navigation
- Watch Home-Stylize th desktop navigation
- Watch Home-Code the page content
- Watch Home-Stylize the page content
- Watch Home-Code and style the social links
- Watch Home-Add the background image
- Watch News-Overview of the finished page
- Watch News-Code the navigation
- Watch News-Style th phone navigation
- Watch News-Code the wrappers
- Watch News-Code the header
- Watch News-Stylize the desktop and tablet navigation
- Watch News-Stylize the header
- Watch News-Code the content
- Watch News-Stylize the content on the phone
- Watch News-Stylize the content on the tablet
- Watch News-Stylize the content on the desktop
- Watch News-Add a background image
- Watch Creating a sticky navigation bar
- View the Drop-down by Astuteo which you can download here
- Read about Sticky Navigation from Hongkiat
- Read about sticky navigation from sticky.com (smoother)
- Read how another web designer handles phone numbers on iPhone
- Checkout ten different ways to handle responsive navigation
- Educate yourself on Peit Mondrian and his geometric design by looking at homes, interior decorating, and his artwork.
- Learn about the new CSS3 Box Model over-ride by Paul Irish
- If you are using the box model over-ride then you will need to modify the width of the .primary-nav li a (line 74) to 100% in the mobilemenu.css. This is a phone nav problem.
You will please submit the answers to these questions in Canvas
- Summarize in 1/2 page what you learned from the Smashing Magazine article you selected. Include the reference to the article.
View an example of a completed craft site
View an example of a completed home center site
View an example of a completed news site
View an example of a page with sticky navigation