As a Senior Systems Analyst at the Art Institute, one of my jobs is to ensure that your web experience is as seamless as possible. Which, unsurprisingly (as you read this on your iPhone), means adapting our website to take into account mobile visitation.
The number of our site visitors on mobile devices is growing. 7.75% of our visitors in February were on mobile devices, up from 3.25% the previous year. These aren’t staggering numbers today, but are inline with global trends which predict mobile browsing will increase 25-fold by 2015. So as mobile visits grow, we need to make the experience of these visitors more accessible. Viewing our current site on a mobile device is a little bewildering, with small text and links that you have to zoom in so far to use that they’re essentially unusable.
That being said, our regular site is being redesigned with mobile in mind. But with no immediate plans to upgrade our Collections site (which operates independently from the rest of our site and houses our database of about 50,000 works in our collection), we needed to think about how we can satisfy our mobile users today by working with what we have. This led us to restyling our current design for mobile users—literally hiding content that’s less essential and making the rest bigger and more streamlined. We made an effort not to over-complicate our work so we could get a mobile site launched in a short amount of time (about 3 days of work). So here’s how we did it…
The layout of the mobile site is simpler. We display all the pages in a single column to allow each feature to be as large as possible and provide a simpler flow of information. We silo the content to just our artwork objects. Links to other sections of our website and other related content are removed for now, and will be rethought at a later date. With the small amount of screen real estate, we put content first. This means navigational items and related links go to the bottom of the page. This is not ideal, and there are definitely more usable ways to address navigation, but in the interest of a short turnaround, we’ll address that post-launch with a thoughtful approach to our users’ needs.
– Since the server-generated code is the same for both pages, we still take advantage of our page caching, keeping with our efforts to keep PHP and MySQL load on our server low.
– External links to our content (via blogs, social media, etc.) always display the layout that looks best on your device. If someone tweets an artwork and you view the link from your desktop or phone, you always see the most usable layout without us worrying about forwarding users to different subdomains or checking headers on each page load.
– There is no additional work for our content creators and no change to our content management workflow.
– Mobile HTML includes a lot of content that’s not displayed, causing users to download more than they see. This will make our simple pages load slower on mobile devices than necessary.
– Since we’re not changing the HTML markup, we can’t be super creative with our mobile layout. For our immediate needs, this is fine for us. But if we ever want to get a little fancier with our mobile site, this will not be the most flexible implementation.
Because the mobile world is changing quickly, we release small, quick iterations of our mobile site with the intention of evolving it as we go. With feedback from users we’ll be able to target development work in thoughtful chunks as we move forward.
We also allow users to switch between the desktop and mobile site, so they can still get to content that has been omitted from the mobile site. We follow the assumption that mobile users will want to get to data anyway they can, and will even deal with a desktop site on a small screen if they really want to get a piece of information.