It wasn’t too long ago that I can remember beginning my first responsive web project at Finalsite. Now, as a Senior Designer eight years later, I’ve definitely learned a lot about the process. I spend a lot of my time working with schools of all sizes to help create unique and memorable user experiences that will translate across all screen sizes. 

Naturally, I’ve picked up some useful tips over the eight years that I always try to consider before beginning a new project. 

However, before diving into those tips, we should take a step back to understand why responsive design is so important.

A Seamless Experience Across All Devices

Mobile devices have taken over as the primary way people experience the web, making responsive design more important than ever. Think about it: how much browsing do you actually do every day on your phone versus your desktop? 

Simply put, responsive web design allows your website to respond, or adapt, to various browser sizes, creating an optimal viewing experience regardless of the device you’re using.

But responsive design doesn’t just create a consistent mobile experience. It has affected the way we design for all screens, forcing designers to re-think how their work will be displayed across various platforms and ultimately encouraging simpler layouts and more streamlined experiences.

As your school gears up for its next (or first!) responsive web project with Finalsite, whether it’s a redesign or you’re starting from scratch, consider these tips to help ensure that you end up with an award-winning and responsive design.   

Pay Attention to Your Navigation

Responsive website design has had a huge impact on how companies construct their navigation. In the past, it’s been common practice to just pile links in the top or left menu bar and call it a day. But responsive design has forced designers to consider smaller screen sizes where space is limited, and there’s a greater need to simplify choices. 

We’ve seen designers begin to use icons, in lieu of text, employ in-page links for major call-to-action items, and incorporate dropdown and collapsible menus to get visitors to their destinations. 

If you consider the size of a mobile device, there’s really only enough room for three or four core links. So it’s important to be purposeful about your choices to ensure that your links represent the main places that your visitors want to go. Consider eliminating sidebars or long lists of links in favor of simpler navigation options to avoid distracting users.

Optimize Buttons & Typography 

We’ve all found ourselves struggling to hit just the right link on a web page. Save your visitors frustration and ensure that your buttons are easy to access. Keep in mind that the size and spacing around links can make a huge difference, especially on mobile devices where visitors are looking for quick and easy access to content. 

Color and style of links are also equally important. Your buttons should take on a recognizable shape and stand out from the main content. Consider using a bright accent color for your buttons and a style such as an underline or background color to noticeably identify in-line text as active links.  

Text size is also an important consideration with responsive design. Don’t force your visitors to squint just to read your content. Remember to adjust the font size, line-height, and width across device sizes. Larger font sizes can significantly improve readability, so consider a font size of at least 16px for body copy and scale up or down depending on the design.

Consider a Mobile-First Approach

Keep mobile in your mind throughout the design process. If your navigation, content, and graphics all make sense on a smartphone, they will easily translate to a tablet or desktop experience. However, the same isn’t necessarily true for the reverse. 

A mobile-first approach is one of the pillars of responsive design and it’s also one of the main advantages; a design that has to work on a variety of screen sizes forces designers to pare down content and functionality to only what’s necessary, ultimately improving user experience.

Use Only the Words You Need

On the desktop, there’s plenty of space for text. But this isn’t always a good thing. Another benefit to a mobile-first approach is that it encourages you to write more economically, ensuring that every word has a purpose. 

Keep in mind that less is generally more, and that your visitors will appreciate clear, concise messaging. Consider editing or consolidating large blocks of copy, organize sections into bullet points, accordions or tabs, and intersperse photos and/or videos to help break up the page. 

Plan your Content Organization Before You Design

Your website content is the story that you’re trying to tell to your visitors. It’s important to have a strong sense of how you want to tell and display your story before you begin your design to ensure that you’re communicating the right ideas. 

Think about the core messages that you want your brand to communicate or the “things” that make your school unique. Make a list and see how these ideas relate to or flow from one another. This will help you determine the best way to organize your pages and the most intuitive ways to drive visitors from one section to another. Ideally, your users will experience your website as they would on a guided tour while visiting your school, navigating through each key feature in a purposeful design.

Key Takeaway

The popularity of mobile devices and tablets has truly changed the way we think about user experience. Responsive design has reshaped the landscape, forcing us to consider how designs will translate across all platforms and devices. Ultimately, this has resulted in a more minimalistic approach to web design. In an attempt to create a more streamlined experience, designers have begun to simplify content and layouts that focus visitors on the site’s core messages.

ABOUT THE AUTHOR

As a Senior Designer at Finalsite, Kelly works closely with clients to craft unique and purposeful award-winning design solutions. In her free time, she is usually running after her daughters, spending time with family or upcycling furniture. The beach, running, and coffee are a few of her favorite things.