With the launch of our new website, we developed a mobile site to go along with it. We thought we would explain here some of our decisions when it came to design and development when putting together our mobile site.
Our Redirect Option
We really didn’t want to force mobile viewers to head over to our mini site. Rather, we wanted to provide our viewers with the option to choose whichever version best suits their needs. Now with the iPad and other larger semi-mobile devices, it would depend on the users view whether they want to view the regular website or the mobile version. With those items in mind, we decided to add a fairly large option below our main home page callout giving people the option to opt into our mini site. Further when on the mobile site, there is always a link at the bottom linking back to the full version of our website.
Other Mobile Statements
There are a couple items that we’re using on our site that don’t really blend well on mobile devices. On our home page, we have the laptop to the right scrolling between some of our featured projects. Utilizing CSS, we can tell the browser to not allow any right and left scrolling as that dynamic is floating off the screen depending on your monitor resolution. However, on a mobile device like the iPhone, it ignores the CSS property and you’re forced to see the entire dynamic area, which in turn, unbalances the website. To fix this issue, we have a simple ‘if else’ statement that says, ‘If the site is viewed on a mobile device, display this. Otherwise, display this.’ We used that technique in other places as well to tighten up our full site when view on a mobile device.
Obvious Links: Quick Call & Email
One of the simplest things that can be added to a mobile site are the quick call or email links. When the call button is clicked on a smart phone, a popup comes up asking if you want to call our number. Similar with the email, when clicked the mobile email client will open up. Both items are very simple ways to increase usability on mobile websites.
Being that the mobile version is mostly going to be view on small handheld devices, we really wanted to simplify the information on our website to suit its platform. Essentially we took the top level navigation of our full website, and added the basics from the content onto the mobile site. This way, we can still provide mobile viewer with quality content and information, as well as super easy ways to contact us.
Mini Blog Decision
When it came to our blog, we still wanted to offer some of our blog entries to our viewers. On the other hand, we didn’t want to overcomplicate our mini site. So we decided to showcase the 5 latest entries from our blog. In doing so, we didn’t want people to be confused as to why there are only 5 blog entries available on our mini site. Our solution was to have a link below the list of blog articles letting people know that if they are interested in browsing all of our blog entries, that they should visit our full website.
This is just a short overview on some of our decisions we made while developing our mobile website. Basically to summarize, we knew that we needed to keep things as simple as possible to increase usability when it came to mobile viewers actually using our site. Further, we wanted to make it very easy for people to get back to the full site if they wanted to. That’s the long and short of it. Open up your browser on your smart phone and check it out for yourself!