DGM2740 Principles of Web Languages

This course was built by Dr. Paul Cheney for the Digital Media Department at UVU

Unit05 Adaptive Navigation



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.

History Lesson

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.

Learning Activities

All videos listed below are available on Udemy


Reflection Questions

You will please submit the answers to these questions in Canvas


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