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.
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.
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.
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.
speed is a measurement of how fast the content loads on your page” (Moz, 2018).
Why is Page Load
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.
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.
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
Daily Egg, 2018)
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
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?
You can use software applications such a Gzip to reduce the
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 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
Browsers cache a lot of information (stylesheets, images,
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
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
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
Site traffic, resources used on each page, software that the
server uses, hosting solution used, DNS lookup
How can we improve
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.
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
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
Some reasons for
To indicate the new location of a resource that
To reserve multiple domains, allow for
“user-friendly” or “vanity” domains and URLs, and catch
To add a trailing slash to URL directory names
to make their contents accessible to the browser.
Why we need to reduce
Trigger additional http request cycles which
slows down your page speed
How can we reduce
301 permanent redirects – search engines will
update their indexes so they don’t have to keep redirecting
free tool from Google that runs a performance test on your
site and provides recommendations on how to increase performance.
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.
Also provides recommendations on how to improve the
performance of the page, draws statistics, and summarises all components.
Free tool that helps figure out what type of content you can
use to keep your site running optimally.
LoadUI NG Pro
Rational Performance Tester
SITE UP TIME
PAGE SPEED INSIGHTS
GOOGLE WEBMASTERS OFFICIAL BLOG https://webmasters.googleblog.com/2010/04/using-site-speedin- web-search-ranking.html
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.
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:
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.
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.
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
The 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
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