Blog

Scrolling elements of site design are a major trend for 2014. So is browsing via mobile. You might not think that those two things should go together - - after all, scrolling on many mobile devices can be slow and clumsy, and the small text size can make scrolling a challenge. However, it seems to be the solution many have found for displaying on a small screen, their site's content in a legible and organized way. With mobile browsers constantly improving and more and more users wanting mobile sites to be memorable (not just usable), you need to embrace this growing trend.

Let's start laying the ground-work for some general rules you should keep in mind. 

 Re-Learn what "navigability" means on a mobile

This is one place where common sense needs to be king. If you've been building websites for some time, chances are you have not thought of navigability in a long time. By now, you'd hope, you have learned the basics and apply them without a second thought. However, we have all seen sites that may be beautiful and usable on a large screen, become a mess on a small mobile screen. For example, it is very difficult to make a text-heavy website work for mobile. In contrast, the visual nature of portfolio and creative agency sites allows them to work well in a scrolling format. Special attention needs to be given to the images chosen as these need to be devoid of small intricate details that can be difficult to discern on a small screen.

Make it clear, simple, and intuitive

It's also important to make sure the visitor realizes he or she needs to scroll down. Horizontal scrolling on mobile can be difficult and cumbersome, but more important than that, its not what your visitor is expecting. Vertical scrolling is the norm because its simpler and can lend itself well to mobile, but you should still make sure that your users can clearly see how to navigate the page. Wit Creative takes an obviously tongue-in-cheek approach. The easy-to-read text clarifies exactly how to scroll. But, you don't have to be so literal. Grind has a static navigation bar on the site that allows you to jump to a page or highlights your current selection if you are scrolling.

NOTE: if possible, please try to see the links in the article from a mobile.

Please mind the clutter

It's also crucial to avoid clutter on a scrolling mobile site. If you are working with a portfolio site, keep text minimal. The opposite is true if you have more text on the page. It should be able to be center stage. Graphics are great, but they need to be used carefully if you want to showcase important text. Jon Brousseau uses a brief tagline on top of his image gallery to introduce his work without leaving users overwhelmed with visual content. If you want an even more streamlined site, you can use color to add visual interest. A deep background can add dramatic contrast without compromising the UX. PARISH uses a deep chocolate for the sides of the screen, a few small sketch-type drawings and much of the text to punch up a basic layout.

Learn from the pro's

It's ok if you are a creative and you like to push boundaries. That's commendable, but don't reinvent the wheel for the sake of creativity, specially when mobile usability and navegability is at stake. Your site's issues are the same large companies have already figured out. We can learn a lot from these companies' websites. They have already spent a great deal of money on their site's mobile usability through countless focus groups and A/B testing and there is value in that. Grab your phone and surf for a good long while and see how your favorite companies have solved the same issues you are facing. For example, the Amazon and the DDB sites have something in common besides the vertical scrolling: they both use horizonal carrousels (easily operated with your thumb) to horitontally scroll between different items.

Things to Avoid for Scrolling on Mobile Sites

While there are few hard-and-fast rules that don't deserve to be bent (at least occasionally) there are a some design ideas that don't make for a great UI on a scrolling mobile site. The biggest issue is simply ease of use. Elaborate graphics like the ones on the Beetle site look great, but they take forever to load on mobile. The same goes for textual elements that aren't legible if they are small. Remember how much smaller the average mobile screen is compared to a desktop or laptop. Sites like Graphic Therapy, whose image-heavy, small-text layout works great on a computer, could be annoyingly difficult to read on mobile. Stick to large, high-contrast fonts with minimal elaboration.

On the subject of load times, please consider your visitor, his or her location, and their mobile bandwidth. Many countries are still waiting for 4G LTE, relying on a shoddy 3G connection at best. 

What has been your experience navigating through sites on your mobile? Can you please share some favorites? Feel free to share your personal opinion and remember that a comment without examples it's simply just words spread out.