1. GDOT Website Redesign Proposal
Project Team
Andrew Nelson
Carol Njama
Olusola Oni
IT 6753 Advanced Web
Concepts and Application
Prof. Jack G. Zheng
Kennesaw State University
Spring 2016
This PowerPoint presents an analysis of the Georgia Department of Transportation’s (GDOT) Web site. The GDOT has difficulties in communicating with the public about its projects via its Web site. This presentation analyzes shortcomings surrounding the GDOT Web site, and enlightens on the use of Web 2.0, Social Media and Mobile Computing. We hope to enhance and redesign the Web site for use as a medium to effectively communicate the organization’s ongoing projects to the public and its citizens.

2. ANALYSIS OF GDOT Website
Poor positioning of key menu items
Lack user engagement
Little or no coordination of the incorporated Web 2.0 tools and social media components
The GDOT’s major objective is to communicate its ongoing projects to the public and contractors who would be interested to help them solve their problems. We noticed the Web site implemented 5 pages on its Web site to deliver information concerning these projects to the public. The pages are the:
Project page,
Public outreach page,
Project search page,
Meeting calendar page, and
Social Hub page.
We observed these pages are not perfectly situated to catch users’ attention. Thus, visitors would be unaware the organization has any ongoing projects available. We also noticed that these pages lack user engagement, and are designed in a “Web 1.0” manner (users just read information without having the opportunity to interact or contribute to the subject matter).
They have some Web 2.0 tools, like the RSS and social media features. These are good ideas, but these concepts are not presented nor coordinated very well, since they’re broken off from the main content.

3. ANALYSIS OF GDOT Website CONT..
Less responsive on mobile devices or smaller screens. (e.g., text in the screen to the right is cut off).
By testing the Web site on mobile devices like smartphones and tablets, and even adjusting the site to smaller screens, we notice it is moderately responsive as it adjusts well to tablet screen size. But upon adjusting to mobile sizes, content becomes more difficult to view.

4. GDOT Website redesign strategies
Integration of Web 2.0 and social media
components
Mobile Web site optimization
GDOT Web site service-oriented architectures (SOAs) can be improved, this can be achieved by integrating Web 2.0 and social media components in the Web site and making it mobile-friendly. Web 2.0 is the way people interact with Web site, made possible by underlying technologies like AJAX , HTML 5, REST, jQuery e.t.c. Social media is the sharing of information among people, and in doing so, empowering relationships either socially or economically.
Web 2.0 technologies and associated applications can be made an integral part of the GDOT Web site, to facilitate or create an interaction between the site and its visitors. In addition to the site’s already-established one-way communication, users will also be able to contribute and produce new content, making the GDOT site a participatory platform.
Also, the Web site can be made more responsive to smaller screen sizes, so mobile users can have the same experience as desktop users. This is vital due to most people now accessing the Web through mobile devices (i.e. smartphones and tablets).
By making these two improvements, we can provide a more interactive, mobile-friendly Web site with a rich user experience.

5. GDOT Website redesign strategies Cont..
Use blogging to achieve a more interactive Web site:
Generate public interest
Search engine optimization
Blogging is a Web 2.0 application that is not costly to set up, and can render benefits beyond its cost. By creating sections or pages within the GDOT Web site for blogging, users can easily express their thoughts on any project communicated to the public. In doing so, we can generate interest from the public on any matter. Plus, as more people contribute, the site will rank higher in search engines. In short, the goal is for more people (including contractors) to participate in ideas and development of GDOT projects.

6. GDOT Website redesign strategies Cont..
More Web 2.0 applications :
Folksonomy
Social bookmaking
Folksonomy, or social tagging, is a social networking approach that lets users tag their contributions to information on a site, enabling others to easily find and view this content. Incorporating this people-centric technology in the GDOT site, will let more people locate its project information, and more contributions can be gathered from the public and potential contractors.
Social Bookmarking can be used to increase the ranking and popularity of any information passed on a Web site. Adding “Like,” “Dislike,” and sharing options can encourage users to bookmark and share information to others, bringing new visitors to the site. This can also communicate project information to the public.

