Sitemaps are organized lists or flow chart diagrams that shows connections between web pages, web page trees, and website content. A visual sitemap is a very effective method for both planning and communicating ideas about a website’s structure. As a 2D representation of a website, sitemaps allow designers and developers to efficiently plan website projects by offering a bird’s-eye view of the entire project at one time.
The physical structure of a sitemap may vary depending on its intended use. Typically sitemaps for project planning are visual 2D displays or images optimized for human reading. Pages are represented as blocks or cells connected by lines that represent a link or path by the user. This format is popular because of the ease and speed of human understanding.
Sitemaps optimized for computer reading will typically take the form of an XML document, a structured list of information enclosed in standardized tags forming an outline of key and value pairs. XML sitemaps may contain additional information about individual pages and content that can be easily interpreted by computers that quickly read it from top to bottom.
A 2D image or drawing representing the structure of a website. Pages are represented as blocks and cells linked together in a hierarchical organizational chart. Visual sitemaps are typically created with a computer by manually drawing or generated by crawling an existing website.
HTML formatted sitemaps are typically used for human interaction and understanding of page content locations within a website. HTML sitemaps may be included as a page on a website as an additional navigation aid. Actual formatting or styling of the sitemap may vary depending on the designer’s tastes.
An XML formatted list of pages readable by search engines such as Google, Bing, and Yahoo. Submitting XML sitemaps to search engines allows for better and more comprehensive website indexing.
An XML formatted feed that can be used easily to distribute and read timely website and blog content. These are typically files on a server that are auto-updated when new content is published to a website.
An XML sitemap is to be read by computers allowing for better indexation of non-HTML content such as images, video, PDFs, audio files, etc.
A specialized XML based sitemap used by search engines to aggregate fresh newsworthy content. These sitemaps include additional metadata about news content, sources, etc.
Building sitemaps as a planning strategy for websites is a relatively new concept that came about in the mid 2000’s. As web designers shifted to a content-first philosophy, the need to pre-plan became much more emphasized. Prior to this time, most websites were planned and designed as graphical mockups page by page, based on the business requirements alone. Website project plans consisted of image files representing what each page looked like with additional documentation stored in text files. Typically navigation structure was an afterthought and was simply a way to link together all of a website’s pages.
With the shift to a content-first strategy, the user has become the primary focus of website design planning. Content is organized to provide the user with relevancy and accessibility in mind; intuitive hierarchical organization has become the goal. This strategy requires additional pre-planning of website page structures. Designers and developers are borrowing tactics from software developers and creating specialized flow charts we now call sitemaps.
Sitemaps have evolved from simple hand-drawn flowcharts to visually interactive diagrams. Moving the site mapping process to the cloud has allowed for richer feature sets as well as easier collaborative workflows. By 2012, site mapping as a process was widely adopted by the web design and development industry.
Visual sitemaps provide the quickest level of insight into web planning. They do not require a lot of clicking or reading of long lists of computer code to get the full picture. Website plans and strategies can be more efficiently communicated to developers, team members, and clients—resulting in greater end-user satisfaction, more efficient development with less mistakes, and more accuracy in final product expectations.
Using sitemaps to plan websites in conjunction with a modern CMS allow for greater flexibility and future scaling. New pages can be easily added to existing navigational structures rather than frequent full-site redesigns common in the past. Organizing a website’s page structure allows for websites to grow naturally over time.
Planning websites using sitemaps help drive innovation and test new ideas. In the earlier days of website planning, designers would frequently piggy-back off other sites. Their design structures had little variation because it was quicker and safer to copy. Planning websites with sitemaps allows the designer to test out a variety of website structure scenarios before coding actually begins. This gives the designer the opportunity to visualize in advance user flow and interaction.