Recently, we were faced with the task of redesigning and developing our own site – Marcus.Ventures. This has been long over-due but due to client commitments, we’ve had to put off fully restructuring and styling the site. Unusually, we found this to be a blessing in disguise, as it has given us a substantial amount of time to consider the content, strategy and approach to the redesign.

We believe in and advocate responsive design, having developed several responsive sites, our design and development process is naturally geared towards a responsive workflow.

A great example of a responsive site we’ve done is 3RDI.net.

Prototyping and getting away from the screen

When we design, we wireframe and prototype vigorously, which allows us to consider the user experience of the mobile user alongside the desktop user. We were able to create our own design patterns and consider how the hierarchy of the content may change based on the constraints of the device.

Overall we allowed ourselves to have a lot of fun and experiment in the making of the new wearejh.com. This is still very much the case. While we are at a point where we felt we could launch the site, we are progressively reviewing and redeveloping sections of the site.

Our approach to development, using LESS and a SMACSS approach to code the site, is broadly similar whether it is a static build or it is responsive.

With our own site, we had the luxury of setting our own constraints. We knew we could set the goals for us to really focus on exploring areas that interested us. Working mobile upward was one of them, but it was also a really good opportunity for the front-end team to work together in tandem. As a small team, we could explore solutions to issues such as images on retina devices, responsive images, the use of SVG, designing with the content outwards, along with tackling how our design has to adapt for different devices.

The benefits

There are several benefits to approaching a site mobile first. By considering the mobile first, we are able to meet mobile user’s requirements on the most basic level because of the constraints of both performance and the landscape of the mobile platform. The mobile user has a device which is not only smaller in terms of real estate, but is also frequently on a lower connection speed or limited data plan. Essentially it forces us to become more focussed and direct with our content, which will produce a quick, concise and relevant mobile experience that is carried over to the tablet and desktop.

All too often, we see desktop sites that have been shoe-horned into a mobile device. The design scales down to fit the mobile device, but users still suffer when they have to scroll downwards for hours on end to find the content they were looking for.

There may be solutions, such as conditionally loading content for smaller devices. However, this functionality can, in some cases, be avoided when the content and design is conceived from the mobile upwards.

So how did we do this for JH?

Ultimately we went back to the drawing board and considered the Informational Architecture and Visual Hierarchy for mobile users. Some of the questions we were faced with include:

• What is most important to the user?
• What do we want to communicate to the mobile user?
• What challenges do we face by adopting this approach?

This was quite a refreshing approach, because it meant we were designing with the content outwards. In essence, the content dictated the layout. When we consider desktop, it can be far too easy to let layout dictate. But by thinking mobile upwards, the informational architecture was really, really important.

Because of the amount of devices covered, this project also required rigorous testing. To do this, we worked using Adobe Edge Inspect and several devices surrounding us at all times.

The outcome

The result was a site that was a pleasure to design and build. We made design decisions based on the mobile experience and worked our way upwards. This creates a fast, concise and coherent mobile experience, which is coherent mobile experience, which is what is most important to mobile users.

In the meantime it means that the site is equally concise and not overcrowded at desktop. We are comfortable with the whitespace on the site, rather than feeling it has to be filled.

We were able to address issues such as SVG images, creating a script to switch between SVG and PNG using modernizr, responsive image solutions and investigate our own solutions, for which I am really proud.

Reading

If you would like more information on the Mobile First approach and Responsive Design, I personally recommend reading Luke W book Mobile First, keeping track of his blog, reading Responsive Web Design by Ethan Marcotte, and referring to Brad Frost’s This is Responsive.