Today’s internet connectivity is faster and more reliable than ever before — even for mobile devices. Visitors expect your site to respond to their needs and screen size. At the same time, because resolutions are higher definition, users expect some unique features in your responsive website.
According to the Pew Research Center, around 81% of Americans own a smartphone. Around half also own a tablet or e-reader device. It’s a given with those numbers that your site should already be responsive, but how can you make it even more interesting to users? Here are six simple design features you can add to your responsive website to grab user interest:
1. Parallax Scrolling
One of the trends for 2019 that looks to continue into 2020 is parallax scrolling. This creates an experience where some images and words linger as others appear. It is more of a cinematic effect than websites have utilized in the past. The parallax reveals keep the user scrolling to see what image appears next, engaging the user along the way. Parallax works on both desktop and small screens.
Andersson Wise architects use parallax scrolling to engage visitors. Images of their beautiful designs are slowly revealed as you scroll down the page, with the hero image lingering in place a bit longer than anything else. The hero image works on mobile devices, but the smaller images only work on the desktop.
2. Bigger CTA Buttons
Your CTA buttons need to work no matter what type of device the person is using. Making your CTA buttons a little larger allows people to click on the feature with a thumb on a smaller screen. You could also design buttons to better adapt to a mobile device. Place them in a location close to where a person naturally holds their fingers and make them expand to match a convenient size that’s easy to click. Your clickable buttons should adapt to different devices and be as useful on a touch screen as a non-touch one.
3. Sticky Nav Bars
Having to endlessly scroll up and down to get to navigation features is quite frustrating to users. Fortunately, sticky navigation bars can solve that problem by keeping choices at the top of the page as the person scrolls down. Navigation is how the user orients themself to your site. It is a directional cue to different areas on your website and arguably one of the most important features available.
TM International places a nav bar at the top that scrolls down the page as the user does. The navigation bar reduces a bit in size as the visitor moves down, still retaining all the pertinent information a customer needs to get from Point A to Point B on the site.
4. White Space
One of the biggest challenges with a responsive design is maintaining the same ratio of padding and white space on a small screen as a larger one. The key is designing so the balance is still readable and uncluttered but benefits the reader as much as possible. You’ll likely need to plan for a minimum of three or four different widths, including desktop, small-screen smartphone, larger-size smartphone and tablet. Be sure to always test your page thoroughly on different devices to see how the design looks as it adapts to the user.
5. Dynamic Hero Sliders
Hero images that take up the majority of the area above the fold and full width of the screen make a powerful statement to the user. They work well on both desktop and mobile devices. You can either set them to rotate automatically or so the user can scroll horizontally or choose not to. If you want to tell a powerful story about who you are as a brand, dynamic hero slideshows are a good choice to do so with pictures and add a few words along the way.
Cabot Cheese Coop does a good job of integrating a slider showcasing ways to serve its various cheeses. It begins with a seasonal cheese Christmas tree and then moves to other recipes such as a cheddar ale soup, fiery jack poutine, and baked mac and cheese. On the desktop version, the full image of the tree is shown first. However, on the mobile version, it starts with a three-way split of images before rotating through the different ones and offering links to recipes.
6. Logo and Branding
One of the challenges with responsive design is keeping the logo large enough to make it recognizable to the user. People are also accustomed to logos being clickable and going through to the home page of a website. This might be challenging on smaller devices. One option is to use a different or text-only logo for your mobile size, but that does mean you lose some of your identity. Try different versions until you find one that doesn’t overwhelm mobile design but still retains the personality of your brand. If at all possible, make it clickable on all device types.
Watch Advances in Tech
Today, nearly everyone has a smartphone and a data plan. You can almost expect a big portion of your traffic to be from mobile. As technology such as artificial intelligence (AI) and augmented reality (AR) grow more and more popular, it will impact web design over time. The screens of tomorrow may be even smaller than we’ve seen to date as smartwatches become more commonplace. For now, pay attention to trends, but be aware of new advances that may necessitate a change in the way you serve up your pages for visitors.
Lexie is a UX content strategist and web designer. She enjoys copious amounts of coffee (with a dash of milk) and walking her goldendoodle. Check out her design blog, Design Roast, and follow her on Twitter @lexieludesigner.