Mama Mia’s Pizzeria Stage 5 – Coding Part 5

I’m trying to wrap up this project, so rolling full steam ahead I designed and coded the about page. This was a very simple page so I knew I would be able to put it together quickly. The existing site does not have an about page, so I used some information that is included at the bottom of their existing menu. Of course if I was actually creating this page to be used by the business I would find out more information about the history of the company itself and a company statement.

I skipped straight to the coding with this one since I knew I was planning to keep things very simple.

Here is a screenshot of the completed page.

aboutscreenshot

I’m sure I will still tweak the design a little, I did throw this together fairly quickly, but it’s not an area of the site that I’m planning to concentrate much time on. The next big design challenge will be the menu page. I haven’t completely decided how I want to approach it yet, but I do know that I want to have a web version of the menu available, unlike the current site which only provides a PDF. I’m sure you will hear from me again before the weekend is over.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

Advertisements

Mama Mia’s Pizzeria Stage 5 – Coding Part 4

Over the past couple of days I worked on designing and coding the locations page. This was my first time working with the google maps API, but I have worked with other google APIs in the past, so it was pretty simple to figure out the basics.

I started out by doing some thumbnail sketches of possible layouts.

locationsthumbnails

I toyed with the idea of having one map with both locations, but the two locations were far enough away that you couldn’t see much detail about the cross streets or nearby businesses on one map. Because of this I decided to go with one map for each location.

I decided to keep things pretty simple, but I could always go back and add more features. I kind of the like the idea of the last sketch where a map with both locations is displayed and then a div with more specific information would be displayed once you selected a location.

I skipped the prototyping stage for this page and went straight into coding, so it came together pretty quickly.

Here is a screenshot of the completed page.

locationscreenshot

I am happy with how the page turned out, although I have not done much testing different screen sizes, so there are some more tweaks that will need to be made.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

 

 

 

React & GraphQL Web App

I recently went through the application process for a local start up, and while I didn’t get the job, I did get the chance to try out some tools that I’ve never used before.

The coding challenge was to create a single page app using react that would list all of the star wars movies, the list of characters in each movie, and a profile page for each character.

This challenge was my first time ever building a full react web app, I had previously played around with building components a little bit on code pen.

The back end of this site was a GraphQL server, and used GraphQL and Apollo with react to query the data. This was also my first time working with GraphQL and Apollo. Learning to write queries for GraphQL didn’t take me too long, it reminded me of SPARQL, which is a graph-based query language for semantic web databases.

With this project I also played around some with mobile design for the first time. I’ve always tried to design my pages to be responsive to screen size, but of course responsive and mobile-friendly are not the same thing. I used media queries for the first time to cater the content to the screen size. So instead of displaying a four column grid of movies/characters there is a single column display for small screens.

Here are some screenshots of the final product. This was created over the course of about 4-5 days.

starwarsapp1starwarsapp2starwarsapp3starwarsapp4

And here are some simulated iPhone X screen shots.

starwarsappmobile1starwarsappmobile2starwarsappmobile3starwarsappmobile4

I hosted the app online using heroku, and it can be viewed [HERE]

The github repo for this app can be found [HERE]

Mama Mia’s Pizzeria Stage 5 – Coding Part 3

To finish up the main functions of the contact page I decided to go with a jQuery plug-in to perform the validation functions for my contact form, and I’ve used a php file to process the posted data.

Here is a screenshot of the contact form, it hasn’t changed since my last post.

 

contactscreenshot

The validation rules for the form are fairly simple. The first name and last name fields just need a minimum length of 1 character.

The email field should contain a valid email address.

contactscreenshot2

And the comment box should have a minimum of 100 characters.

contactscreenshot3

All fields in the form are also required before the form can be submitted.

contactscreenshot4contactscreenshot5

Once the form is successfully submitted an email containing the data will be received.

contactscreenshot6

There are still some stylistic changes that I would like to make, especially for the email that is sent. I also plan to use Ajax when processing the form so that I can display a success message directly on the page rather than using a pop up window. Another thing I would like to add is a confirmation email for the user. These changes will probably not take place until I’ve finished some more functionalities/pages for the site.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

 

 

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 2

Moving right along with this project, I have completed the basic coding for the contact page. Of course the main component for this page is the contact form. I have laid out all of the form elements, now the next step will be to set up the input validation.

I created a quick layout in Adobe XD:

