Responsivity is the way web is going by for some time right now. Not only that this will not become weaker, it will get much stronger as RWD mature instead. I guess that most of web designers and developers who are in it for little bit longer already have needed skills but there are still people without any rock solid knowledge when it comes to responsive web design. So this little guide or course will give them all they need to handle any obstacle in developing fully responsive pages and sites.
As any course we must have at least some understanding of what is behind the RWD. Responsive web design is an approach which orients design and development primarily to respond to ever-changing environment of the web based on screen size, platform, orientation and behavior of the users. The main parts of successful RWD are flexible grids and layouts, images and use of CSS media queries. How can we recognize well crafted modern pages that uses all of these tools the right way? As user switches between multiple devices like desktop, laptop, iPad or mobile phone, the website should automatically change itself to appropriate resolution, image size and scripting abilities. Simply, the website should have the technology to respond to the preferences of every individual user. This way, we can eliminate the need for a different design and development phase for each and every device on the market.
For a long time web designers and developers were crafting multiple version of pages just to make them look and work good on different devices. This approach is now on the end of its life (hopefully). You now longer need one page for desktop users and another for mobile ones. Now you can create pages that will adjust to any device. But don’t get it wrong. RWD is not just about adjustable screen resolutions and resizable images. It is a whole new way of thinking about design.
When it comes to screens, we want the same or similar experience no matter where we are. The old way was, as mentioned above, to create multiple versions of pages. Try to imagine this approach today. With so many gadgets it would be impossible to serve them all. With focus on flexible nature of responsive web design, we can make all the content of the page adjust to literally any device we want. Gone are times of breaking the site’s layout and too big or too small images. Now all you just use all the powers of fluid grids, images and querries and let it do it’s job.
The big issue of the web design was always the images. I think that every designer faced these problems while working on some project. There are some tips and tricks that help with this.
For example using max-width CSS property on image element:
img {
max-width: 100%;
}
– as always, we have to talk about IE which doesn’t support max-width
Possible solution for this is using just width:
img {
width: 100%;
}
One more thing that is important to consider when we are thinking about images is their size. When we render big image on desktop it’s one thing and probably ok. If we want to use the same image on mobile devices it can has some side effects. one of them is higher bandwith due to downloading the image in default size before it’s re-sized. This might be solved with new stable draft of picture element that was released by W3C couple days ago. With this element, browser will download only assets that are intended for that particular resolution.
Real world example – you use image in multiple sizes and then use them via picture element:
45em)" srcset="large.jpg"> 18em)" srcset="med.jpg">
– depending on the user’s screen size, one of the URLs will be downloaded (on a large desktop will be downloaded only “large.jpg”.
As other solution for responsive images, you can use JavaScript or go in entirely different way and use some of existing server-based services.
It’s up to you how will you deal with images.
More in Pt.2.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
