Chapter 6: Navigation
Navigation is one of the most important factors to consider when designing an infographic that will be displayed and shared online. A designer must give viewers visual cues within their design in order for the viewers to follow the intended navigation of the design; this can be achieved by using hierarchy within the design, such as using graphics and large typography as focal points, color schemes in which there is a noted contrast between the content (including typography) and the background, and changes in the content’s scale and its proportion to the other contents.
A natural flow for most of the designs found on the Internet is: header, navigation, section (containing graphics and typography), an aside section (often, but not always), and footer (which usually contains copyright information).
Search Engine Optimization
Search engine optimization (SEO) is a key factor in how a web page or site is found in search engines such as Google™ and Bing™. Everyone who owns or runs a site on the Internet wants their site to appear on the first page of a search engine site, and appearing above the scroll is the ultimate goal – the same goes for infographics. Achieving a good placement on the results pages of search engine sites is dependent upon the keywords and metadata associated with the site or page, the relevance of the content, the amount of visitors a site or page receives over time, and the current frequency of visitors. Sites which have had a lot of visitors in the past, but have fewer current visitors will be pushed down the list. All of the aforementioned is determined by analytics within the search engines’ algorithms within seconds of someone entering their search criteria. One of the best ways to optimize the placement of an infographic in a search engine is to share it on popular social networking sites and encourage others to share it as well. When something goes viral on the Internet, it makes it to the top of a search engine’s list (Krum, 2014).
HTML5
HTML stands for Hyper-Text Markup Language; it is the code that makes up the content that is seen (and the order in which it is seen) on websites and web pages. HTML5 is the latest version of HTML – resulting from the culmination of years of finding out what works best in code writing for the Internet. Working in tandem with Cascading Style Sheets (CSS), HTML is what makes everything we see on the web.
File Structure & Site Plan
In order to have everything appear on the landing page of an infographic on the web, the files that contain the information for the page must be structured in a certain way. The main file folder must contain a folder with the CSS codes, an images folder, and separate HTML codes for each page being designed.
The specific names of the files must be used exactly as they appear when placing them into the codes, otherwise the landing page will not display the information properly.
Before setting up any HTML or CSS codes, it is best to have a site plan laid out. The site plan is basically the blueprint for you to follow when writing the code. And, since the HTML and CSS codes work together, they need to follow the same structure.
HTML5 Thumbnail Code
When creating the HTML code for a web page, it is important to know the exact spelling and structure of the files being used, including CSS files and image files. Any file names that contain capital letters must be spelled exactly as they appear, otherwise the links to those files will not work; for this reason it is good practice to only name files using lowercase letters. In the code seen here, the link to the CSS code file is “css/main.css.”
Knowing the contents of each file folder within the main file folder is also very important. That way, you will know where to look when placing specific items into the code. When dealing with more than one image, it is important to know the names of each image. The image file used in the code seen here is “images/infographic_thumbnail.jpg.” This code tells the computer exactly where to find the image within the main file folder.
HTML5 Thumbnail Page
Screen capture of the thumbnail page for my Bulldog Infographic opened in a browser.
HTML5 Fullsize Code
The HTML code seen here is almost identical to the thumbnail code on page 43. However, there are a few significant changes in the “section” portion of the code. Instead of reading “images/infographic_thumbnail.jpg,” it now reads “images/infographic_fullsize.jpg” and the two lines below that have been changed to reflect the differences between the two pages that are linked to one another, swapping the words “fullsize” and “thumbnail” respectively.
Again, it is important to know the exact spelling of the files you intend to use and where to find them within the folders of the main file folder on your computer. If even one letter is off (capital, lowercase, or simply misspelled), then the web page will not display the content properly.
Alignment and colors of the page content is controlled with the CSS code.
HTML5 Fullsize Page
Screen capture of the fullsize page for my Bulldog Infographic opened in a browser.
CSS Code
CSS stands for Cascading Style Sheet. The name alone describes what it does; it is a sheet typed in a cascading form that controls the styles of all of the elements that make up a web page. So, where HTML controls the content that is placed on a web page, the CSS controls the way that content is displayed, defining the colors, alignment, spacing, and fonts and their respective sizes. A uniform look of all of the pages of a website is controlled with CSS code (Rouse, 2010).
In the CSS code seen here, I have entered the color codes for the grey background and the white header title. I have also aligned all of the elements on the page to the center to keep a natural flow from top to bottom. The hierarchal style of the typography is controlled by entering the font sizes from largest to smallest, from top to bottom. The style of font is also controlled with CSS code (in this case, I used Verdana).