Making a better responsive site

Responsive has become a must-do among the industry, as companies love to see their site resized to fit on any device. But that doesn't always mean you've made a good mobile site. Most of the time it's just another narrower and longer website.

I love to use a mobile site that is especially optimised to mobile, which usually is built as a separate site. However, we still can adapt the layout based on the same HTML from desktops, and utilise smarter solutions with additional techniques to make a better responsive site. To make an effective mobile responsive site, you need to consider the layout, simpler design, reduce the load time, geo-location usage, different content strategy. Think why would a user will be accesing your website using a phone, and then push the content for easier accessibility - make them more prominent.

We just implemented a single page website which doesn't have a backend database, content is written purely in HTML. And the site has a separate mobile version, which was designed to be developed as an adaptive mobile site. Fortunately, we found it’s possible to implement the mobile version based on desktop’s structure with some additional work and toggle partially seperate HTML code. In this case, it’s better than building it as an adaptive site, mainly because it’s easier to maintain the website and revise the content if we do so. It's sort of a compromised solution between adaptive and responsive.

It will make the mobile site better if we implement some additional considerations:

Sticky Header

Weighing if it's worth it to take over user’s mobile's screen all the time? A reasonable sticky header in mobile is 45px-60px, which is the comfortable size for the fingers to tap on. Every pixel on mobile screen is precious. I suggest implementing a “scroll up button” in the corner, as opposed to having a sticky header stuck on the user's mobile device.

Native Device UI

If the website takes over the native UI, it’s not very cool. We can always customise the UI, but make sure it responds natively on devices. They usually look great and have been optimized for the device itself.

Make It Not Scalable 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

It prevents occasionally zooming in by mistake while scrolling or other various gestures, off-canvas menu, popups that stretch the screen. You should not make the user want to zoom in/out on your website anyway. If you you require it though, then enable the Pinch to zoom or add some other gesture functionality, you can try hammer.  

Momentum Scrolling

Momentum scrolling makes scrolling smooth and enjoyable. When the user's finger flicks on the screen, as the page scrolls it keeps going, gradually slowing down as the animation sequence completes. Simply apply the CSS to the elements that you wish to have scrolling on:

  -webkit-overflow-scrolling: touch;

Go Adaptive

If your site have a more complex structure, heavier content, provides specific functionality or you know you will experience difficulties in sharing the same HTML structure, then you should consider making an adaptive site.

With that, we can even make a better mobile site.