Getting down and dirty with responsive design requires some rethinking of how you design websites. Here are four key things you need to know about on a quasi-technical basis to actually realise your responsive dream.
Read On:
Switching to responsive design
How to SEO your responsive site
Revamp your site for the touchable world
Fluid Grids
The first key idea behind responsive design is the usage of what’s known as a fluid grid. Typically, websites have been designed as a fixed number of pixels wide and centred. The rise of mobile has seen more people look at ‘liquid layouts’ that expand around this centre point.
However, the vast number of device types out there – and those yet to come – means that you have to be even more flexible. Hence Fluid Grids.
A fluid grid is carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.
In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop.
With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page.
For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide.
If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element.
Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down.
For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.
Media Queries
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles.
Right now, you should primarily be interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify.
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths We recommend targeting are as follows:
• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px
Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts.
From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on.
In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.
Image size and quality is important
A poor image will not look good at any size. The quality of images is much more important than the number of images. Almost as important as image quality is load time. This is especially important when thinking about mobile users, who typically have more limited bandwidth.
Strike a balance between quality and load time. Make sure to optimize images for the web; avoid loading full size images and scaling them using CSS width and height properties. It is best to crop images before uploading and save every photo at the smallest possible size that maintains visual quality.
When it comes to using images in a responsive layout, there are several options: use a limited number of images, limit images in mobile-sized frameworks, use multiple versions and file sizes, or allow images to hide in mobile environments.
Any of these options can work well, although some developers avoid hiding images since users must still load these images even though they are unseen.
Responsive design will evolve
Responsive design as it exists now is not a perfect solution; it is just part of an evolving process. As technology and user habits change and new devices hit the market, practices for how the web is used and developed will adjust.
Web users are already using a variety of devices to view most websites. Right now there are just too many devices and too many options to create a site that is perfect on every one. Not considering browser sizes, eight of the most popular devices have six different horizontal widths:
• iPhone 4S and iPhone 5 – 640 pixels
• iPad first and second generation – 1024 pixels
• iPad3 – 2048 pixels
• Samsung Galaxy Note – 1280 pixels
• Microsoft Surface – 1366 pixels
• Google Nexus 7 – 2560 pixels
When you make your site responsive, it will be even more intuitive and it will provide a consistent experience regardless of the device, even as new devices are released.
Different devices can still provide very different experiences even without responsive design (clicking versus tapping or zooming versus scaling, for instance).
Even the amount of time spent on a site or the reason for visiting may differ depending on what type of device the user has.
Consider how users will actually use a site on varying devices. While it is not a perfect solution yet, responsive design will continue to develop and enable you to move in this direction.
Despite any current limitations in responsive design, it is important to start now. The data indicates that the numbers of users accessing the web on something other than a desktop computer will continue to grow.
By implementing a responsive design now, you can position your site to be usable in any environment.
Speak Your Mind