7. GDOT Website redesign strategies Cont..
Mobile Web optimization strategies:
Separate mobile version site
Native app
One Web
Responsive Web design
Adaptive – dynamic serving
Hybrid : responsive + server serving (RESS)
We can make the GDOT’s Web site accessible through mobile devices using 3 different strategies. The first is to make separate Web sites for different mobile screen sizes, which is impossible to create a Web site specifically for each mobile device available in the world. Even if we can, it will cost a lot of money.
Another strategy is to create a native app specifically developed for mobile devices. This is a great idea, but the drawbacks are that the app has to be made for a particular operating system and downloaded by users.
The third one is the one Web strategy, which according to w3c means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. We recommend this strategy, because it is the cheapest and all we need do is make one Web site that will look equally well on all types of devices. Moreover, this method makes it easy and cheap to maintain the Web site.
There are three approaches to One Web: responsive Web design, adaptive – dynamic serving, and the hybrid design. We recommend responsive Web design, which we will discuss more throughout this presentation. This approach is the most widely-used, and delivers excellent solutions for most situations. It is a front-end technology and uses a combination of CSS and media queries to detect the device or screen size, and modify the content, features, and functions to fluidly fill the screen.
The adaptive approach uses server side technology for device feature detection instead of using client side technology. This approach relies on databases of devices repository (DDR) and preset point templates. It is expensive to deploy and involves a lot of effort, but it delivers an enriched Web site with advanced functionality and customization. The hybrid is a combination of responsive and server side methods hence the name RESS. In theory, this should be the best option, but its complexity makes it too difficult and un-scalable.

8. GDOT Website redesign strategies Cont..
Responsive Web Design (RWD) basic principle and
key practices :
Fluid layout
Adaptive layout
Media query
Responsive Web Design is the approach that makes it possible to design one Web site that responds to every user’s behavior and environment based on screen size, platform, and orientation. This means one Web site for all screens. The GDOT site will be designed to automatically switch its resolution, image size, and browser size when users access it from devices with diverse screen sizes.
This concept of responsive Web design is a mix between fluid and adaptive layouts with the use of CSS media queries. With fluid layouts, the width is given in relative units (percentages) instead of pixels. This way, Web site layout can easily resize to any width.
For the adaptive layout, instead of using percentages, fixed sizes are used. These sizes are adapted depending on the width of the browser and viewport. This creates a layout with different breakpoints though; each of the breakpoints can then be adjusted using CSS media queries so content is not too small.
Media queries are also used to create conditional stylesheets based on width, height, orientation, color, aspect-ratio, resolution etc.

9. GDOT Website redesign strategies Cont..
Responsive Web design general principles :
Content prioritization
Layout design/patterns
Multi-device layout pattern
Off canvas multi-device layout pattern
Column drop layout pattern
Content prioritization deals with decisions on what content is important, should shift, be hidden, or even disappear on a Web site when viewed on mobile devices. Responsive Web design should not only be about technical aspects, as most people visit Web sites for content. Users sometimes need to scroll through several screens before reaching the main content. This is because of the rearrangement nature of content on responsive Web sites when viewed on mobile devices. This makes it necessary to consider content prioritization during responsive Web site development and design. A mobile-first approach will be used to redesign the GDOT Web site, and the main content will be positioned for optimal mobile user experience.
There are different layout patterns when it comes to the way fluid grids and adaptive images adjust the content of a Web site to fit different screen sizes. This is done by stacking the content vertically from large screens to small screen sizes. The most popular pattern is the multi-column layout pattern, where the core content does not change until the smallest screen size.
The off canvas layout pattern keeps content or navigation hidden on small screens, and reveals them when certain actions are made by users or when the Web site is viewed on larger screens. This method keeps pages short and users can read content without doing much scrolling.
Column drop is another popular pattern which drops columns as screen sizes get smaller, keeping the size of every element in the layout almost the same. A combination of column drop and off canvas methods will be the idea to use when redesigning the GDOT Web site.

