You might’ve seen our recent post announcing our new mobile site. We’d like to dive deeper into the design process, and point out the key components we set out to achieve. There were a few clear goals we had in mind while designing & building our mobile site. We chose some of them in order to go beyond what we’ve seen with the usual assortment of mobile sites today.

Seamless & Responsive Design

This phrase has been getting thrown around in website design for mobile devices discussions quite a bit lately, and we know that means the need for keeping focused on what people want becomes more difficult than simply following trends without fully understanding the rationale behind it. To counter that, we found that taking some common conventions head-on would help focus us on making the user experience better than ever.

Initially, we found that the use of something like http://m.hrb-ideas.com is fine & something that people have grown to terms with, but there are still some issues with detecting a mobile site by using a separate web address. For instance, link sharing has a discrepancy from person-to-person due to the device-specific URL rather than simply pointing to the content and adjusting for the visitor when the page is being viewed. It also restricts and isolates the mobile site in a way that we didn’t want to limit. For instance, we had the idea that, by having everything located at a single URL, the site could seamlessly respond to what the user is using/wants in a (hopefully) useful way. As a result, we’ve introduced a new feature on our site where the site automatically switches to the mobile site as soon as the screen is too small to show the full site.

Here’s a video of it in action (running in Google Chrome & sped up 2x for the sake of keeping the demonstration short):

This is especially useful when viewing the site via an iPad as the screen isn’t wide enough to show the full site when held vertically, but it is wide enough if held horizontally. It’s entirely up to the visitor to determine which way works best for them, and the level of control & custom tailoring is something we haven’t seen much of yet. If the mobile site isn’t for you, there’s still a button to switch between the full & mobile site that will remember the preference from that point forward.

Designing for Touch

The use of touch screens changes some fundamental design concepts set with a keyboard & mouse in mind. This is not just due to hardware limitations (e.g. you can’t have stuff happen when hovering over something anymore [a tap is required]), but there are also design decisions that have to be made in order to avoid overlooking the niceties that people have come to expect when using a mobile device. To address this, we reworked our entire navigation to fall in line with modern mobile and touch conventions while streamlining the featured navigation to be tailored to what people would want when using a mobile device. Another important aspect was adding touch gestures where one would expect, and now all of the content cycles/slideshows (e.g. homepage & portfolio) have the ability to be navigated via swipes left & right rather than needing to tap on the left & right buttons.

Details, Details, Details

There are certainly things that many visitors will overlook while using our mobile site. We set out to use CSS layouts, shadows, etc. when possible so they show at full-resolution at all times. In addition to that, some of the primary images on the site were made at 2x resolution so they show at full-resolution on Retina resolution displays (which is not exclusive to Apple devices).

Text was made to be more compact on smaller screens so it’s a more efficient use of space (while still being legible), and text is shown at a larger size on tablets since they have more room and are usually held farther away when reading.

iOS users get the added benefit of complete home screen integration as they can add our site alongside all of the apps on their device. They then get treated to a high-res app icon on their app screen, can visit our site with one tap, and don’t have any of the web browser’s interface taking up room on the screen. It’s really worth checking out.

There’s definitely more to our mobile site than what was highlighted, but this should cover the three primary goals that we set out to achieve while we asked ourselves to “build a mobile app” with us as the client. We’re excited to hear what you think about it, and we would love to hear feedback or any questions you have that we could address in a future article. Most importantly, we hope you enjoy our new mobile site!