5 Website Examples of Flexible Design
December 4, 2014, by Sebastian Maier
Websites with flexible layouts fluidly adjust themselves to all displays based on their design. They change both their size and structure depending on the device (desktop, tablet or smartphone) and screen scale.
Why Use Flexible Design?
The number of devices and screen sizes is increasing steadily as is the expectation of users to get the best website view on mobile, desktop, a large monitor or in a smaller window every time.
Responsive design, i.e., adjusting to suit different devices, has become the norm, at least when it comes to creating new websites. With flexible design, responsive design is expanded since the larger number of layouts enable it to have finer gradations and, thus, an even more fluid website view.
The following five websites show the level of refinement and adaptability to which flexible web design can be implemented.
For its classy website, German beauty salon, “Die Liga”, relies on expressive images – and flexible web design. Changing the screen size adjusts not only the scale but even the structure of the page; thus creating the perception of a consistently fluid transition.
American company, Tile, produces plastic chips, which ought to ensure that you never lose anything again. You can attach the chips to objects and locate them via a smartphone app using Bluetooth technology if you can no longer find them.
Tile’s flexible web design is just as innovative as this technology. If you reduce or increase the window size, not just the image ratio but also the font size change.
Another feature is the menu, which behaves like that of a mobile if the screen size is reduced and covers the whole screen in spite of the small scale.
With its website, the New York workshop for digital products named Pemberton lives up to its line of business, especially when it comes to flexible design, which changes dynamically at different levels.
While reducing the size of the window, pictures and text first adjust themselves. If the screen is reduced to a width below 800 pixels, the slider finally becomes a one-pager with an overlay that somewhat darkens the view. The transitions between the levels are probably intended to be emphasized in this way. The menu also disappears behind the popular icon made up of three horizontal lines.
The one pager becomes smaller, and the overlay disappears as from sizes smaller than 480 pixels.
A Japan-oriented marketing campaign of energy drink producer Red Bull is behind akerushimeru.jp. As from a screen width of 770 pixels and below, the play button on the left moves over the video tiles. These tiles continue to become smaller and more numerous when the window is pulled together.
CHEF S, a grocery store that sells its products in combination with healthy and tasty recipes, has not only a clever business idea, but also an innovative and flexible website design.
If you change the scale of the window, the design adapts to it fluidly. The narrower the screen, the closer the elements of the website crowd together.
In which projects do you opt for flexible design? Why do you decide in favor of this, why do you decide against it?