Small Business Website Revisited


My initial small business site for the Design for Web Content module is linked below. The site is based on a hypothetical vintage fashion store based in Kent. I wanted to give the site a 90’s grunge vibe in the design and display it in a grid reminiscent of Instagram to appeal to the target audience of the business.

Original Site:

The HTML and CSS of the site was not consistent in its layout which is something I have improved upon in the new version of the site. I have also made better use of commenting in the code to make it easier to understand and navigate myself and for others.

I wanted to improve upon the visual design of the site as the use of so many borders made the site look quite ‘boxy’ so although I have kept the grid layout on the new site I feel it looks more relaxed and the introduction of some more colour makes it more visually appealing as well.

Revised Site:

The site was not responsive so I have added media queries so the site can be viewed across all devices. I have also added a responsive navigation that can be viewed on a mobile. I have also added a couple of UX features including a custom error page, URL redirects and a favicon. I also added landmark roles for accessibility.

I have implemented some Javascript into the site to indicate if the store is open or not and I have also applied some modularity with PHP server-side includes for common page elements including the header and footer.

There was no SEO strategy in place on the original site so I have implemented multiple things to improve this such as adding meta descriptions, making better use of headings and improving keyword strategy. I have also added sitemap.xml and robots.txt files.

Tips on Measuring and Improving Page Load Speed


What is Page Load Speed

“Page speed is a measurement of how fast the content loads on your page” (Moz, 2018).

Why is Page Load Speed Important?

Page load speed is important for SEO as it effects your google page rank and it also means that search engine crawlers can crawl fewer pages within their allocated budget which can negatively affect your indexisation.

It is also important for user experience because users expect pages to load quickly and they will not wait around with so many other options available to them elsewhere. According to Site Up Time, users wait no longer than 3 seconds for a page to load and half a second difference in load time can make a 10% difference in sales for online retailers.

47% of consumers expect websites to load in two seconds or less — and 40% will abandon a page that takes three or more seconds. A one-second delay in page load time yields:

– 11% fewer page views

– 16% decrease in customer satisfaction

– 7% loss in conversions

(The Daily Egg, 2018)

According to Shout Me Loud if an ecommerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5m in lost sales every year.

Mobile vs Desktop

Overall people expect a similar performance from their mobile device as their desktop. Although they do generally have a lot more patience with their mobile device. According to a Shout Me Loud survey 31% of people said that they expect load times on their phone to be a bit slower but 25% they expect load times on their phone to be almost as fast and 21% said they expect them to be about equal.

However, in response to how long they would wait, 30% of people said they would wait 6-10 seconds, 30% said they would wait between 11-20 seconds, and 20% even said they would wait 20+ seconds.

How do we optimise page load speed?

Enable Compression

You can use software applications such a Gzip to reduce the size of your HTML, CSS and Javascript files.

Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resources. (PageSpeed Insights)

You can run a compression audit on your site using resources such as GIDNetwork to check compression on your site

Optimise Image Sizes

Ensure images are no larger than they need to be by optimising and compressing them using software such as Photoshop.

Also using CSS Sprites for icons combines multiple images into one, reducing http requests and meaning users don’t have to wait for multiple images to load 

Minifying Code

Minifying your code can dramatically improve your page speed. You can do this by removing unnecessary spaces, line breaks, comments.

Also ensuring you have removed any redundant code and using shorter variable or function names.

There are various plugins and other resources you can use such as HTMLMinifyer, CSSNano  and UglifyJS.

Browser Caching

Browsers cache a lot of information (stylesheets, images, JavaScript files, and more). This way the browser doesn’t have to reload the entire page each time a visitor comes back to your site.

Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content

Be aware:

Make sure you set an expiry on your cache. Depending on how static your content is, some files could be anything between a week or a year.

How can we cache?

For WP sites you can use a plug in like W3 Total Cache to easily enable caching.

For static HTML you can enable caching in your .htaccess file

DOM

When you use Javascript in your webpage either put it in a separate file to your HTML or put it at the end of your HTML document before the closing body tag. 

This means that the browser can execute the DOM and parse the HTML to render the page and the user doesn’t have to wait for it to execute the scripts before the page renders.

And also always save your CSS as an external file so that the styling doesn’t have to load for every page.

