10 jaw dropping responsive landing pages

Default avatar.
October 26, 2012
10 jaw dropping responsive landing pages.

Responsive’ is the latest movement in web-development – and one that’s needed pretty badly. Every day, the number of devices, platforms and browsers that are used to access the internet grows. And while the majority of users still access the web from traditional platforms, the demand for fluid and adaptive websites is stronger than ever.

Many designers are taking this change to heart and creating some spectacular pieces that thrive in mobile, tablet and desktop environments.

The following sites fuse beauty with responsive web design techniques and really showcase what can be achieved with a little innovation. So grab some popcorn and a notepad, you’re going to want to pay attention.

StephenCaver​.com

When you open this site on your desktop, it’s immediately captivating. The bold, black, justified heading contrasts beautifully with the almost watercolor-like quality of the Mojave Desert background. When this site adapts to mobile size, the change is significant, and the site still looks great.

stephencaver.com

FoodSense​.is

With its wide layout, the clean lines and simple structure this site is a fantastic example of minimalist web design. When viewed on a tablet or mobile it adjusts without compromising on composition or flow.

Foodsense.is

Warface​.co​.uk

The use of color is striking and the innovative placement of the 3D figurines in the foreground of the site really engages the viewer. The site is unique and exciting, and none of the impact is lost on mobile.

Warface

DanielVane​.com

Again here the designer lets his work speak for itself. The landing page is beautiful in its full-sized simplicity and this carries through perfectly onto mobile, leaving one particularly arresting illustration which includes a subtle logo.

danielvane.com

SasquatchFestival​.com

This site is fun and playful and unique amongst the other sites on this list. They forego clean simplicity in order to have fun with color, imagery and icons in a way that still manages to deliver on style. This can be difficult to do in a small space, but the designers of Sasquatch manage effortlessly.

Sasquatch Festival

GravitateDesign​.com

The use of shape in this site stands out immediately. By avoiding the use of borders and content boxes, they have managed to create a site that showcases their work at its best.

Gravitate

VisualSupply​.co

Similarly to Warspace, it’s the imagery that really works for this website. It’s perfectly structured, and looks beautiful on every device.

Visual Supply

StudioMds​.co

Dark colors can sometimes be overlooked in web design, but Studio Mds enhance their content with their bold decision. The layout adjusts to fit a smaller screen size losing nothing but superfluous links.

Studiomds

ForefathersGroup​.com

This site has a great, vintage feel and utilizes texture, imagery and font to create that. It slims down beautifully (but it’s a shame to lose that monkey).

Forefathers

MapBox​.com

The color scheme and use of photos give Mapbox a clean space in which to showcase their product. Again simplicity wins out over complex or fussy design, and that’s precisely why it works well on a smaller screen.

Mapbox

Things to bear in mind as you design

So, now that you’ve looked at some stellar responsive sites you’re probably itching to start designing your own. But before you run off, here are a few things to remember.

Photos

One obstacle for responsive design is how devices display photos. A MacBook Pro with a retina display is going to render an image at a much higher resolution than a mobile phone, which can often create problems. One way to side step this issue is to upload both high and low resolution copies of your photos. Using CSS you can then determine which image is loaded based on the device’s screen resolution. If you’re using stock photos make sure that you splurge for the higher rez option.

Determining breakpoints

Oftentimes responsive designs are built around what are known as break points” — or the resolution at which the layout changes — based primarily on common device screen sizes. The problem with this approach, however, is that it doesn’t take into consideration just how diverse screen sizes really are. There is no universal” size anymore. So, instead of predetermining breakpoints at 360px (mobile), 768px (tablet), and 1024px (desktop) it’s better to let your design speak for itself. Start with a finished layout and then resize your window until the design breaks – make this one of your breakpoints and then continue on. You’ll find that your site flows a lot smoother.

Have you come across a fantastic responsive landing page? Have you designed one yourself? Let us know in the comments.

Luke Clum

Luke Clum is a Seattle based graphic designer. He loves web dev, videography and a great cup of coffee. If he‚Äôs not twiddling on his computer, he‚Äôs most likely out climbing or hiking in the mountains. You can follow him on Twitter @lukeclum

Read Next

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…