Chapter five in “PHP The Good Parts” (MacIntyre, Peter B. PHP: The Good Parts. USA: O’Reilly, 2010) explained how those multicompartmental data holders called arrays are constructed and provided a sampling of a number of useful PHP array functions. So what shall the artsycoder do to learn how they all work? Why build another PHP web app of course! With HTML5 surrounding the PHP and a little CSS3 thrown in for good measure…
So far in my posts on the web design process for the responsive site for “Daisy Plates”, an imaginary boutique catering business, we’ve explored how I did research, chose a name, created a logo and selected a color scheme. We have arrived at the final steps in my design process – creating the mockups of the design! Please view part three for more background on how we got to this point.
Step 5: build a mockup for desktop browsers considering tabbing AND Step 6: build mockups for iPad landscape and portrait
I am writing about these two steps together because in the end, they became one. You will see.
First I focused on desktop.
Post three in my series on the web design process for the responsive site for “Daisy Plates”, an imaginary boutique catering business, details creation of a logo and selection of a color scheme. Please view part two for a reminder of how we got to this point.
Step 3: create a logo
Once I had decided on “Daisy Plates” as a name for the business, I set to thinking about the logo. At the same time (and honestly before I decided on the name as well) I really started thinking about the remaining steps of my design process, because they are so intertwined. I decided first that I would limit the site to four main sections based on the services Daisy’s company would offer: Dining, Catering, Bakery and Gifts. I would also need areas for contacting the company, general background info about the company and a news reel.
Welcome to the second post in my series on the web design process for the responsive site for “Daisy Plates”, an imaginary boutique catering business! Please check out part one before we get started if you like.
Steps 1 and 2 of the process were as follows, and together they fit nicely into one post:
Step 1: research similar catering sites
I checked out at least five sites to do with catering, from small companies to larger-scaled businesses.
When I decided that I would like to build a responsive site, I got a bit well…carried away in the site concept! I thought about what type of site might be enjoyable to design and build. I wanted it to be for a business, but nothing too complicated or large-scale, and a bit fun and quirky. I thought it could also involve food, since I’m known to build a creative salad plate here and there and take pictures of it (yes, bit dorky) and thought, hey, maybe I could use those pics! I decided on a boutique catering business.
I made a plan for creating the web design:
I recently completed a series of articles on an ASP.NET/C# web app called “Magic Menu”. Please check out the first post in that series here. It should be noted that this web app was built while studying the book “Beginning ASP.NET 4 in C# 2010” (MacDonald, Matthew. Beginning ASP.NET in C# 2010. USA: Apress, 2010) and uses similar concepts as a sample in the book, as well as some of its code bits and conventions.
Responsive design is a hot topic these days, with many a debate surrounding it. What is responsive design? In it’s simplest form, picture this scenario. When you are at a restaurant with friends and you are all arguing over the name of the band who performed the obscure 80’s song playing overhead, it’s nice to be able to haul out your smartphone and open a site to find whatever you need to find to prove your point. If the site is easy to see and use, then it was probably designed to respond to the environment it is in, whether that is your smartphone or a 24-inch monitor. The site may possibly figure out the screen dimensions it is in and point you to a version of the site that fits your screen. Or perhaps it was built with automatically adjusting elements, like CSS “auto” widths for the page content. Or again perhaps it was designed to switch things up depending on your screen size – show a small logo here, remove non-essential text there, etc. More than likely, it’s a combination of all three! This is responsive design.