Process
An over-simplified process you can follow:
Adages to follow
You should try follow these principles:
CSS2 allows you to specify style sheet for specific media type such as screen or print. CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different style sheets.
For example, you can have one style sheet for large displays and a different style sheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
Media Queries for Standard Devices | CSS-Tricks
Other popular plugins and framework used for responsive websites
HTML5 Boilerplate : HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
Bootstrap : Bootstrap is a CSS framework built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
Foundation : Foundation is the most significant competitor to Twitter Bootstrap as the two projects are very similar. Like Bootstrap, Foundation gives you a responsive grid as well as various styled UI elements.
Respond.js : This script enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under.
Learning Resources:
An over-simplified process you can follow:
- Define a simple architectural structure for your website.
- Create your necessary content.
- Cut down that content until you can't remove any more.
- Refine the structure as necessary.
- Load the content into a small (~320px-wide) container using the appropriate HTML elements.
- Refine and style your content.
- Now gradually expand the width of your container until the flow starts to break or the meter is too long. Write media queries to cater for these. i.e. center-aligned content won't work so well at higher resolutions, so switch to left-aligned content when it starts to look bad.
- Sugar-coat the content at greater resolutions by using richer imagery (or optionally adding after effects like animations. (Progressive Enhancement is the keyword here)
- Test your site at a Mobile Device Lab.
Adages to follow
You should try follow these principles:
- Content First - users primarily engage with content.
- Mobile First (Cater for low capabilties first when you start building your site, i.e. low res, poor javascript, poor CSS)
- Progressive Enhancement (Use Javascript in a way that enriches your site, not dictates its use - JavaScript is expensive)
- Set Breakpoints by content flow, not explicit device resolutions. (The web is consumed by a dimensionless platform - defining breakpoints by fixed resolutions is folly)
CSS2 allows you to specify style sheet for specific media type such as screen or print. CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different style sheets.
For example, you can have one style sheet for large displays and a different style sheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
Media Queries for Standard Devices | CSS-Tricks
Other popular plugins and framework used for responsive websites
HTML5 Boilerplate : HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
Bootstrap : Bootstrap is a CSS framework built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
Foundation : Foundation is the most significant competitor to Twitter Bootstrap as the two projects are very similar. Like Bootstrap, Foundation gives you a responsive grid as well as various styled UI elements.
Respond.js : This script enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under.
Learning Resources:
0 comments:
Post a Comment