Web 1920 – 5

I stuck pretty closely with this layout when coding, though I did change the submit button. I may still add some more elements to the page as it seems a little bit plain at the moment, but we’ll see.

Here is a screenshot of the current look of the page:

contactscreenshot

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

I have made many forms before, both for personal projects and school, but one thing I did come across while making this page was a CSS property I have never seen before, which is the box-sizing property. The box-sizing property allows you to set elements to calculate their size including padding and borders. So if you set an element to be 250 px wide, and have 5px of padding and a 1 px border, the overall width of the element will still be 250, rather than 262px.

Here is an illustrated example:

Without box-sizing:

divsize

With the box-sizing property set to border-box the total width for the element will be the size you set it to, so if you set a width of 250 px the total width will be 250 px.

With Box-sizing:

divsize_boxsizing

For more information you can read the W3 Schools article on the box-sizing property [HERE].

 

Mama Mia’s Pizzeria Stage 5 – Coding Part 1

Over the past couple of days I began coding the homepage for my Mama Mia’s Pizzeria site. I started out coding traditionally, the way I normally do, using pure HTML and CSS. Having created a mock-up of the different sections of the site and figuring out how I would layout the divs, it was fairly simple to create the code for the page.

mock-up1

Overview of AI file

mock-up2

Header Layer

mock-up5

Navigation Bar Layer

mock-up3

Body Layer

mock-up4

Footer Layer

I initially just worried about the structure of the page, making everything look just right, getting the design right. Then I moved on to some of the bells and whistles so to speak. The big task for this page was the photo gallery. This was my first time coding a photo gallery from scratch. I wanted to see what I could come up with, without looking at anybody else’s existing gallery plug-ins. I did look at the W3C article on automatic slideshows to figure out the automation part. They executed their slideshow by creating multiple divs and then only displaying the active div, which is something I have done in the past, most recently for a data mashup visualization[GitHub] I created. For my slideshow I created one div, and set the background image based on the class assigned to the div, so essentially the buttons just change the background image for the div, and the carousel loops through the different backgrounds.

The next major step I took in the project was to look into templating frameworks. From the articles I found, nunjucks sounded like the best choice, so I followed a couple tutorials to get an idea of how it worked, and then I converted my existing code into a nunjucks project. There was a bit of a learning curve because I have never used gulp before, but I can already see that it will save me a lot of time as I begin coding the rest of the site. In the past I have handled “templates” by converting all of my pages to php and using includes for reoccurring sections of code.

Nunjucks is much better for this though for several reasons. One big reason is the ability to create a layout template which includes everything from the HTML tags and metadata to the navigation bar and footer. With php includes I would not be able to include the basic layout because you can only include uninterrupted chunks of code. I would also have to include the navigation and footer separately for the same reason. With nunjucks the code I write for each new page has been reduced down to just the body content.

codescreenshot1

nunjucks code for the index page

codescreenshot2

snippet from the nunjucks layout code

Another advantage to nunjucks is that I can preview my website without having to run a server, php of course is a server side language so in order to view the site you need to run it on a server. The workflow is much easier for me with nunjucks. I have just barely scratched the surface with can be done I know, but I look forward to learning more as I move forward.

The tutorials that I looked through were:

Nunjucks: A JavaScript Template Engine – Medium.com

How to Modularize HTML Using Template Engines and Gulp – Zellwk.com

I have started a github repository for this project located [HERE].

A live version of the site can be found [HERE].

Here are some screenshots of the site so far:

screenshot2screenshot3screenshot4screenshot1

Mama Mia’s Pizzeria Stage 3 – Design

This is just a quick update on the Mama Mia’s Pizzeria project. I quickly started throwing a homepage design together using Adobe XD. I tried to stay with the same feel that the site already had, but a little more modern and clean. I still plan to work on updating the logo a bit.

Web 1920 – 2

Version 1

Web 1920 – 2

Version 2

I used the colors from the logo as inspiration for the header and I replaced the mostly empty body of the page with a gallery, which will rotate through photos and specials/information. This allows more information to be placed on the page without overwhelming the user. I also removed a lot of the extraneous links in the body of the page as they seemed unnecessary with the top and bottom navigation.

I’ve added more information to the footer, as well as a box to subscribe to the newsletter that I’m planning to add. You can also see the added social media links in the top right corner. New to the navigation is the about and contact pages, and the coupons and photos pages have been removed.

