I have spent the majority of this week tweaking small things on my website when I could have been finished many days ago but I have finally settled and submitted because I have an exam in an hour. I am happy with the final submission, the code validates after a small parse error problem, and all pages of the website works in all web sizes. Weeeeeeee.
Minor changes have been made such as text color but layout is the same.
Tested in Firefox 29.0.1 on Mac OS X 10.9.2
Tested on Google Chrome version 35.0.1916.114 on Mac OS X 10.9.2
The major difference between browsers that I have is that my image carousel only works on Safari because I had to remove the browser specific animation instructions in order for the code to validate. It’s not a huge problem because it doesn’t break the page or anything, it is just a nice feature. Aside from this the colors display brighter in chrome, and the font renders slightly smaller (although that could just be me trying to spot a difference). Neither of this affects the layout either.
The client for my assignment is Debbie Lamb who is an independent Stampin’ Up! Demonstrator – she creates greeting cards and craft projects that are ideal to display online. The site I created was a business page for her, as well as a hub for her to display her projects to inspire and inform potential clients. The website is not one that I intend the audience to regularly visit, rather a source of information for the business and for craft projects. The target audience for the site is stampers, predominantly females 18 – 50 years. I wanted to create a site that was very easy to navigate and not overcrowded with information.
The focus of the site is on the pictures so I wanted to make sure they were easy to view in all browser sizes which I have done by placing all of the objects within the page relative to browser size. I created a maximum width of 1800px to ensure that the header images were not over stretched at larger widths. I chose this size because the average screen size is 1366×768 according to TechCrunch so the majority of visitors would see the full screen, fluid web page. Those that have screens larger than 1800px see the page fixed in the middle with an unintrusive, slightly patterned white background which I chose to not distract the user from the main page.
I chose the color scheme of the website to complement colors within the images, so that it did not clash. I used tints and shades of green and pink for most items, including headers, body text and background colors. Pink tends to represent females and so I thought it was appropriate for a predominantly female audience, while including a large amount of green to not overpower the visitor.
I used three major fonts for the website – a bold, uppercase font for page titles within the header image which demands attention (complimented by a handwritten font on the index page), a cursive font to make up the site logo (Pacifico), and a plain, sans serif font (ABeeZee). I chose a variety of fonts because that is a characteristic of craft websites, as craft projects and greeting cards tend to be quite typography focused so it makes sense for the website to reflect this. I ensured adequate font size, line spacing and padding was added to text so that all viewers could read it with ease.
I placed the page titles on header pictures, within shapes as a ‘funky’ website characteristic. Like the header images they are unique to each page to also reflect the different types of visuals that can be done on craft projects and greeting cards. I also utilised borders to separate text and information throughout the site.
I have nearly finished my photoshop mockups. I have completed the index, projects, contact and example project pages.
Even though I haven’t finished my mock ups I decided to start coding what I had mocked up anyway. I have since spent too long in the DM lab and coded 3 pages (!!). Here are a few assorted screenshots for the sake of visual proof.
I’m still changing things around like background colors and hover states and amount of padding and need to finish my final mock up but I’m not too worried at the moment – I want to get everything coded and working so that I have some time to study for my exams. Oh and I need to take / find more pictures so that I don’t have the same one picture repeated. It’s just acting as a placeholder at the moment. Cool beans.