With 60 percent of all digital traffic coming from mobile and tablet devices,1 a good way to make sure your audience maintains a positive impression of your brand is to develop a responsive website – a specially designed and developed site that appears differently based on the type of device it is viewed on (from desktop computer monitors to mobile phones).
A responsive design allows users on any device to have an optimal viewing experience – including easy reading and navigation with a minimum of resizing, panning, and scrolling. When compared to siloed mobile-only and desktop-only sites, responsive sites allow for a cohesive brand experience across all devices.
These websites should be easily found, shared, quick-to-load, and have an infrastructure that is easy to maintain and build upon.
We’ve recently completed a responsive website for the Hearth, Patio & Barbecue Association for their annual tradeshow, HPBExpo.
The site was developed with a clear separation of content – between Attendee and Exhibitor – and large colorful blocks for other show highlights. The site also scales – a feature paramount to responsive design – so visitors, regardless of device, will recognize it as the official digital home of HPBExpo.
Another key strategy within development was accessing the site’s different user personas. Designing, while keeping the user experience in mind, allowed us to further clarify the sections of content and which areas of the site should be quickly accessible.
Since we’ve recently put the finishing touches on the site’s content, we wanted to share the steps we took to ensure the project’s success.
animated gif course: Mohamed Kerroudj
we studied standard user experience behaviors for mobile phone
The Planning Stage
Any web-related project can become a tremendous hurdle without proper planning; especially when considering the development of a new (custom built) responsive website. Taking into account web-safe fonts, infinite screen sizes for iPhones vs. Android phones, compatibility issues between Safari, IE, and Chrome etc., there are many areas that we addressed prior to design.
Planning upfront for how content will reorganize, menus will condense, and sliders will rotate ensured a smoother development cycle.
We also developed robust wireframes that outlined content, hierarchy, and other elements for every unique page of the site prior to design. The wireframes allowed the team and client to understand what the page would be displaying, which pages required special coding for graphs, tables, etc, and how certain menu functions would behave across devices. They also allowed us to establish consistent design elements carried across each site version.
The biggest component – aside from the design itself – of any website project is the content that will actually be presented. Content – for lack of a better word – is king, and a good portion of our planning dealt with organizing content based on the site’s user needs/personas. For example, accessing the site on a phone, you most likely just need the top level information; so, while all of the site’s content is accessible on the phone version of the site, we hide it behind a non-intrusive/intuitive menu in order to promote a more positive user experience,.
Design Consistent
Our goal with this site was to develop only the highest caliber design solutions that would easily translate to other versions of the site – typically desktop, tablet, and phone.
Menus, subheads, and link static/hover/active states, were important considerations in design development, paying close attention to their behavior in various formats.
The desktop and tablet versions utilize similar elements, but the mobile is pared down – removing large blocks of text, rotating-sliders, or expansive images. In the age of scrolling Facebook News Feeds, responsive websites on mobile devices, and the information they feature must be concise. During this project, we found that the “above the fold” theory (all important information for a website should be restricted to the screen length of the visitor) is a myth, extensive use of mobile devices used to access sites have gotten consumers used to scrolling and hunting.
We actually started with the mobile version of the site first when designing, and built everything off of that solid foundation and strategy. In this way, we were able to remain consist and clearly define/highlight what would be relevant and beneficial for the user experience.
Test, test, and test again
As mentioned previously, there are many variables to consider when developing a responsive website. These differences became immediately known when it came to testing. Our dedicated team blocked and tackled the various browsers, devices, and OS’ that a visitor to the site may be using. In addition, Google Analytics of the current HPBExpo site helped determine the top browsers and formats being used.
Multiple combinations of PC and Internet Browser, Phone and OS, were checked. We utilized a detailed testing document listing every asset a webpage might feature (side nav functionality, font styles (CSS), graphics interacting with text, etc.) and a space for notes, comments, or screenshots.
From the combined testing documents, it allowed us to track the bugs, make version exceptions, and make other pixel/padding adjustments to have the site view exactly as we intended.
Proper planning, superior design, and a keen attention to detail resulted in a successful final project. You can check out the HPBExpo website here
And if you’re interested in a responsive website of your own, well you know who to call.
