Tutt'a Post' Trattoria - Neapolitan for "It's All Good"
These are screen captures from four of the principle pages. The site was designed along side the owner of the restaurant. The owner is Daniele Morra (in the top-left corner of the About Page). We were operating under certain stringent limitations and we were quite happy with the results. The site is streamlined to perform well with limited signal strength. We anticipated that most site users would be accessing the site via a hand-held device, with the decided majority being smart phones.
The drop-down menu for the Menus is a basic Bootstrap component. We modified the component to accommodate the different brand images of the 'app' driven independent delivery services Daniele does business with. The menu at Tutt'a Post' Trattoria is authentic Neopolitan and I'm sure you'll agree with me that the food is Fantastic!
Check them out at Tutt'a Post' Trattoria - Neapolitan for "It's All Good"
Check out the site here: Brunello Trattoria - Tell Bruno that Chris sent you!
Chris Schiotis' Portfolio Site
This is a screen capture from the initial concept for this site. I spent some time developing it and mention/show it here to open the conversation about 'flexbox'. The new CSS3 display module (actually the first draft was published in 2009), makes page layouts like the one shown above possible without using any floats or percentages. I was eventually compelled to organize the different categories of work, but am still using Flexbox throughout the entire site. Almost all of the site navigation on all of the pages utilizes Flexbox.
The diagram shown above represents the basic html structure of the various 'project' pages. Diagrams such as this are the language of front-end development and are vital for collaboration and project sharing.
User Interaction Diagram
This image above shows the code structure for the home page navigation.
Below is a div tag diagram showing the same structure.
Here is an example of that interaction:
The 'fade' magic is of course associated with the css. There is a different :hover class on the <img> and <p> elements.
Interactivity should be interesting and compelling. It should draw the user in to explore the experience of the website where it is deployed. It is not just about selling things, although the 'internet of things' is wonderful for that... Interactivity is the experience that occurs as the site visitor uses the site. It should be very interesting!