I will continue to tweak this design, and begin laying out the designs for the other pages as well. They will all have the same basic layout with the same header and footer for consistency.

Mama Mia’s Pizzeria Stage 2 – Research

To begin the second stage of my website redesign for Mama Mia’s Pizzeria I pulled up the websites for several other pizzerias around me. I picked other small family restaurants, like Mama Mia’s, as well as some small and medium pizza chains. My goal is to find what information other pizza restaurants are including in their sites, how they layout their pages/navigation, and the general design style that they tend to follow.

Using an excel spreadsheet I made a chart showing the different pages each of the sites have. Obviously every site has a homepage, and they all had menus in one form or another. The majority of the sites also had a locations page, even one that only had one location. One feature that a lot of the sites have that Mama Mia’s does not is links to their social media pages. Seven out of the nine pages I looked at had social media links. Of course many of the sites had pages about their restaurants, and the option to order pizza online. Almost all of the sites used a third party service to offer online ordering.

The bigger chains generally had information about jobs, gift cards, and catering, while the smaller restaurants did not. About half of the websites I looked at had a newsletter that customers could sign up for receive news and special offers. I only saw one other site with coupons directly on their webpage like Mama Mia’s.  Another page that most sites didn’t have is a photo gallery. Most sites incorporated photos throughout the other pages on their site, or included a photo gallery on the homepage. I think that this would be a better option for Mama Mia’s. This would add more content to the sparse homepage and remove the current dysfunctional photo gallery.

Looking at this information I think it would be beneficial for Mama Mia’s site to add a contact page, social media links, an about page, and a newsletter. I think the addition of a newsletter should remove the need for coupons directly on the website. Instead they should have rotating specials that are sent directly to consumers who sign up for the newsletter.

pizzaresearch_27475_image002

One thing all of the sites have in common, of course, is the menu page. Mama Mia’s is the only site I looked at that only offers a PDF of their menu. The other sites offer either a web-based menu, or a web-based menu and the option to download a PDF. Offering a web-based menu is especially helpful for those on mobile or slow internet connections, because it takes a lot longer to load a PDF file than a webpage. A web-based menu can be navigated more simply by adding links to specific sections of the menu. I think a web-based menu would be a good addition to the Mama Mia’s Website.

pizzaresearch_27475_image004

Another thing I looked at across all of the sites is the colors that were used. Mama Mia’s is primarily black, white, red with accents of green, and gold. As you can see in the following pie chart many of the sites I went to also used black, white, and red as their primary colors. Many of the sites also use green and/or gold as accent colors.

image012

Seeing this information I that sticking with the same basic color palette should be fine moving forward.

Given this information I feel confident in moving forward with the site redesign for Mama Mia’s pizzeria. To recap my findings:

I would like to add:

  • Contact page
  • Social Media Links
  • Newsletter
  • Web-based menu
  • Photo gallery to homepage

And I would like to remove:

  • Coupons
  • Photos page

I would like to keep the same color palette, though I do plan to modernize the design and branding.

Mama Mia’s Pizzeria Stage 1 – Assessment

For my first portfolio project I am going to be redesigning the website for a local restaurant. Mama Mia’s Pizzeria in Anna, TX is your typical pizza place, with offerings of pasta, subs, salads, and of course pizza. I love their food, but their website leaves something to be desired.

The first step in this process is to take a look at the original website.

 

The website currently consists of three pages and a link to a pdf file of their menu.

Pages:

  • Home
  • Photos
  • Locations

The home page has the phone numbers for the two locations, a link to a pdf file with some coupons, and multiple ways to get to the other two pages. I created a webflow diagram to get a sense of the current flow of the website.

Website Flowchart - New Page (1)

In this diagram I broke down the different content on each page, as well as how the navigation flows from each page. Navigation to a new page is indicated in the orange/red color, and the dashed lines indicate pages that are the same location.

The current site does not contain very much information and is fairly simple, but looks very dated and does not function as well as it could.

Some improvements that could be made:

  • Modernize website appearance
  • Improve the branding
  • Either reduce the number of pages, or add more content
  • Improve the current photo gallery implementation (currently displays thumbnails of images, but they cannot be enlarged)

At first look these are some things that I think could improve the website. The next step in my process will be to look at some other pizza restaurant websites and see how they have approached their design.