Content Delivery Networks

Content delivery networks, are networks of servers that are used to distribute the load of delivering content.

Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.

Improve Server Response Time

What effects server response time?

Site traffic, resources used on each page, software that the server uses, hosting solution used, DNS lookup

How can we improve it?

Look for performance bottlenecks like slow database queries, slow routing, or a lack of adequate memory and fix them. The optimal server response time is under 200ms.

DNS Lookup

What is DNS Lookup

One of the biggest factors in how quickly your page loads is the amount of time your DNS lookup takes.

A DNS, or domain name system, is a server with a database of IP addresses and their associated hostnames. When a user types a URL into their browser, a DNS server is what translates that URL into the IP address that indicates its location online.

A DNS lookup, then, is the process of a finding a specific DNS record. You can think of it as your computer looking up a number in a phone book.

How do we improve it?

The amount of time this step takes depends on how fast your DNS provider is. If not, it may be time to switch to a faster DNS provider.

You can check out this DNS speed comparison report, which is updated monthly, to get an idea of where your provider compares to others

Minimise HTTP Requests

You can use Google Developer Tools to establish how many requests your site currently makes. From there you can reduce the requests by removing any unnecessary files. You can also combine your files for instance if you have multiple css files or multiple JS files you can combine them into one to reduce the http requests. Plug ins such as WP Rocket can make this process simple

Reduce Redirects

Some reasons for redirects:

  • To indicate the new location of a resource that has moved.
  • To reserve multiple domains, allow for “user-friendly” or “vanity” domains and URLs, and catch misspelled/mistyped URLs.
  • To add a trailing slash to URL directory names to make their contents accessible to the browser.

Why we need to reduce them:

  • Trigger additional http request cycles which slows down your page speed

How can we reduce them:

  • 301 permanent redirects – search engines will update their indexes so they don’t have to keep redirecting  

Testing Tools

Google Pagespeed Insights:

free tool from Google that runs a performance test on your site and provides recommendations on how to increase performance.

Pingdom:

Has a number of useful features. It tracks your website’s performance history, makes data-driven recommendations on how to improve the website speed, and generates easy to understand reports.

Yslow:

Also provides recommendations on how to improve the performance of the page, draws statistics, and summarises all components.

Performance Budget Calculator:

Free tool that helps figure out what type of content you can use to keep your site running optimally.

More tools:

  • WebLOAD
  • LoadUI NG Pro
  • SmartMeter.io
  • Tricentis Flood
  • LoadView
  • Apache JMeter
  • LoadRunner
  • Appvance
  • NeoLoad
  • LoadComplete
  • WAPT
  • Loadster
  • LoadImpact
  • Rational Performance Tester
  • Testing Anywhere

References:

SITE UP TIME
https://www.siteuptime.com/blog/2017/11/21/speed-matters-theimportance-
of-website-performance-testing-tools/

PAGE SPEED INSIGHTS
https://developers.google.com/speed/docs/insights/EnableCompre
ssion
https://developers.google.com/speed/docs/insights/LeverageBrows
erCaching?csw=1
https://developers.google.com/speed/docs/insights/MinifyResource
s
https://developers.google.com/speed/docs/insights/BlockingJS

GOOGLE WEBMASTERS OFFICIAL BLOG
https://webmasters.googleblog.com/2010/04/using-site-speedin-
web-search-ranking.html

MOZ
Ygoalhttps://moz.com/learn/seo/page-speed

GT METRIX
https://gtmetrix.com/minimize-redirects.html

SHOUT ME LOUD
hhttps://www.shoutmeloud.com/why-you-should-focus-on-pageload-
speed.html
https://www.shoutmeloud.com/what-is-cdn-content-deliverynetwork-
benefits.html

THE DAILY EGG
https://www.crazyegg.com/blog/speed-up-your-website/

What I learned – Week Six

Images & Colour

Fistly we looked at images and their different raster formats which include: jpeg, GIF, png-8 and png-24. We looked at their different colour depths and how jpegs and png-24 are true colour so can display around 16 million colours and gif and png-8 can display 256 colours. The file formats with the 256 colour paletted are not good for photographic images as they use dithering to simulate the additional colours.

Each of the different file types have a ‘killer feature’. Jpegs have variable compression, gifs have frame animation, png-8 is smaller in size than the equivalent gif, and png-24 has alpha transparency.

In terms of wha the different formats are best used for: JPEG is best for photographs, gifs are best for simple graphics or animations, png-8 also for simple graphics, png-24 is best for complex graphics (photo and line art).

We were also informed on scalable vector graphics which use vectors (coordinates) rather than pixels and are thus infinately scalable without degrading the quality in any way. They can also be embedded directly into html rather than linked as they are written in xml.

We discussed image positioning and how you can use css floats to place the image to the right or left. We also lookedat placign them in the centre of the page and using background images.

We then moved onto colour and how certain colours work in harmony together and others clash and how colour contrast is important to accessibility.

We looked at how to specify colours in CSS. They can be specified by name, hexidecimal or rgb value.

We discussed how to build colour schemes. Monochramatic schemes are built with one colour with the simple adjustment of the saturation and hue to create different shades. And we learnt how you can use images to create colour schemes using the colour picker.

We then moved onto colour theory and looked at the different colour schemes you can build including analogous, complementary and triadic.

We went through some useful online tools including colour calculator, paletton, coolors, palette fix. We also looked at how you can use illustrator to build a style guide for your web sites and check if they are accessible for people with colour blindness. Here is some of the colour inspiration for my Introduce Yourself project that we are currently working on.

styleguide created on illustrator colour inspiration and palette created on adobe illustrated

 

What I leared – Week Five

This week was all about typography and we learned how much of an important component of web design it is. We learned about how it is used to reinforce the meaning of text and is for the benefit of the reader, not the writer.

Typography is not just about chosing a typeface. It is about how that typeface is used in terms of size and colour, line height, letter and word spacing and general layout. All of these things can be controlled in CSS.

We learned about how you can access more fonts on the web with services like Google Fonts and Typekit. Google fonts are open source fonts so don’t require any other licences but other services may not be the same.

We then talked about how typefaces are classified.  They are either serif or sans-serif, although there are other types that are less commonly used. They are also designed for body text or headings specifically . Google Fonts has 5 categories: Sans Serif, Serif, display, monospce and handwriting .

We compared print and online  typefaces and how sceen typefaces have larger x-heights to improve how they render on screen and thus their readability.

We looked at choosing the appropriate typefaces for different situations and typeface combinations; how many to use and how to marry them up.

We then looked at how to use CSS can help or enhance typography on a website and the diffent selectors and pseudo selectors that can be used.

We discussed the different units that can be used icluding px and % and typographic units such as em and REM.

At the end of the class we completed a timed CSS type task where we took a section from Mike Chimero’s Designers Code of Ethics and put it into an html file and styled with CSS, thinking specifically about typogrphy. Here is what I produced:

image of the timed task completed in CSS

 

What I learned – Week Four

This week it was time to move onto CSS – The Presentation Layer!

We talked about what CSS is: Cascading Style Sheets – separating content from presentation.We also talked about why it is so useful and how it works.

We learned about style rules, declarations and selectors and how you can have multiple declarations and group selectors. We discussed how you can use class selectors to style elements and how you can ue pseudo-class rules.

We learned how you can add your css to your html and how the best way is to link an external stylesheet.

We went on to learn about the span and div tags and how to structure the page with div.

Next we went on to disucss the CSS Box Model and how this is made up of different parts: padding, border and margin. And also the other option of the box-sizing option that can be used in CSS3.

We learnt about colours in CSS and how these can be specified in different ways: RGB, Hex, RGBA & HSL. Then we discussed fonts in CSS including font families and font stacks.

We also talked about inheritannce and how some properties are inherited by child elements from their parent and others are not.

We were also taught that there is a way to remove the default browser settings called a CSS reset which is useful as it is better to not mix your own settings with the browser settings as visual results could vary between browsers.

 

 

 

What I learned – Week Three

This week we learned more detail about html. We discussed the history of html and the journey it has been on to get to where it is today. We talked about its purpose which is to add structure to documents and meaning to content.

We  learned more about elements attributes and values and the right way to use them in practice. We then talked about stucture and reationships in html and the different sort of elements such as block elements, inline elements and parent, child and sibling elements.

We discussed correct use of semantic markup and how it shouldnt be used to change the presentation of the document, only the meaning!

We then went onto discuss how to make links including external links, links within the website and image links and talked about the different between absolute and relative links.

We discussed common structural elements such as headings, lists and tables then we went into how to actually write the html, looking at indentation, syntax and comments.

Lastly we went over folder organisation and website structure.

 

 

What I learned – Week Two

This week we learned more bout the histroy of the the web and internet and the difference between the two; the internet is the infrastructure and the web is the protocol.

We discussed how the ‘world wide’ web isn’t actually world wide and how a ‘content out’ approach makes it more accessible for everyone who isn’t viewing the content on a modern device.

We then dicussed design generally, looking at different objects including a ‘laundry liquid delivery vessel’. We looked at different elements of design and discussed the thought process behind it.

Next up we looked at some design principles such as Hicks Law and the Expectation Effect.

We then were informed of some thought leaders in the industry such as Jeffrey Zeldman, Eric Meyer, Rachel Andrews, Lea Verou, Anna Debenham, Jeremy Keith and Dave Shea amongst many others!

Examples of Good Websites

Netflix

Netflix is a paid streaming service that shows a wide variety of TV shows, movies, documentaries, and more.

Why is it a good website?

  • Clear and easy to navigate from log in to clicking play  on chosen show
  • Categorised in a great way – eg. continue watching, popular on netflix, ‘because you watched ___’, comedies, top picks for you, crime investigations, etc
  • Wide variety of things to watch attracting a vast audience
  • No advertisements because its a paid service which makes it efficient and smooth running to use
  • Everything is very immediate unlike some streaming serivces – you press play and it plays and doesnt stop to buffer etc which is frustrating when trying to watch something
  • It is personalised to the user as metioned in the categorised point. It pays attention to what you watch and makes suggestions based on this so it feels very intuitive to the user
  • It has lots of original content with its original series and films which you can’t find anywhere else
  • The interface itself displays the tv shows and movies etc in a great way visually and when you hover your mouse over each one it starts showing the trailer or a clip
  • It is simple and easy to use for anyone and everyone

Topshop Careers Website

topshop careers siteThe Topshop Careers site is where someone go to apply for any jobs at topshop or topman but the site does so much more than that, giving the user a real insight into the company culture and providing inspiration.

Why is it a good website?

  • Knows it’s audience and provides visuals that are inspirational and exciting to that target audience
  • Takes the user on a journey through their history, how they have become a fashion authority, through to the culture in their stores and offices and what it will be like to work their – leading you nicely to their positions and how you can apply today
  • It is a great example of a user journey delivering exactly what it wants to the user and also delivering what the business needs from the website – attracting the best talent
  • They have an apply now button and a job search button in the top right corner of the screen at all times – never forgetting what the site is there for and catching any user mid reading about how fabulous the company is and ready to find their ‘dream job’
  • Other routes encouraging people to apply – they have a breakdown of each head office department – what it is like to work there and what the roles are like then on he same page it has the live roles so you can apply then and there
  • To sum up it is an incredibly intuitive and inspirirational careers site which is rarely ahcieved by other retailers in my opinion. The site is beautifully pieced together and really captures who the brand is visually

Samsung

samsung website

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The Samsung UK website is there online store where they can showcase and ultimately sell all of their products.

Why is it a good website?

  • The layout is clear with a menu along the top outlining which products they sell so it is easy to get to the category that you are looking for
  • The home page is laid out nicely, showcasing latest and best selling products in a way that isn’t too busy and draws the eye in
  • In the top right hand corner you have a support button which is key when you are any retailer but especially electronics.Also at the bottom of the page they have direct links to all different support methods such as live online chat and phone support
  • They have also placed search function which can help shoppers navigate their site even more  getting them straight to what they are looking for.
  • Lots of artsy product photography to inspire the customer throughout the site
  • Bar along the top of product you are reviewing with benefits, spec, support, compare and add to basket – everything you need to know to shop
  • Lots of links to ‘explore’ as well with inspiring images for the customer which will lead to finding products they wouldn’t necessarily have found otherwise
  • More of an online shopping ‘experience’ rather than a quick stop and buy