Best Practices for Responsive Design

When people are scrolling through the internet on their phone, rarely do they say “WOW look at this mobile version of their website, it’s so intuitive and easy to use.” Instead it’s the websites that were not prepared with a mobile version that people will remember because it left them feeling confused. The websites that aren’t talked about for their seamless functionality between different screen sizes are the ones that have mastered the skill of creating a responsive website. When done right, the user isn’t thinking about the placement of images or text, they’re thinking about the content on the page itself. Visitors aren’t even aware of how the image appears on their phone, or the body of text is the perfect size for readability. It becomes solely about the information and content they’re searching for.

Having a responsive website promotes credibility and integrity within a brand. It shows that the website cares about people visiting their site and wants to give them a seamless experience. A lot of people are surfing on the internet, and it’s not always at home. A user could be looking at a website on their phone while waiting in line for a latte. Then getting to the office and checking out the full website on their laptop. Responsive design means meeting people where they’re at. It shows intentionality and consideration for how one would interact with that website in any situation. Having a mobile-optimized website is an essential step to having a brand that is relevant and engaging. A good first impression means that the user is not even thinking about how seamless their experience is, they’re focusing solely on the content. Those great first interactions can happen anywhere, at a coffee shop on a phone or laptop at home. If a website is not mobile optimized, and looks like it came straight out of 2006 then that person waiting in line at a coffee shop is going to move on.

The beauty of responsive design is that before a user even visits the home page, the website sees what size of screen the user has and adjusts the content accordingly. This process is done through media queries built in the code. It sees a user wanting to visit the site and will adjust the flexible pieces that move and scale to fit the screen size. The media query just needs to know what the rules are for adjusting to different devices. The layout, images and typography all need to have clear instructions for the query to adjust the way the website was designed.

The foundation to a responsive website is the layout. It’s about considering how the pieces are going to shift when viewed on different screen sizes. The amount of real estate is smaller on a phone or tablet than a desktop, so the design has to be specific and purposeful. The way users interact with a website changes based on the device. With desktops, it’s easy for users to read from left to right and see the whole site at once. That isn’t the case for mobile. On a phone or tablet, users are looking to scroll from top to bottom and see pieces of information as they go. Knowing how a user will be interacting with a site helps determine the best structure for a responsive website. For some, maybe it’s allowing users to efficiently set up an appointment, for others it’s about having quick access to a contact form. Identifying the main reason for a site and building around that will help create an efficient and purposeful experience.

While people are scrolling top down, access to navigation is the key. On desktops many websites have navigation options listed left to right at the top of the screen (home page, about, contact us etc.). For mobile devices the approach to navigation shouldn’t be the same solution as desktops. On a mobile device, when scrolling top to bottom, it’s easier to have an option that stays in a fixed spot on the screen so at any point a user can stop and move away to another page. A common solution for mobile websites is putting a “hamburger icon” in the top corner that opens a side window with options for other pages they can view. It’s one click and users don’t have to scroll all the way back to the top of the screen to find what they’re looking for.

Another thing to consider is typography. The way people interact with different devices influences the size of the text. People are more likely to move farther away from a screen the larger it gets. That means the font sizes should become larger as the screen size increases. The main goal for typography on a website is to have the user draw their attention to the information the words are conveying and not about the line height or size of font. Structuring a website to use a flexible font size that responds to the size of display and type of device a user might have is important to responsive design. If the site limits to only display text at one specific size regardless of display size, text would very quickly become unreadable or unruly at different display sizes. Instead of using actual numbers, providing a scale allows for flexibility for the website to scale responsively on all kinds of different devices. The overall goal for a good typeface is for people to read effortlessly on the screen.

The same principle of effortlessness applies in images and graphics as well. What people are looking for is clear imagery that doesn’t go off the edge of the screen unnecessarily and a quick load time. In order to build a responsive website, images and graphics need to be small in file size, scale up and down nicely and translate well on any screen.

An advantage to having a website be mobile optimized that there can be specific buttons for actions that couldn’t be made on a desktop or laptop. For instance, a website could have a button on their page that when clicked immediately calls that company’s customer support on the users’ phone. The website could prompt the user’s phone to open a specific app, possibly for scheduling, ordering etc.At first it may seem like planning for mobile users is an obstacle to overcome, but rather there are many inherent opportunities to connect with customers in unique ways. When considering responsive design on the phone, something to consider is forms. Automatically setting different boxes in the form to be set for an alphabetical keyboard or a numerical one cuts down on the amount of clicks a user has to go through. It is important to be cognizant of how a user may be accessing forms, if there are lots of mobile users, then thinking through the structure and length of the form is crucial to make sure they have a positive experience and the correct information is taken.

Having a specific and purposeful call to action is foundational to a great responsive website. Identify what the main goal is for users who visit the site. What it is that the website should prompt them to do when they visit the page. A call to action button could prompt a call, email, open an app, link to a faq page or contact form. Whatever it may be, it’s important to have it in a clear spot for visitors so they can move with ease.

A lot goes into building a site that appears effortless to the user. Keeping the site design minimal, with clean cut graphics and correctly sized text for the proper screen size makes the user experience effortless. The purpose of having responsive websites is to be accessible for people where they do the most browsing. As technology is evolving, more and more people are surfing the web on the go, using mobile devices. Being prepared for that continual shift in how people engage with technology will make for a relevant, engaging website that is up to date and ready for the future.