Lonres Public Site – Responsive

  • Category: Web Design 
  • Completed at: Lonres.com, 2014
  • Responsibilities: Design and Layout
  • Tools: Photoshop, Balsamiq, Bootstrap 3

Whilst we had a relatively new website, we didn’t have a public-facing mobile offering.  This was down to a lack of time available with some large projects stealing the limelight, but when things abated we got a chance to put together some designs for a responsive site.  This involved tweaking the existing layout for larger sizes and then taking a bit of a sledgehammer to it to make it more mobile-friendly.

Largest Size

lonres-largelonres-large

We expanded the grid up to 1170px which gave everything a bit more room to breathe.  It also made a lot of sense, because we could tell from our usage stats that a small but significant proportion of users were running 1920×1200 monitors, so there was no point in sticking with something as narrow as it had been before.  

Middle Size

lonres-mediumlonres-medium

We lost some space here, and the content wasn’t ideal, but it still worked pretty well.   I made some of the font sizes smaller and adjusted the spacing on items to account for the decrease in available area.  It was important to balance the look and feel.

Smaller size

lonres-responsive-smalllonres-responsive-small

Moving down in size meant I had to start chopping away at the content.  First things first though, I had to add mobile-friendly menu and login buttons at the top.  These would be much easier to press than the desktop designs we’d used for larger sizes.  Next, I tried to consolidate the content and simplify anything we didn’t need.  Ditching the screenshots in the carousel saved a lot of space and moving from a four column to a two column layout improved the product features.  Font sizes got larger to make the site easier to read.  

At the bottom, I redesigned the contact area to include just the phone number and a larger contact form. 

Summing up

This seemed like it’d be a fairly easy job.  We already had the design, it just needed amending.  However, it ended up being a bit more difficult because the design wasn’t intended to be responsive in the first place.  If I’d have originally designed knowing that the content would need to adapt, I would have simplified certain areas and increased spacing around elements.  Still, it looks pretty good and maintains the spirit of the original.