Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
Websites need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario.
This article covers Fundamentals of Responsive Web Design like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from website mock-up to testing.
Rule of Thumb:
Configure the Viewport:
A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying width=device-width, initial-scale=1.
Designing for multiple screen:
Designing web sites to fit multiple resolution screen size is a very important web design principle.Most browsers in mobile devices scale down webpages to make them fit the viewport. Since we want to rearrange stuff with CSS3 media queries instead ,we prevent this by using a simple meta tag that tells the browser to use the device width without any scaling. This is the meta tag that goes in the <head>.
You can use Modernizr to add support for CSS3 in older browsers, and at the same time get HTML5 support and other stuff such as feature detection with media queries and conditional resource loading. Or – to only add support for media queries – you can include this script in the <head>.
Media Queries for Standard Devices:
A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.If you're looking for a comprehensive list of media queries, this repository is a good resource.
Use fluid grids:
Grids provide structure to your website, while using relative units can provide fluidity to that structure. Fluid grids are defined using a maximum width for the design; whereas the grid contained therein, is defined using relative widths and/or heights, instead of pixels. This allows the widths and heights to adjust accordingly in relation to the parent container. In other words, as the size of the screen your website is being viewed on gets smaller or larger, your site will adjust accordingly.Build Responsive forms:
Don’t hide forms on smaller devices anymore. Making a responsive form is essential to meeting mobile user expectations.Optimizing site performance:
Website visitors expect the same type of experience on their mobile device as they do on their computers.So now, not only do you have to think about how a website performs in various computer web browsers, you also have to think about optimizing a website for the many types of mobile devices. This is where responsive web design comes into play. Responsive web design (RWD) involves creating a site that adjusts depending on what type of device is doing the viewing. The text can be scaled down, to offer only the main text and images.
It’s important to note, though, that just because a site has responsive web design and looks good on a certain device, it does not necessarily mean that it will load faster. And just because it loads faster on a mobile device, does not mean a visitor or customer will stay on it longer.
Ways to Optimize Your Website
- Get a dedicated server
- Use a CDN
- Compress images and text
Creating flexible HTML Layout:
I've been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up the use of several hundred pixels of width for users with larger screens. Or, you can optimize for 1024px and just make your 800px visitors horizontal scroll. Anything wider than 1024px is too much for static width sites, in my opinion.I think the best possible scenario is to make a fluid width site that accomodates everyone. Here is what I think would be the "Perfect" fluid width layout:
- Works in all major browsers
- Shrinks to 780px This accommodates users with 800x600 resolution, with no horizontal scroll!
- Grows to 1260px This accommodates users with 1280x768 resolution and everything in between.
- This accommodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.
- Sidebars are of "equal height" to the main content
- Page content is centered for users with even higher resolutions.
EmoticonEmoticon