January 22, 2015

My Website Is Responsive! Now What?

2014 was a responsive year.

We launched a redesigned Georgia.gov in May of 2012. The new site not only looked different but it also responded differently to the device people were using.

Our mobile traffic had crossed 20% of our total traffic and the trend only seemed upward. Essentially, every fifth user was using either a mobile phone or a tablet to access Georgia.gov and we were thrilled to save our users the pain of using touch screen gestures to experience our website to the maximum. This was a unique technology and not many websites used it back then. Georgia.gov was noticed and celebrated by the web community for its advanced technological and user center approach.

We decided to roll this feature to the rest of our websites on the GeorgiaGov platform and completed migrating all the websites to responsive themes.

This is not the end of the responsive project; its a new beginning to the Mobile First mindset. We discussed the Mobile First approach at length in our GOVTalks: Mobile session. If it works for your phone it works everywhere. We strongly recommend a Mobile First approach going forward where content managers need to make sure any new content added to your website is mobile friendly. The following are some quick tips you need to consider to keep your website mobile friendly:

  • Keep the menus simple and trim.
    Deep menu structures are hard to use on mobile phones. While it might be easy using a mouse to hover over menu items and dig through the site structure, the effort is multiplied when the same is expected of a user with a phone and a finger as their navigation tool. Simple menus not only save effort to browse the site on a mobile device but it also makes your website easier to navigate.

  • Go on a content diet.
    We worked with our agency customers to massage their existing content and make sure the content complements the various view ports in which the website will be displayed. This begins with the amount of content existing on pages. When the content is readjusted to fit a slim tall page, the scrolling can become never ending.

    Try and reduce your content amount to just the right amount where you don't lose the nutrition but cut the fluff. Try using bullet points instead of lengthy paragraphs. We recreated all of the Georgia.gov’s Popular Topics pages to reflect this approach.

  • Minimize table usage.
    The web has done a good job to eradicate the tabular layout virus that was so widespread in the late 90s and early 2000. We all acknowledged the accessibility concerns but what happens when tables are used at a micro level for displaying specific content? There is always a choice. As a content contributor, you decide if you need a table in the first place. If so, can you chunk the row data in a single cell to make a long table only to be scrolled vertically?

  • Use optimized images.
    We got used to the high speed internet so fast that we barely remember the squeak of the 46K modems from the yester years. However, when using mobile phone, it does remind us of the olden days by the speed of a page loading content. While your cellular bandwidth might have something to do with it, so does the content. If I upload a large image assuming my user is on a large computer connected to a high speed pipe, the experience will be a disaster for my user with a phone on the go. Always be aware of the file size you are uploading.

  • Do not use image maps.
    As users, we have seen images where part of the image changes our cursor to a link finger and if clicked takes us to another page. These image maps are not accessible to users with disabilities and mobile users. If you find yourself in a position where you need to use image maps, do consider an alternative approach.

  • Use PDFs only when needed.
    We noticed a few instances where content that could be HTML pages were served as PDF files instead. This restricts the ability of your search engine and adds a step for your users to open a new file. Just extract content from the native file and publish as live text on a page.

  • Use PDFs instead of native files.
    Native files are the software files we use to generate the content e.g. Word, PowerPoint or Excel. It is risky to publish these files in their native state. What if some of your users do not have Excel or Word installed? Converting files to a PDF format makes your files accessible to users who have PDF readers. PDF readers are free to install and assure the compatibility of any document.

Resources

Bookmark or print these, but make sure you have them handy:

Related to: