Small business site: revisited

Emma.Axelsson  

Analysis of the original site

I was mostly happy with the results of my first submission of the small business website – I liked the final colour scheme and how the images I chose fit into that, I finally settled on the typefaces I wanted, and overall I liked my simplified layout compared to my original, more ambitious plans. I also used floats and flexbox for the layouts, the former of which I was not comfortable with at all when starting the site so it was a useful learning experience getting to grips with them. However, some of its immediate drawbacks are its lack of responsiveness due to its fixed width layout, and some of the layout’s spacing feels just a bit off. Some feedback I received also suggested that the site could do with a bit more branding/personality – which I agree with. Though the design ‘worked’ as a whole, the end result did feel a little flat.

Changes

The site is now built with a responsive layout, as I worked with a mobile-first, content-out approach. I wanted to use CSS grids this time around, and I ended up using less of it than I originally thought as its only inclusion is on the teams section of About Us at the biggest breakpoint size. The rest of the site primarily relies on flexbox, which I think works well given the overall simplicity of the site’s layout even at the larger screen-widths. The starting point is a minimum viewport of 375px, and reaches a maximum width of around 1100px, so that the design does not look comically large/stretched on larger viewport.

I’ve now also used PHP includes for the header and footer, which was particularly helpful for my workflow in the context of my extended footer, as the PHP include file gave me just one source to amend things from as needed. I also added some smart navigation in the header, whereby the link will not be added to the HTML if the user is already on that page. There’s even a little extra PHP on the ‘shop’ page – the ‘Offers’ section has the month displayed through the date() function. This means the month will automatically be updated – it will be up to my pretend business owners to update the actual monthly offers, however… I really enjoyed learning about PHP for this project, and if I was given yet another chance at the site, I’d probably try to figure out even more ways of including it!

There is now a custom 404 page for the site, rather than the generic one from my overall portfolio site. This is the only page that does not use the header and footer includes, as I felt that overloading the user with more navigation options (particularly with my extended footer and all its content!) when they might already be feeling confused or frustrated was a potentially bad idea. In its place, the 404 page has a simple list of links that mirrors the navigation, including its access keys, and the logo and title retain their link back to the home page in case users remember that behaviour from other pages.

I used some Javascript to add a message about whether the shop is closed or not – it took me a while to figure out the right sequence of operators, and to check that it was indeed showing the right time on the right day! I used JavaScript rather than PHP so that it is based on the user’s device time, rather than the server itself as it would had I used PHP. There is also a back-up if a user were to have JavaScript disabled or unavailable on their device – if so, a user would see a link that says ‘Check our opening times’, and when clicked on, it takes them to the opening times listed within the footer.

In terms of SEO, I took another look at my title tags and copy to ensure that I had made use of reasonable keywords without spamming it into the content and/or making it sound unnatural. I also revised some of my meta description tags, and customised them for each page. I concentrated on the description and title tags as based on the advice suggested by moz.com, and left out other tags such as keywords, author and so on as it is now considered that they generally make little valuable addition to the SEO of a site, and generally just take up space! I also added a robots.txt file to stop robots from crawling particular folders, such as the includes and errors folders.

My aim was to incorporate accessibility into my design thinking whilst working on this second version of the site. This included adding access keys so that users can skip to the content or navigation, or even a specific page more easily, as well as adding focus states to my pseudo-states for my links. I added an accessibility statement page, with a reference for the access key and how to use it. Because I used semantic HTML, I did not add ARIA roles as my content is already being accurately described by the elements I have chosen. However, I followed Leonie Watson’s pointers on adding a title, description and role (and indeed, using SVG – see her first point on the article for more information!) to my SVG logo to improve its accessibility.

I removed the fontawesome icons I used in the last version of the site for my social media icons in my footer. Having read further on the potential complexities of icon fonts, and making accessible links and icons in general, I ultimately decided to make them plain text links. The social media links – or icons – are not essential to my design nor are they particularly important in relation to the rest of the site’s content, so this seemed the most sensible approach to me in the end.

I also referred to a colour checker, where I discovered that some of my choices were failing in terms of meeting the minimum WCAG standards. I did make some minor swaps for some links in the <main> sections to resolve this, but the main change was in brightening my chosen orange from #C4802B to #d8851d to ensure that it kept a good enough contrast, particularly against the dark background-colour used in the header and footer.

I didn’t like this stronger colour much at first, but I’ve slowly come round to it – it’s quite a bit bolder, but since I’ve used the orange colour in such few places, I think it still works well and has ended up making the colour scheme look a little less gloomy than its predessor, even if it’s only a subtle change.

In terms of adding a bit more personality and thinking about branding more generally outside some of the changes I’ve already discussed, I found this the most difficult part – likely because I had already established quite a particular design, colour palette and so on, and I didn’t want to throw that out of the window just for the sake of it. However, I did add a logo for the site – I had worked on one for the previous iteration of the site, but never settled on a design for upload. I went through several options, including but not limited to several types of bottle caps, a collection of drinks bottles and cups, and even the sillohuette of a badger at one point! I finally decided on the birds-eye view of a simple bottle cap. I felt that this suited sitting against the title/name of the site, and its font, ‘Oswald’, the best, without trying to compete for attention with the other elements on the page. It also was the one that worked the best even at any size, as the drinks bottle versions in particular were hard to understand clearly at a small size. However, I did add some letter spacing to the H1 so that it all felt a little less claustrophobic.

404 page showing the new logo in the header, and simple navigation options beside an image in the main content.

I also added the logo as the favicon of the site, so that it shows up in the window’s tab. I did play around with adding some other things, such as trying some different background styles – gradients, textures – and even a sticky/fixed header, but I decided against these in the end as I felt they detracted from the visual experience more than they added to it. I did try to add some more personality to the copy through its tone of voice and wording whilst making general amendments with SEO in mind – the aim was to make the copy (and from there, the site in general) come across a bit more friendly, conversational, and maybe a bit humourous (like with the image choice on the 404 page and the Contact Us copy) and I think it does come across a little less robotic/formulaic this time round.

Some examples of copy changes
Copy changes for Contact Us

Be the first to leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *