Paper Dear Website
Prototype Improvements
After conducting the first round of user testing and analysing the survey results, I found that improvements were required for readability of text, search form placement and the navigation and buttons on ‘desk’ devices.
Headers & Footers
Due to the number of pages on the website (28), when making any changes, it would require that I update each page individually. Because this would take a lot of time and if I needed to make further modifications, I decided the best option would be to include header and footer files into each page.
The easiest option would be to convert all pages to PHP and use includes for the header and footer. However, because the requirements of the brief are in static HTML, I have to look for an alternative.
I conducted research online and found several options where jquery and javascript could be used to include files with the ‘load’ function. I found a solution in an answer to the question ‘Make header and footer files to be included in multiple html pages‘ on Stack Overflow.
Solution
- Created header.html and footer.html files
- Edited pages to include jquery load function. Because each page needed to have a <head> (for title and js) I kept this on each page and had the main HTML header content below (inside body).
- Copied header.html and footer.html and placed in folders (for categories, posts and styles). Because content within a folder needed to call explicitly to the main folder these files had slight modifications to file locations.
Navigation
One of the biggest problems that I received a complaint about in the user testing survey was problems with the navigation on desk devices.
In the prototype, I had hidden the menu on by default. It required the user to click or tap on the button to show the options. While this worked well for Palm (mobile) users, it demanded extra action for Desk visitors which was not convenient.
Solution
To solve this problem, I edited the way the menu was styled by placing it in a new section under the logo (and search form). Providing an easy way to click on pages and drop down menus. The menu on Palm remained mostly the same, with a few CSS changes to make it look like it was part of the header section.
Search Form
Another concern highlighted in the survey revealed that the search form in the footer was not easily found, especially for those on ‘palm’ devices.
To correct this problem, I decided to move the search form into the header of the site. Above the menu on palm devices and next to the logo on lap and desk.
Solution
Added search form into the header, which is displayed before the menu on Palm and beside the logo on Desk.
Skeleton Grid
I found that when resizing the layout, it would often become very squashed around the 550 to 900-pixel range. I found that these sizes would look better to function with the mobile design and decided to alter when the grid activated in Skeleton. These changes should also help with the readability of text!
Solution
- Opened the skeleton.css file and went to the Grid section.
- Changed the container class to a max-width of 960px.
- I then changed the media query to a min-width of 960px.
- Checked the website to ensure that anything below 960px showed the Palm version with a ‘single column’ design.
Footer
I had one complaint about the footer and the fact the text did not match the logo. Because I had also moved the search form into the header, it required a few changes.
Solution
- Opened the footer.html file and edited the first column with the Paper Dear title. Replacing the text with the logo.
- The size of the logo looked good on Palm, but too large for lap and palm. I went into the CSS and added a footer class for img in the media queries for min-widths of 550px to a maximum image size of 60%.
- Changed the search form in the footer to a subscription form, added a small paragraph to describe the feature.
Style Changes
I created further changes to the website which are reflected below.
- Removed upper casing on h2, h3, h4, h5 and h6 headings. Also changed letter spacing from 0.1em to 0.03em.
- Removed footer h4 style which used the Raleway font. It now uses the default style.
- Removed border around featured posts. How shows image above and white box with title and date below.
- Added padding on the bottom of the imagecaption class.
- Added overflow: hidden to the pagecredit class for posts, so that the author image would not venture outside the box.
- Added a transition effect on buttons.
- Added a border radius to page images.
- Changed icon on links page for shops.
- Used a new image for texture on backgrounds. Edited in photoshop to have a transparent effect.
- Reduced border radius on featured post content overlay (over the image).
Adding Content
Post Pages
I began the process of adding content to the website by sources images and information from stationery stores and made seven posts starting from the 14th of September to the 9th of September. Each post contained information about the store, images, a quotation and links.
Home Page, Category, Style & Archives
When all posts were created, I then included similar or latest posts within each entry. I also added posts to the home page and relevant category and style pages. Finally, I added each post title and link to the archives page.
About, Links & Contact
Next, I moved on to the about, links and contact pages. The about page included information about the site and its intention. The links page contained links to stores and designers featured in posts. The contact page had a brief introduction with instruction to use the form and links to social media accounts.
Privacy Policy
To create a privacy policy for the website which followed Australian legal requirements I searched for a privacy policy templates in Australia. I discovered the Privacy Policy Template [doc] created by Business Victoria which acts as a guide and complies with the Privacy Act 1988. I adapted the document to include the correct name and details. I also found that Shopify had a Privacy Policy generator but did not use that one.
Terms of Use
To create the Terms of Use page I conducted an online search to look for a relevant template. I found that Shopify had a Terms and Conditions generator which allowed you to enter your information to generate custom terms.
jQuery Plugins
Functional Search
To ensure that the search form would work on the website I researched ways to implement search into static HTML pages. I found Tipue Search which uses jquery and allows you to index your site with direct input (with modification to the tipuesearch_content.js file).
Steps
- Downloaded Tipue Search and moved files into a folder called js/search
- Included script files in the head of the document
- Placed new search form in header
- Modified tipuesearch_content.js to include all post content and relevant pages
- Applied styles to the search results page (including results and errors)
- Updated all pages with new script inclusions and search forms
Contact & Subscribe Form
To create the contact form I first researched ways to use only HTML and Jquery. I found that it would be tough to do this and the best way would be to use PHP. I followed a tutorial PHP Contact Form: Create Forms Using HTML & PHP and used this method for both the contact form and the newsletter. I modified all fields to ensure they were appropriate to each form.
Because the form cannot be tested on the computer and requires a server connection, I uploaded the files to ensure it worked as intended.
I found that I had trouble with the newsletter form because of placement in a footer file, which is an extra include into each page. When testing on a full page, the form did work. To resolve this problem, I created a new page for the newsletter subscription, with a button link in the footer. It also allowed for a name field to be used.
Prototype Screenshots
Home Page
About Page
Post Page
A live version of the prototype can be viewed here. (For futute reference in case of a dead link, please refer to screen shots above. 😬
Activities
For week 9 I created a test website for a photographers portfolio. I included a number of jquery effects and transitions to make the content more engaging. The website can be viewed here or from the screenshots below.
