Bringing Infographics to Georgia.gov, Part 2: Problem Solving
This is the second post in a 3-part series on the creation of Georgia.gov’s first infographic.
In case you missed it, my last blog talked about some initial steps in the creation of Georgia.gov’s first infographic. This time, I’ll take you through a couple problems that came up and how we were able to solve them.
While I worked through the infographic’s design, my team and I continued our research as other issues arose. If you’ve followed the Digital Services Georgia team in the past few years, I’m sure you know about our push for responsive design. Responsive websites adapt to different screen sizes so that they look as good on mobile devices and tablets as they do on a 40 inch desktop monitor. Since this was so important to our websites, we wanted our infographics to work in the same way.
I combed through the depths of the Internet for any help on this topic and, to my surprise, found very little. The ideal solution — to custom-code every infographic in HTML and CSS — would be too costly and limit the design. Instead, our solution to the problem was to make the infographic somewhat tall and narrow so that it would look good on one column of our desktop blog and still be legible on smaller screens. Online infographics often use a vertical layout, so many of our mobile users would be used to scrolling through them anyway.
Responsive solution: check.
Update: Since first publishing infographics, we've added Columns the the GeorgiaGov platform. One content type for Columns is designed specifically for infographics, allowing for pinch-and-zoom on mobile devices. Learn more about using Columns on your blog entries and site pages.
Our next question involved accessibility. Making our websites accessible to all people has been a high priority, especially in the past year. Our platform themes have always striven for accessibility, and we’ve almost finished updating the colors on every theme to continue in this direction. When I picked the final colors for the business infographic, I checked the text color against the background color to make sure that people with limited vision could still read it, and to make it more legible all around.
The concern now was for people who use a screen-reader. They would not be able to see the graphic, so how do we make sure that the same information is available to them? After talking with our friends at Georgia Tech’s AMAC Accessibility Solutions, we gave the image alternative text that would point people with screen-readers to the related links at the bottom of the page. These links take you to the three blogs that already existed in text format. As long as we made as much of the graphic information available in text as possible, then we were holding to the best accessibility standards that we could.
Accessibility solution: check.
Now that we had our work-arounds for responsive design and accessibility, we were pumped up to get Georgia.gov’s first infographic on the website. It was all done and we’d thought of everything, right? Well, I guess we’re only human. Find out in my next blog what went wrong with our file format and how we’ve continued to address this problem since October.
Last updated October 3, 2017.