Lately we have been doing a lot of work for clients on mobile versions of their websites. This got us looking at our own website and how it currently functions on a mobile device.
Not exactly an optimal experience on a small screen. We wanted to rework the key sections of the site without doing a full, responsive redesign. Something to get us from no mobile site to an interim mobile solution until we have the time to fully redesign the site.
The choice was made to use media queries to selectively show and hide sections of the main pages and reflow the structure side-wide. This approach was beneficial in that it takes advantage of our current site content and structure yet does not require a full redesign.
Media Queries
For this project we chose to go with media queries to serve up this new CSS to create the mobile version of the site. The W3C defines media queries as..
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
What this means is that you can define specific styles for mobile devices with a certain screen width. To learn more about media queries and responsive design, this A List Apart article is very informative.
Grid-less
Since our site was built using a grid system, the first thing we did in our new media query was to overwrite the grid rules. This one step got us 80% of the way there. Since all our content was coded semantically and in order, the site’s content automatically got stacked into a vertical format that fit the smaller screens. This meant that even content we are not focusing on for this refresh will flow much better and fit on a smaller screen.
Hide ‘n Seek
Our next step was to identify sections of the site to selectively hide. Since we wanted to feature the main content of each page, it was decided to hide the top header above the navigation and the sidebar sections. These sections featured information that could be found elsewhere on the site so it was not necessary to have it occupy space where we could show more relevant content to mobile users.
Adapting the Content
Finally, we took our four main sections and reformatted the information to take full advantage of the smaller screen. This include refactoring the navigation, the phone number CTA, footer and the content on each page. We also made sure that the layout worked well in both portrait and landscape orientations.
As mentioned before, this approach worked, not only for our main sections, but also for sections we did not intentionally focus on. Sections of the site like the Projects page now work much better on a smaller screen and were not given any special consideration in this process.
In Conclusion
This approach has worked very well for us. In a short amount of time we were able to go from no mobile site to mobile site. This is definitely a work in progress. In the future we hope to give our site a full redesign to be more responsive to many different screen resolutions. However, as deadlines loom and work needs to be done, this was a great interim solution.
So pull out your smartphone and visit planetargon.com to see our results.