The recent rise of mobile devices popularity and use had provoked a need of adapting websites for varying screen sizes and browsers. One of the main approaches to this problem is responsive web design.
Responsive websites are those that recognize their environment and adapt to the screen in which are being viewed. That includes the content, if you are showing exactly the same content, only adapted to be comfortably seen on a small screen that forces the viewer to scroll constantly, you are doing it wrong. This approach has its drawbacks too and many aspects such as budget for the project, client, etc. must be taken into account when deciding if it is the right choice for a particular project.
Anyhow, if you think about it, every mobile website must be partially responsive, or at least have a flexible layout so it can adapt to vertical and horizontal view in phones with orientation recognition, and to different screen sizes.
Let’s take a look at a selection of the best responsive design mobile websites you can find around the Internet and analyse what makes their designs great.
A conference about web design and development should obviously have a great website. In this case, we find flexible images and a total change in the site’s structure from one screen size to another. A great work.
The famous food site is one of the best examples of good responsive design you can find nowadays. As the screen gets smaller, the design goes more minimal, making superfluous elements dissapear.
A smooth transition from the big to the small screen. Grey Goose’s website manages to keep the feel of the website through different platforms by using flexible images and parallax scrolling.
Good example of how to cut clutter without affecting the design.
We miss a scalable background image, but apart from that this site looks fantastic on mobile devices. It manages to show the same content on every size without giving the sensation of a too long website on mobile devices.
The transition from the biggest size of this site to the smallest screen is so good, it is hard to tell that you are seeing a responsive design instead of an adapted mobile website.
Having a simple and clean layout perfectly structured is a highly useful tool when adapting a design for different screen sizes. Visual Supply’s website looks beautiful on every device.
Even a design that looks crowded and complicated can be perfectly fitted on small screens through responsive design.
While it is true that typographic websites are easier to adapt than image-heavy ones, you can do an acceptable work or something outstanding, this is the last case.
An easy alternative for small screens is, like in this case, to leave the pictures out and just show texts.