Switching from a mobile website to a responsive one

Categories Web Design

This is a guest post by Jozsi – Halcyon Mobile‘s in-house hipster and cutting-edge UX designer.

Our old website was made in 4 days and it did a great job for us for almost a year, but the time has come to take the company to the next level. Following our repositioning and new visual identity, the next step was to translate the new brand into a red-hot, responsive website.

Reasons to change

Our old website was not responsive. We had a separate mobile website that was basically a simplified version and missing some content. We soon realized that this was not the best idea, because a lot of our website traffic came from mobile devices. Hiding information about us from the people interested in what we do can only serve to our disadvantage. We have realized how important it is to provide mobile and desktop users with the same content, since, as Brad Frost also said: “mobile users will do anything and everything desktop users will do, provided it’s presented in a usable way.”

Another drawback of having a different mobile and desktop website is that it requires double effort: when you want to make changes or update information, you need to do it twice, for each of the versions separately.

For these reasons we decided to get responsive. We’ve kept our content short, clean and to the point, putting some of our work in the spotlight, as we think these speak best about who we are. We’ve made it easily browsable and faster.

Design solutions for quick feedback on responsiveness

We have made most of the design in a text editor for two main reasons: First, as I mentioned before, we had to bear in mind the time constraint we were under. After the first couple of wire-frames were made, we jumped into coding and made most of the design decisions along the process. Second, when you design a clean, one-page website like ours, and you want to make it responsive, this solution saves you a lot of time. Instead of making several designs for desktop, tablet and 1-2 mobile devices in Photoshop that can be really time consuming, you can just quickly put together an HMTL mockup and test your ideas by resizing your browser. This approach provides you with a quick feedback on whether your idea works on all resolutions or not.

However, I don’t advise you to do this if you have to build a more complex website with an elaborate IA and more pages! For more complex responsive design you can use Adobe Edge Reflow where you can put together simple design mocks and quickly test their responsiveness.

Regarding the calculations of the different elements, the Foundation responsive framework was of great help to us. There are other responsive frameworks as well that I can recommend you, such as Gridset app  and Gumby framework. These can save you a lot of time at the beginning of the development process.

Layout choice according to the extent of your content

We stuck with the one page website layout for several reasons. One was that this is a good solution if your content is short and straightforward. Second, for touch devices a one page website is by far much easier to navigate, as you only need to scroll down or to the side, as opposed to tapping on a drop-down menu, selecting a menu item and waiting for the new page to load. This can take a while and be a really bad experience with a slow 3G connection.

Thus, one page websites do a great job when you don’t have much content. For more complex ones, with lots of information, I advise you to spend more time on defining your layout and ways to build your content, otherwise users can easily miss important information while browsing through.

Enhancing the user-experience

Making a responsive website is not easy. Sometimes you need to design 2-3 different layouts to cover a number of touch devices (iPhone, Android phones with a bunch of screen resolutions and tablets). However, it is exciting to come up with solutions that provide with the same awesome experience on all devices.

What’s more, you can enhance the user-experience on the mobile devices by adding some extra animation. To ours, for instance, we added the following: when you tap on a member in the Team section, his bio opens and the information slides up to the top. Also, when you close it, it slides back down in the list, taking you back where you previously were. All the sliders on the website are touch enabled, offering users an enhanced experience when browsing our portfolio section.

All in all, we are very happy with the result, as we managed to design a pretty neat responsive website in such a short period of time (18 days). It gives a much better view of who we are, what we do and how we do it. Of course, as any piece of software, it is never “done”, it can always be improved, and we have the ideas for it, but for now here you have the all new Halcyon Mobile website: halcyonmobile.com.

Author bio: Jozsi – Halcyon Mobile‘s in-house hipster and cutting-edge designer – spends most of his time fiddling with innovative user interface and experience designs. You can often catch him painstakingly fine-tuning a website, t-shirt or logo in order to elicit the highest degree of beauty, elegance and purity.

Catalin is the founder of Mostash – a social marketing boutique – and he’s always happy to share his passion for graphic design & social media.

  • It’s a whole new world with such variety in devices. I made sure my blog theme works and formats for both mobile and computer.