This post is all about testing and some of the problems i came up against. Overall i felt i had a very positive experience when testing my site, any encountered problems where easily resolved, and the process has been a learning curve.
 
I am now testing the Index Page, to make sure it is resizing properly in all browsers. Below shows my results for all three browsers. The results where great as the site showed as it was coded and no quick fixes where needed, which was a surprise. The index page is an important aspect of the site, to make sure it was being show correctly, i decided to test how responsive the layout is by capturing four screen sizes of each browser, the results are shown below.
 

Index Page Testing

 
Chrome
 

 

 

 

 
Safari
 

 

 

 

 
Firefox
 

 

 

 

 

Index Case Issue

 
When coding my site menu i originally thought it would be more unique to have an entire lowercase navigation menu but as i progressed through my build i had been put of the idea and had changed the case to all uppercase, below is the screenshot where you can form your own opinion. In the end i chose to keep the case as uppercase as i felt it was more modern and strong.
 

 

 

Engagement Page Testing

 
As the rest of my site has a consistent feel, i felt it was important to show how responsive the other pages where. I have done this with the same method as above, by capturing 4 sizes of three different browsers. I feel the results below are pleasing as the site is looking as it should in all browsers and my first encounter with media queries has been successful.
 
Chrome
 

 

 

 

 
Safari
 

 

 

 

 
Firefox
 

 

 

 

 

Exhibition Problem

 
While coding this page i felt the content was very long, and by moving the content below the imagery, i also left a feel of inconsistency. So i decided to implement an accordion feature into the content section. This means the user can click the link and the content will automatically slide down, when clicked again the content will slide back and disappear only leaving the link. This is a simple feature that i feel adds to the complexity of a minimalist site.
 

 

 

 

Mobile H1 Issue

 
The below four shots, show you how the site was appearing on my phone, it was great to see that the responsive layout was working, the images where resizing, and the menu looked as it should. But the logo which is listed as an H1 font, was being bevelled therefore doubling up, the apparent problem was the browser was reading it as a faux bold font, when it wasnt, therefore it was duplicating, showing a gap. To fix this problem i added the below code to my media queries. The fourth screenshot will show the fixed safari problem.
 

/*------------------- smaller than 480 -------------------*/
@media screen and (max-width: 480px) {
h1{ font-weight: normal; }
}

 

© Copyright of Alexandra Milne 2013 | Privacy Policy | Disclaimer | Disclosure