Project Documentation

The Plan

Site PurposeThe purpose of this site is to advertise for a local pizza company that specializes in delivery. The goal is to show some real local flair that one can be proud of every time they go to order. I'd like to create a site that has a section for a menu, location, map, pictures, reviews, and functionality for placing your order.

Needs AnalysisThis site will be used to answer the following questions and have the following functionality:

Location of the shop Menu Form to submit an order Map Pictures Reviews Proud to be a local business

Goals1. Provide a website that is easy to read which efficiently informs the patron of

the location and menu.2. To create a form that is easy to use that allows for efficient orders of pizzas.3. To be as mindful as possible when it comes to mobile traffic and what kind of

experience that will entail.4. To instill a sense of pride when ordering and supporting local business.

Audience Characteristics

I feel this site will be used for a wide audience, but I foresee two main demographics:

Primary Audience

The primary audience will be geared towards college students that require a pizza delivery. These orders would likely take place later in the evening for evening study-fuel. College students would likely prefer a mobile friendly website and have a lower tolerance for a poor mobile experience.

Secondary Audience

The secondary audience would be geared towards families. These families would likely have larger orders than college students, and do their orders more around traditional dinner hours. Families would also likely prefer delivery method, but may be more likely than college students to order a pick-up from the store.

CompetitionThere are plenty of pizza options across the city, so there will be much competition. However, I believe a great way of standing out is by being a local pizza shop that specializes in delivery versus the franchise options that seem to be the only options in the space. Because of this, I looked at different franchises in the area that specialize in delivery.The first site I looked at was Pizza Hut. www.pizzahut.com First impressions:

While the background gives a nice contrast to the different elements of the homepage, it doesn't scream "pizza place" to me. It looks like cold concrete.

Overall, its a very clean looking website and everything is easily readable. The pictures are very clear.

The pizza descriptions do a good job of being informative without being overkill.

Overall, while its a clear looking website, I do not get the warm vibe that I'd like to provide with a local pizza delivery website.

The second site I looked at was Domino's Pizza. www.dominos.com First Impressions:

The page heavily focuses on getting costumers to order pizza.

The menu isn't too informative. For instance if you click the veggie pizza, it takes you to the order page with no explanation of what is on the veggie pizza. Same for all pizzas.

Once you get to the order page, the order icons don't line up well with the remainder of the page.

The print is very small and hard to read in some cases. Some pictures also seem very small and isn't the most pleasing to the eye.

Some of the side banners are a bit bunched together - seems like they should be more spread out.

Overall, this website feels very heavily weighted towards making a sale and not much else.

The third site I looked at was Donatos. www.donatos.com First Impressions:

The layout appears mobile friendly and I like the search bar at the top to quickly order pizza without being too in-your-face about selling pizza.

The shifting pictures on the main page is pleasing to the eye. The pictures have good clarity and I like how there is a message displayed

about the pizza when you hover over it. I don't like how some of the items clicked under "company" lead to a

completely different website. For the items that do this, it makes sense, but it could lead to loss in traffic.

Logo and slogan renders a bit small on the page at the top and could be a bit hard to read for some.

My overall impression is by using a website to show the feel of a local pizza place, this pizza shop can stand out as a pizza delivery company against the slew of

franchises in the city.

Wire Frame

WireframeSitemap

Homepage

Menu Page

Location Page

Order Page

About Us Page

Contact Us Page

Blog Page

Site Map

Best Viewed assumptions: Ideally, the website would be best viewed on a desktop machine with a screen size at least 1000px in width on Microsoft Firefox.

Test Plan: My plan to test the site is to test in the following areas:

Get TestyValidationValidation of HTML

I've tested each page in the W3C validator - all have been fixed to show no errors.

Validation of CSS

I've tested my css stylesheet page, as well as embedded CSS and all have no errors.

Checking for Broken Links

Web Pages have been checked for broken links using Xenu Link

FlexibilityVarying Window Sizes

Because it is jello-layout, the page shrinks and expands appropriately across different window sizes beyond 1000px.However, once smaller than 1000px, the page cannot be seen all at once and requires scrolling.

Varying Font Sizes

The font sizes seem to shrink and expand accordingly when zooming in and panning out on the screen.

SpeedThe pages all load quickly. Text on pages load almost instantaneously, however particularly the location loads slower due to an embedded map.

AccessibilityAccessibility Test

When increasing fonts, the pages lettering and fonts scale appropriately.

Text Browser

I have not been able get Lynx to work appropriately to test the text only browsing.

Browser IndependenceFirefox

Looks the best in Firefox, menu bar looks the cleanest.

Internet Explorer

Menu, page, pictures look crisp, but Work-Font of Title noticeably changes while page is loading.

Chrome

Similar to Firefox, but menu bar curves.

Project Checklist:

Feature URLExternal Stylesheet http://cs.iupui.edu/~cavetor/n241/css/pizza.css

Embedded Stylesheet http://cs.iupui.edu/~cavetor/n241/menu.html#embedded

CSS Style Comment http://cs.iupui.edu/~cavetor/n241/css/pizza.cssExample of a style that overrides another

http://cs.iupui.edu/~cavetor/n241/css/pizza.css See H1 CSS

Header Comment http://cs.iupui.edu/~cavetor/n241/homepage.html Also, Block header on each page.

Example of a <table> http://cs.iupui.edu/~cavetor/n241/menu.htmlExample of a <blockquote> http://cs.iupui.edu/~cavetor/n241/about.html

Example of a <ol> list http://cs.iupui.edu/~cavetor/n241/location.htmlExample of a <ul> list http://cs.iupui.edu/~cavetor/n241/about.htmlExample of a <dl> list http://cs.iupui.edu/~cavetor/n241/menu.htmlExample of a PNG or GIF image http://cs.iupui.edu/~cavetor/n241/menu.html

Example of a JPG image http://cs.iupui.edu/~cavetor/n241/homepage.htmlExample of a <form> http://cs.iupui.edu/~cavetor/n241/order.htmlExample of Typography http://cs.iupui.edu/~cavetor/n241/homepage.html

Example of a css-delivered rollover effect

http://cs.iupui.edu/~cavetor/n241/homepage.html The menu bar uses table to produce a similar effect. I wasn’t able get menu bar to scale appropriately otherwise.

Example of an image mapJavaScript Plugin

Feature URL

Any other feature(s) you might want considered

Post-Project Analysis:

For the most part, the website I created was very similar to what I had drawn out. As I was creating the website I learned a few new skills including, how to create a menu bar, how to embed a map into a web page, and how to use a GIF(something that I had read about but had yet to use in a page.). There are two pages that don’t work as well as I’d like, the order and contact us form seem to cause the header’s borders to shrink, which looks a little messy.

Bibliography:

"Bazbeaux Pizza." Bazbeaux Pizza. N.p., n.d. Web. 11 Dec. 2016.

"Best User Interface." The Webby Awards. N.p., n.d. Web. 11 Dec. 2016.

"Design Shack - Web Design Gallery, Articles & Community." 10 Rock Solid Website Layout

Examples | Design Shack. N.p., n.d. Web. 11 Dec. 2016.

"HTML." W3Schools Online Web Tutorials. N.p., n.d. Web. 11 Dec. 2016.

Https://www.facebook.com/CreativeBloQ. "11 Great UI Designs." Creative Bloq. Creative Bloq

ART AND DESIGN INSPIRATION, 17 Sept. 2014. Web. 11 Dec. 2016.

Https://www.facebook.com/CreativeBloQ. "25 Top-class Website Templates." Creative Bloq.

Creative Bloq ART AND DESIGN INSPIRATION, 06 July 2016. Web. 11 Dec. 2016.

@MozDevNet. "Mozilla Developer Network." Mozilla Developer Network. N.p., n.d. Web. 11

Dec. 2016.

Papa John's Pizza. N.p., n.d. Web. 11 Dec. 2016.

Robson, Elisabeth, and Eric Freeman. Head First HTML and CSS. Sebastopol, CA: O'Reilly,

2012. Print.