Our Top 5 Responsive Web Designs
The world of web design is one that rapidly changes and evolves with every new piece of software, hardware and upgrade installed. Where our favourite sites used to be static, and awkward to manoeuvre, they can now be active, engaging and user-led, with interactive features, buttons and aesthetics to an extremely high standard. Plus, with over 1 billion websites currently active and online, there’s a rather large pool of competition.
So we thought we would narrow the list to down to the best, and most responsive, forms of web design spotted in 2017.
What are Responsive Web Designs?
When a website is functionally responsive, it’s form and features organically convert and adjust to the size of the screen it’s displayed on. This can mean that a long list of menu options is compacted into a single drop down, or ‘menu’ button on a smaller screen, or an image is expanded and re-framed on a larger screen.
To be fully responsive, a site must be compatible with all devices and platforms. It must fit neatly into the dimensions of a phone screen, and grow without pixelation when adapted to a desktop. Though the vast majority of websites in 2017 are unarguably responsive, there are still some unique websites who have gone one step further. These are the sites that have utilised their responsive feature to create some beautiful examples of of favourite responsive website designs.
Also known as The Abnormal Beauty Company, the Deciem site was set up only a couple of years ago, and has been widely viewed as a cult beauty site for scientifically branded skincare and haircare products.Aesthetically, the Deciem website is incredibly appealing, with modern graphics and high resolution photography isolating it as a popular choice for high end bloggers and skincare influencers.
However it’s responsive features are what truly set it apart from other beauty brands, and not only does it re-shape it’s design for smaller screens, it also creates new, additional features for each different screen viewed on.The drop down menu, for example, is adorned with ‘+’ buttons on Windows desktops, which rotate when accessed through Chrome. The animated visuals are also slightly different on smaller, or larger screens, with the cutesy graphics changing gradient and style with each changing dimension.
The site of a unique digital marketing and branding agency, MRY is the marketing mind behind companies such as ELF cosmetics, Adobe and Hulu. With a pop coloured filter veiling the square panels of their content, they rank second place in our Top 5 Responsive Sites list. Smartly converting down to a pocket-sized portrait image on a mobile device, the central image – a purple hue-d photograph with the quote ‘Creating Relevance for the New Consumer’ is adaptable to responsive changes, without losing any of its signature features.
The green slanted embellishment of their header menu buttons is simplified from the big screen to the small, in a standard aqua menu which is both easy to spot and handy to use. But the real standout of responsive design on this site is the automatic colour correction echoing across each resolution and platform. A softer shade on a laptop, a crisp light image on a desktop and a deep, rich coat on a mobile, every user is treated to a modern, vibrant design, no matter what device they prefer.
Dirk Michel reaches third place in our list, with the Danish architect being the only bi-lingual site in our Top 5. The visual-heavy, Scandinavian design of Michel’s site makes it a soothing, immersive experience on desktops and mobiles, with the conversion to mobile making the large natural image of the home page look more like a wallpaper than a website.
Completely simplistic, yet very user-friendly, it’s UX design is almost visceral, and helps to make the overall web design a comforting, informative journey. The organised case studies, quirky and mis-aligned on a larger screen and immaculately positioned on mobile translate well across the variety of resolution sizes, with the images and fonts remaining clear and high quality throughout.
To re-introduce a little tech content into our selection, the wholesome video-game site ‘Animal Crossing’ is number four on our ranking. Colourful and fun, the design of this site is immaculate, and incredibly engaging for users as it reflects the quirky and adorable aesthetic of the game graphics. The large-scale details, such as the green leaves and fun characters, are neatly compacted into a small frame size, and respond almost instantly to match a reduced window. Transformed into a standard drop down menu and vertical list of panels, the visuals remain as interactive and engaging on a mobile screen as on a desktop.
A slightly different finale selection, Computerized Forms is an experimental site attempting to transform pieces of digital poster artwork to respond to on-site music. A fascinating concept, the sites initial source of engagement comes from the scroll function, which physically moves the posters upwards, crashing through the header and scattering the letters across the background. In terms of responsiveness, this feature is perfectly duplicated across smaller and mobile screens, and is perhaps even more engaging and enjoyable when actioned through a phone than a mouse.
Many of the additional features on this site are already in their minimized form, such as the drop down menu, which is contained inside a small grey circle, which fills itself with colour upon being selected. This action is repeated identically on reduced windows, and makes for a really exciting design experience.
The responsive features of a site can be a reflected differently for each individual website. But we believe we’ve found the best of the bunch, and have named them all in our Top 5 Responsive Web Designs.