Transcript 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

Poor positioning of key menu items

Lack user engagement

Little or no coordination of the
incorporated Web 2.0 tools and social
media components

Less responsive on mobile
devices or smaller screens.
(e.g., text in the screen to the
right is cut off).

Integration of Web 2.0 and social media
components

Mobile Web site optimization
Use blogging to achieve a more interactive Web site:

Generate public interest

Search engine optimization
More Web 2.0 applications :

Folksonomy

Social bookmaking
Mobile Web optimization strategies:

Separate mobile version site

Native app

One Web

Responsive Web design

Adaptive – dynamic serving

Hybrid : responsive + server serving (RESS)
Responsive Web Design (RWD) basic principle and
key practices :

Fluid layout

Adaptive layout

Media query
Responsive Web design general principles :


Content prioritization
Layout design/patterns

Multi-device layout pattern

Off canvas multi-device layout pattern

Column drop layout pattern
Some recommended mobile Web navigation
systems:

Off-Canvas pattern

Footer Anchor pattern

Toggle pattern
Some recommended mobile Web frameworks:

Responsive framework: Bootstrap

HTML 5 mobile app: jQuery Mobile

Used a mobile-first approach.

Wireframes designed using a tool called Gliffy

Click here to access wireframes/screenshots
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
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

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
Screenshots from the prototype GDOT Web site
when viewed on desktop devices:
Screenshots from the prototype GDOT Web site
when viewed on tablet-size devices:
Screenshots from the prototype GDOT Web site
when viewed on smartphone-size devices:
Beattie, A.(November, 2011). What is the difference between social media
and Web 2.0?. Retrieved from:
https://www.techopedia.com/2/27884/internet/social-media/what-isthe-difference-between-social-media-and-web-20
Faletski, I. (January, 2013) .Why a One Web approach is the way for
ecommerce. Retrieved from:
https://econsultancy.com/blog/61933-why-a-one-web-approach-is-the-
way-for-ecommerce/
Frost, B. (February, 2012). Responsive Navigation Patterns. Retrieved
from: http://bradfrost.com/blog/web/responsive-nav-patterns/
Kooser, A.C. (February, 2007). What Can Web 2.0 Do for Your Business?.
Retrieved from: https://www.entrepreneur.com/article/173496
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: http://www.lukew.com/ff/entry.asp?1514
W3C (2008). Mobile Web Best Practices 1.0. Retrieved from:
https://www.w3.org/TR/mobile-bp/#OneWeb