Transition to new layout

The transition of webpage content to the new layout is quite easy.

The new page is created from the template, the content is just copied and pasted into the new page. The header, title and header repeat are then edited.

Comparing the new CSS with my original

My original rwd.css has 4 media queries for mobile phones (with a special one for iPhone 4), tables and desktop. These didn't really work that well but they did stop the 200ps menu width overlapping the right column.

I renamed the rcontent columns, rcontent-menu and rcontect-main, as left and main. The .menu class, which is a styled unordered list, has a width of 13% (of the total screen width) and the .left column class 16.66%. As there is only a single media query the use of a 200px menu width does result in an overlap on the iPad in portrait mode. Also the use of 16.66% and 75% results in a more balanced display than making the .left 25%.

Links

• Responsive Design - this has been transitioned
• Setting the Viewport
• Testing page with CSS - rwd_min.css is now semi production

External Sources

• Responsive Web Design - The Viewport - 🔗 - W3C