Sunday, March 4, 2012

Designing Pages For Handheld Devices

This week in my Web Design class we designed pages that good be viewed on handheld devices.  Dreamweaver makes this so easy.  Until just recently pages for handheld devices had to be designed completely for them to work.  Now through the Media queries function in Dreamweaver, all that has to be changes are the css files for each device.
This is a link to the original page.

First open up the main css file in Dreamweaver and save it as phone.css.  then save it again as target css.

Open the Multiscreen Preview window and click on Media queries.




Enter the css files you just saved as shown below.







Now you can choose what you want to change in each css file.


























Here the examples of the pages I changed.
iPad

iPhone page


No comments:

Post a Comment