Exercise 8: Working Towards Simple Responsive Design
We will use CSS and some javascript to work towards a simple responsive page that is viewable from regular monitor screens down to phone size.
Use Exercise 8 to continue to test out possible page layouts for Project 2. Develop basic content written in Natural Flow that you format from a fixed page, to flexible to maximum width to a simple responsive page.
CSS: Page Layout Utilizing DIVs
Use Divs to break pages up into sections and IDs to define the areas more precisely. Use widths that are defined by specific amounts and then percentages to develop fixed, flexible and responsive pages.
HTML Elements
- #idname {property: value;}
- <div id="x">
CSS: Define media styles
set your media styles for a maximum width, then set width, padding and margin to percentages for your pages to reset or respond to specific device widths.
Design Process
- Create a project folder named "Ex87"
- Name your first page named index.html.
- Save all HTML docs and images in your project folder.
- Review your work in a browser before uploading to my email, view source in FireFox to see HTML errors and correct
- Submit your Ex8 folder with your HTML documents and image folder
If you haven't done this yet: Add Developer Tools to FireFox
- You can add developer tools to your FireFox Browser
- Be sure to include the Outline option - as this allows you to highlight the outline of your Block Level Elements among other items
Exercise Requirements
- There is a minimum of 5 page due for this exercise! All pages must link together.
- CONTENT: Write your content in natural flow (the order that can be read with no formatting and make sense). Format your pages using the steps listed below. Link all pages together.
- Index page: Create content that can break into individual areas including a Banner, Navigation, left and right column and footer. Use this content on all pages. On the index page don't add any formatting - allow the content to be seen in "Natural Flow"
- Page 2: Use the same content you have written for you index page and begin adding formatting to give your page some shape. Add a width to your overall "wrapper" div.
- Page 3: Resave the page as a new name and add more CSS styles. Change up set widths to percentages
- Page 4: Resave the page again as a new name and add a specific max-width to the wrapper div. The inner divs can use the flexible widths.
- Page 5: Resave the page again and write code for specific media widths. Be sure to view the example demos and their code. Work on this until your page will flow easily from a larger size down to a smaller size.