This week, we learned about the principles of designing mobile websites. This part of the project is designed to expose you to the process of porting an existing website to a mobile version. Currently, this is a very, very common task for many businesses. Most of them already have a website and are beginning to feel the pressure of the smartphone industry.

For your site, it was more than likely designed to be view best on a large screen. You are to create a site which is more conducive to being viewed on a small screen (eg 480px by 320px). Follow the directions below closely. To get started, you need to decide on how your layout must be modified to work well on a small screen.

You will need to use fluid CSS layout techniques, as well as the @media query.

You will need at least two instances of the @media query to satisfy smartphone and tablet sized devices, as well as of course a desktop.

If you would like to try to use a Responsive Web Design framework such as W3.CSS or Bootstrap to create a responsive version of your site those frameworks are acceptable and encouraged. Tutorials and demos for both can be found on W3Shcools.com. Here is the tutorial for W3.CSS, and the one for Bootstrap.

Since each project is unique, you must decide on how to best adapt your current layout. You do NOT have to create any more content for your site unless you feel that it is necessary. This part is about optimizing your site for mobile viewing. You will use the content from the previous project and modify the copy to create a mobile site.

Get Started

To get started, you first need to copy your work from Project 6. Work only on this copy! Follow these directions before starting Project 7. They are very important!

http://citwebdev.cscc.edu/~jwilliams385/csci1145/project6/

this is my link I will attach all other work that I have once assigned. The only problem on this needs fixed is the about page is broken.