10. GDOT Website redesign strategies Cont..
Some recommended mobile Web navigation systems:
Off-Canvas pattern
Footer Anchor pattern
Toggle pattern
Navigation systems, or menus, are shortcuts for Web site usability, making them an important part of information architecture. Careful decisions must be made for their development when considering responsive and mobile-compatible Web sites. The full-screen navigation system is the traditional menu system. This works for Web sites viewed on desktop or large screens devices. But when viewed on mobile devices, the menu becomes incompatible with the content. This makes it necessary to consider other menus for mobile Web sites.
The Off-Canvas pattern represents the menu items with a single menu button, keeping the menu items out of the picture. When this button or icon is clicked, the menu list slides out from left side and moves the main content to the right. This method is very sophisticated and advanced, and may have recently become the standard, but it also displaces the content by introducing horizontal scrolling.
The Footer Anchor pattern keeps the menu at the bottom, giving enough space for core content. It creates quick access to the menu items at the footer by providing an anchor link in the header.
The Toggle pattern also creates enough space for core content by using the same method as the footer anchor. However, when the anchor link is clicked, the menu slides open in the header. This approach eliminates the awkward jump to the footer. This is our recommendation.

11. GDOT Website redesign strategies Cont..
Some recommended mobile Web frameworks:
Responsive framework: Bootstrap
HTML 5 mobile app: jQuery Mobile
Responsive and mobile Web sites can be achieved using different user interface frameworks. The two most popular are Twitter Bootstrap and jQuery Mobile. They’re both good options due to their support of responsive design, grid layouts, consistency, rapid application development, etc.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the Web, while jQuery Mobile is a HTML 5- based user interface system designed to make responsive Web sites and apps that are accessible on all mobile and desktop devices.
Both frameworks have their pros and cons: Web sites developed using jQuery look good on mobile devices, and it delivers mobile oriented features like page transitions, swipe events etc. Their desktop equivalents, however, use the same “mobile” look, so they don’t translate well. Bootstrap is designed on a mobile-first concept but Web sites developed this way tend to look better on desktop devices than mobile devices. It is responsive for both desktop and mobile devices because of its advanced grid system.

12. Redesigned GDOT Website (Mockups)
Used a mobile-first approach.
Wireframes designed using a tool called Gliffy
Click here to access wireframes/screenshots
We designed the mobile version of each screen first. Pages were designed to take advantage of a mobile device's longer vertical screen. Information appears side-by-side only if it means less vertical scrolling. Most content is stacked vertically, however, to prevent horizontal scrolling. We want users to find and see information as easily and clearly as possible.

13. Redesigned GDOT Website (Prototype)
The following are the ideas used to redesign the preliminary model of the GDOT Web site :
Use of Twitter Bootstrap framework
Rearrangement of menu items
We have decided to use Twitter Bootstrap for its preconfigured ready-to-use elements, amazing grid layout system, and responsive design on desktop and mobile devices. We have developed the GDOT Web site to be responsive and mobile friendly using its four-tier grid classes, and also adding media queries and our own styles to create key breakpoints in the grid system. The navigation system and content section (including images, topography, columns, and tables) are responsive across different-sized devices. The main pages are:
Featured Projects,
Events & Meetings,
Blog,
About Us, and
Publications
Links to these items appear in the navigation bar, letting visitors easily access what they need from any part of the site. Project selectors and events and meetings also appear on the homepage, so visitors will see them when they first arrive.

14. Redesigned GDOT Website (Prototype) cont..
More on the ideas used for the preliminary model:
Use of both full screen and toggle navigation systems
Implementation of blogging, social bookmarking, and folksonomy
For navigation, we used the traditional mega menu and the toggle menu system. The mega menu appears on large screens (desktops). For smaller screens (tablets and smartphones), the menu switches to toggle pattern. It is designed to be a show/hide hamburger icon, which toggles to show the menu items in the header and shifts the main content down. This give mobile users the freedom to display the menu, or hide it and save screen real estate. Even when displayed, they can still use mobile-friendly vertical scrolling.
For user engagement and more interaction with the GDOT Web site, we have incorporated a blog page where users can find posts about upcoming projects and safety tips. Content is taken from different links on this page, to show how it adapts to the new format:
For current projects, we kept the same Search by County and Search by Project functionality, but we’ve broken down projects into short bulleted lists, so as not to overwhelm visitors with too much information. Choosing a county shows project info for the first project in the list, and displays a menu for visitors to choose other projects in that county. Choosing a project takes visitors straight to that project. The same “county” menu appears for visitors to quickly jump to other projects in their chosen project’s county. We also incorporated the Advanced Project Search, for contractors, project bidders and key individuals who are familiar with the current/past projects. It gives them a way to search in depth information about the project. Projects use dummy data.
Both pages let visitors leave feedback so the GDOT will be able to gather their views on every project posted on the Web site. We have incorporated social bookmarking features to enhance the page’s search engine ranking. Users can also share project information with their colleagues, friends, and families they feel might be interested in the projects. This way, more traffic can be pulled to the Web site.

15. Redesigned GDOT Website (Prototype) cont..
Applied same design from mockups to desktop using Bootstrap. Took advantage of desktop’s wider screen real estate
Used Snagit for these
Click here to access all desktop screenshots
When applying the same design behind our wireframes to a desktop, we used a drop-column approach to take advantage of a desktop's wider screen real estate. More elements appear side-by-side, instead of stacked vertically. We still want to prevent horizontal scrolling, however.

16. Redesigned GDOT Website (Prototype) cont..
Screenshots from the prototype GDOT Web site when viewed on desktop devices:
When viewed on a desktop, the navigation system uses a mega menu. All menu items are visible in the header, and are clearly labeled where users can navigate with ease to find what they need. This navigation system is consistent on every page of the Web site. Images, tables, topography, columns, etc. are all responsive to different window sizes.

17. Redesigned GDOT Website (Prototype) cont..
Screenshots from the prototype GDOT Web site when viewed on tablet-size devices:
The screenshots above are how the GDOT Web site will be viewed on medium screen size devices, like tablets. The navigation system switches to a toggle pattern to make it as simple and unobtrusive as possible. A hamburger icon shows or hides it. They are so clear and self-evident that users wont have difficulties navigating from one point to the other. The orientation is very good, users would know where their current page is in relation to other pages. All content of the blog adjusts well to screen size including the feedback box and all bookmarking and file share buttons.

18. Redesigned GDOT Website (Prototype) cont..
Screenshots from the prototype GDOT Web site when viewed on smartphone-size devices:
The Web site is also responsive to small smartphone screens. We use the column drop layout pattern to adjust to screen sizes. For example, compare Events here to its desktop equivalent.

19. references
Beattie, A.(November, 2011). What is the difference between social media and Web 2.0?. Retrieved from:
Faletski, I. (January, 2013) .Why a One Web approach is the way for ecommerce. Retrieved from:
Frost, B. (February, 2012). Responsive Navigation Patterns. Retrieved from:

20. references
Kooser, A.C. (February, 2007). What Can Web 2.0 Do for Your Business?. Retrieved from:
Prof. Jack Zheng PowerPoint slides on web 2.0 overview, technology and application, and mobile web overview, responsive web design, mobile web navigation, and mobile web UI frameworks
Wroblewski, L. (March, 2012). Multi-Device Layout Patterns. Retrieved from:
W3C (2008). Mobile Web Best Practices 1.0. Retrieved from: