Category: Design For Web Content

• &#39 = Single straight apostrophe
• ‘ = Single curly left apostrophe
• ’ = Single curly right apostrophe
• " = Double quotation
• © = Copyright
• — = Em dash
• ( = Opening bracket (
• ) = Closing bracket )

References:

https://www.w3schools.com/html/html_entities.asp

https://www.thoughtco.com/html-code-for-common-symbols-and-signs-2654021

Class 8: What I Learned This Week…

CSS Layout:

Content first and start with the most important that you want your viewers to see at the top before scrolling to less important content. For example with newspapers, they know that it will get folded in half horizontally so the most important piece of news needs to be at the top to grab the viewers attention. Similarly with web pages, you want to make the top part of your page that is visible, interesting enough for viewers to want to keep scrolling.

User’s eyes always start top left because we read from left to right, so important content, such as a form on a holiday booking website, should be located there.

We have now moved away from websites that actually look like a desktop version, they are starting to look more like they do on mobile, such as the search bar centred at the top.

Five Types of Page Layouts:

• Fixed-width layouts – Absolute pixel dimensions for width
• Fluid layouts – Elements given percentage dimensions
• Elastic layouts – Elements using ems to accommodate changing text size
• Hybrid layouts – Using combinations of above
• Responsive layouts – Combination of fluid and media queries

Grid Layout

Area:

Grid-area: 1/1/2/3;

Columns/Rows:

Grid-column: 1;

Grid-row: 2;

Named Areas:

Main { grid-area: main; }

Fluid Layouts

• Percentages instead of pixels
• Fractional layouts usually used for grid layouts: Display: grid; Grid-template-columns: 2fr 1fr;

Class 7: What I Learned This Week…

HTML & CSS Feedback

• It’s a good idea to not use margin in the body section as we can place it with main instead
• Floats can’t be contained as they cause the collapsing parent problem. This can be fixed by using ‘flow-root’ on the parent element
• You can use ‘p:first-of-type:first-letter’ in CSS instead of having to use the span tag in HTML
• You can use ctrl + scroll to test different screen sizes by zooming in/out to see how your work looks
• You can’t use vw/vh as image sizes in html
• Span is an inline element, div is a block element
• It is a good idea to use the line height in the body section, you can alter it for other elements specifically in different selectors so that it can be overridden

Lean Code

It is more considerate to others if you are working in a team, such as a job environment, to keep things in order with commented out notes and simple/no unnecessary code. This is also more sustainable as it uses less energy to load the webpage, less data transferred and less data on people’s computers. Using lean code is more accessible because it makes it easier for assistive technologies to interpret. The nav element acts a div but better as it has semantic meaning as well, therefore it is redundant adding an extra div when the nav already acts as a container.

Advanced CSS Selectors

• Use aria label <nav aria-label=”primary”> if you have more than one navigation section
• nav a:nth-of-type(2) means to select the 2^nd anchor element inside of the nav
• If list is unordered, a[href=”toffee.html”] this is an attribute selector
• nav[aria-label=”primary”]
• Combinator selector is defined by relationship with sibling elements
• Child combinator which selects paragraphs that are direct children of = main>p
• General sibling selector is any paragraph which follows the h2 = h2~p
• Adjacent sibling combinator selects any paragraph directly after h2+p
• Child and adjacent combinator, all paragraphs that are direct children of main following h2 = main>h2+p
• Action pseudo classes = p:first-child selects a paragraph if it happens to be a first child
• Tree-structural pseudo-classes ‘p:last-child’ means all paragraphs that are last children
• p:nth-child(3) selects the 3^rd child of any container, main p:nth-child(3) means the 3^rd child of main
• p:nth-child(odd) are all paragraphs that are odd children. p:nth-child(even) are all paragraphs that are even children
• p:nth-of-type(3) is a tree-structural pseudo-class. Selects not the 3^rd child, but the 3^rd paragraph
• p:nth-of-type(odd/even)
• main p:first/last-of-type selects first or last paragraph in main

Attribute Selectors

• a[href^=”https”] is an <a> element where the href attribute value starts with the string “https”. This is a neat way of selecting all external links
• main :not(p) selects everything in main that is not a paragraph. Applies to direct children only
• :has(p) are all elements containing paragraphs that are direct children (this is not ready for production sites yet)
• h1:has(+h2) selects h1 that is immediately followed by h2. Both are only supported on Chrome so far and again are not ready for production sites

1. https://stpierrebakery.com/

I really love the colour scheme of this brand and website because it is bold and eye catching with high contrast, and matches the fun yet traditional and eloquent style they are creating with their products. The orange draws out the colours of the photographs which have high contrast and saturation, making viewers want to try the food even more.

The use of the orange shade is bold but also brings energy and warmth to the website, making it appear very fun and welcoming whilst still holding onto the professional aspect. Currently the website is making good use of the Halloween styled colours within their theme.

2. https://www.bubblewraplondon.com/

The colour scheme on this website is simple and has a calming effect as the colours are very muted and soft. The colours are burgundy, white and a cream/beige. I think these work well together because they don’t create a massive amount of contrast so is easy on the eye to look at.

They are trying to emulate the different shades you would get in their products to entice you into trying their food. The website is simple and inviting because of the fact that it doesn’t appear very serious. They are using the photos and the typography to grab your attention. I think the burgundy colour works especially well when contrasted with the white background at the footer of the page.

3. https://www.amandadesign.co.uk/

This colour scheme works so well because they are muted versions that are very pastelly and cartoon-ish when mixed with Amanada’s design style. The colours almost remind me of sweets and I love the really clean and simple effect it has.

The main background colour is an off-black/charcoal grey which works beautifully with the white and purple text. It makes it stand out but in a softer, subtler way that is more approachable, the purple text has been used for the most important word, in this instance ‘portfolio’ which emphasises it and creates a bit of personality. The main colours are purple, off-black/charcoal, white and a couple of subtle shades of blue.

1. https://www.brilliantagency.co.uk

Brilliant Agency is a branding and marketing company for food and drink brands, based in Leeds and London. I think the typography works on their website really well, firstly because the colour palate is not only consistent and bold, but bright and fun too. This is a simple but effective design that creates an inviting and friendly atmosphere.

The body of text uses a dark green shade which contrasts well with the white background and smaller pink titles, making it easy to see clearly. The headings are large making it accessible for users with bad eyesight as they wouldn’t need to zoom in to see what each page is about.

2. https://bleed.com/

Bleed is a studio based in Oslo and Vienna that works with their clients in a way that questions the norm and definition of design.

“We continue to blur design, art and technology to create compelling products and services.”

I think they have great typography on their site that is simple but most of all accessible. Black text on a white background makes for high contrast but also easy to read, especially with the use of sans-serif font. Both the headings and body of text are using a large size as well as a nicely sized line height, allowing the surrounding white space to make it clearer to view.

As well as these points, it is also left aligned making it easy for your eyes to follow along without causing extra mental effort or losing your place. I love the use of white space throughout the entire sight as this further helps to draw your attention towards the typography style.

3. https://www.southeasternrailway.co.uk/

I really like Southeastern’s typography because, as with the other websites, it is accessible via having dark coloured text on a white background. Whilst the headlines are in a serif font, the body of text is in sans-serif with plenty of line height space to make it clearer to read. The colour scheme of the logo and headlines/bodies of text is consistent with the brand theme – blue, navy, white.What made me think of their site in the first place was because I was handed a flyer at my local station about the timetable changes on December 11^th. I love this typography design and thought it was really clever how they merged the letter L’s in the word ‘all’ with the date of 11^th. I imagine this was created in such a way not only because it makes it more playful, but it makes the date stick in your mind as it’s a good, memorable design. ‘All change’ also has a nice play on words, like when the train announcement says ‘change here for…’, this is telling you that there will be a big timetable change so don’t forget.

Class 5: What I Learned This Week…

• Advised to avoid using id and class in CSS if possible.
• To keep code simpler and cleaner, you don’t need to use a class for each link to design the buttons.

This week I struggled with my designing of links in CSS as I had one section for the navigation, and a separate section for my module links on a specific page. I didn’t want these to be edited in the same way as my ‘buttons’ as I just wanted them to be simple, recognisable links. I finally found a fix in which I had to declare in my CSS that if a link has a div parent, and that has a ul child, which has a li child, then that particular link (anchor tag) will be designed in this way (nav>ul>li>a). My module hyperlinks were left as a { } and so that rule didn’t apply to them.

On Web Typography

• No more than 2 typefaces should be used
• Good typography reinforces the meaning of the text and what you’re trying to express
• You must remember that what you’re making is for the benefit of the reader, not writer, therefore you need to ensure it is as accessible as you can make it
• For quotes you should change the weight and colour etc.
• Serif font was inherited from print as it is used to guide the eye along line of text such as on a newspaper when the text size is small. This makes it easier to read.
• The Times New Roman/Times font names originated from the Times newspaper.
• Serif is used for headings and sans serif is used for the body to make a contrast and clarity of what they are and what they mean
• The rule to remember for text alignment is that you want a flush left and ragged right.

Hyphen, En Dash & Em Dash

The hyphen is used for compound terms such as ‘check-in’. Whereas the en dash is used to represent a range or connection such as dates and places, 2022-2023. And finally the em dash can replace commas, paranthesis or colons to mark off additional information that isn’t essential to understand the sentence — this is the longest of the three.

Useful References

• The Visual Dictionary of Typography – Gavin Ambrose & Paul Harris
• On Web Typography – Jason Santa Maria

https://webflow.com/blog/typographic-design?utm_source=google&utm_medium=search&utm_campaign=Google-Search-Dynamic-Search-Ads-Core-BBSS&utm_term=aud-936979375321:dsa-1636392187899___585305490218___ss_paid-bb&gclid=EAIaIQobChMIjsOTqcX3-gIVSvZ3Ch19-QUjEAMYASAAEgKFAPD_BwE

Class 3: What I Learned This Week…

Weekly Learning Cycle

1. Teaching – Attend lectures, provides framework for further study
2. Study – Read recommended texts, watch videos, experiment with relevant software
3. Reflect – Make notes based on studies. “What I learned today blog posts”
4. Practice – Complete project tasks on HTML/CSS etc.
5. Feedback – Get feedback in next session, make changes accordingly

This is very self-explanatory and steps that I have already been undertaking, however not always in the same order as this model. For example if there’s something I already know how to do in HTML/CSS I’ve had the bad habit of going straight to the practice work, then studying, and then reflecting on what I’ve learned and expanding on the notes made in class.

I will now follow this structure in order as even if I think I already know something, I could have easily missed something important or misunderstood a section. Also going over what has been discussed in class allows me to retain the information more and form a better understanding, or if we ran out of time and only skimmed over a section then I can find out more detail about it.

HTML Feedback

• Elements such as <br> and <hr> shouldn’t be used for presentational purposes as you can do this later in CSS. It is rare that they are used at all so not necessary.
• First and foremost, don’t use code that you don’t understand. If you see something in somebody else’s code and take inspiration from it, take the time to understand why and how it does what it does first before using.
• “Don’t just make things work, make things right” – You could cheat or be lazy and use techniques that work and won’t throw up any errors, however this would be semantically incorrect and in a lot of instances would make life harder for users relying on screen readers.
• If you skip the h1 element and instead start at h2, not only is this semantically incorrect but it also means that your webpage won’t show up as easily in search engines as SEO uses h1 to decipher what your site is about.
• Height/width attributes in image elements are optional butt should be used by default, they should also be used together or not at all. Not including these attributes makes images load slower on your page because the browser doesn’t know how much space to reserve, causing the page to jump about once loaded which is very annoying for UX.
• The purpose of HTML is to provide structure and meaning – don’t include code if you don’t need it, this just creates a larger file size that the user must download.

What Is CSS?

You can make CSS work within a HTML file, as is what had to be done back in the day before it originated in 1994, 5 years after HTML. However for good practice it should always be kept as a separate file. This makes it much easier to work with when you have to go back and tweak something, it makes your code easier to read and more organised. The first version, CSS1, was recommended in 1996 by W3C.

CSS allows us to progressively enhance the content and user experience as we add this layer, making it much more visually appealing and smoother to navigate. There is greater control over formatting and allows for easier site maintenance – You can place the background colour in the body section at the top so that if you need to go back and tweak it, its not only easy to find but means you’re only changing 1 line of code as apposed to if you did it separately for multiple pages.

For accessibility you can create a dark or light toggle mode to give the user choice and a clearer view of the text depending on what works best for their eyesight.

Whilst I have some previous experience with CSS, I had no idea about the need to reset the browser default styling so that you can start designing from a clean slate. I found this really interesting and will be incorporating it into my styling from now on.

Link to Eric Meyer’s reset CSS: https://meyerweb.com/eric/tools/css/reset/

It is also best practice to acknowledge anyone who’s code you may have used or taken inspiration from, much like with crediting an artist instead of just reposting their work and saying nothing. Not doing this is disrespectful as you’re not the person who’s put all that effort in. In your code you can do this by commenting out a simple ‘thank you to…’ or listing the author’s link. This means it will stay off your live website so as not to interfere with your theme, but when people view your source code they will see it.

Typography

• Oliver Reichenstein wrote Web Design is 95% Typography.
• Web safe fonts is what are already comes installed on your operating system and guaranteed to work on the web.
• Typeface is a design, such as Trebuchet which includes several fonts such as bold, regular, italic. Font is a package in which the design lives.
• Font family is a fall back in case the first, second, third font fail and so on. This is called a font stack. Serif is your system’s default font which all browsers will show as a last resort if the previous fonts fail. All operating systems have a version of this font and therefore it will work for everyone.
• For type design you should use em instead of px – 1 em = 16px. If the parent font size changes, so will the em as it is proportional.

CSS Box Model

• Padding – Creates space around content within element
• Border – Decoration or separation
• Margin – Control over top/bottom/left/right
• The box model applies to every HTML element, block level and inline
• The content depends where you use em or px
• * = Selects everything inside HTML file. The box sizing rule makes sure box model stays fixed. * { box-sizing: border-box; }
• Margin: 20px 20px 20px 20px; – Browser knows the clockwise order e.g. top, right, bottom, left.
• Padding syntax: You can use shorthand notation if the properties for top/bottom and left/right are the same e.g. padding 10px 20px; (as the browser knows the order, it knows that both the top and bottom are 10px, and that the right and left are 20px.
• Border styles: none; hidden, solid; dotted; dashed, double; groove; ridge; inset; outset
• Outline and border are very similar however there is a small distinction. An outline is drawn just outside of the border’s edge. It’s not part of the box model so doesn’t effect the position of the element or adjacent elements.

Colour:

• How many colours do we have access to? 16 million. 256 variations of each colour. This is referred to as true colour because the human eye isn’t capable of distinguishing each one.
• Adobe colour wheel app is a useful app to use because you can create colour pallettes, take references from images, and explore ideas from latest colour trends.
• Shorthand hexadecimal colours can help to optimise your style sheets, especially when combined with shorthand properties and grouping.
• RGB: Red, green, blue. First number measures intensity of red, second measures the green and third measures the red e.g. rgb (255, 50, 22). 0 measures absense of colour and 255 is highest. Absense of all colours is black, all three colours mixed at highest intensity creates white.
• RGBA: Red, green, blue and alpha. Alpha specifies opacity for a colour, 0 is fully transparent and 1 is fully opaque.
• HSL: Hue, saturation and light.
• Hexadecimal – Numbers used on web pages to set colours.
• Hexadeicmal has 16 digits: 0-9 and A-F. The hex system reduces space it takes to store certain information so is widely used e.g. RGB values reduced from three to two digits once converted.

Useful References

• Learning Web Design by Jennifer Niederst Robbins
• HTML, CSS & Javascript In Easy Steps by Mike McGrath

https://tympanus.net/codrops/css_reference/

https://www.freecodecamp.org/news/html-button-link-code-examples-how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/

https://developer.mozilla.org/en-US/docs/Web/CSS/posi

Class 2: What I Learned This Week…

Three Layers of Technology

1. Content – Text & images
2. Structure – HTML
3. Presentation – CSS
4. Behaviour – Javascript

Javascript is fragile so we need to make sure when building web pages that if one of the technology fails, the structure will remain intact, and the site will ‘degrade gracefully’. For example, if Javascript fails then the website should still be functional and styled, it just no longer has certain behaviours. If CSS fails then the decoration will no longer be visible, but the site will still be usable and the content can still be accessed due to the HTML structure.

It is a good idea to provide height and width elements to an image in HTML as this will speed up the loading time of the web page.

Something else I learnt today was that including the reading direction, e.g. left to right, in your code can be very important as different countries will read things differently. An example of the coding for this is pictured below

I already knew about the commenting out function, I’ve used this a lot when I have an issue with my code but don’t know where the source of the problem is. This way, it is easy to figure out what is going wrong and where by commenting bits of code out section by section. Usually this happens with CSS. However, I hadn’t thought about using it to leave myself comments or for others who view my work. This would be especially helpful for something I hadn’t been working on for a while.

Some useful links that helped me to understand more about what was said in class:

1. https://www.linkedin.com/learning/html-essential-training-4/
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element

1. http://www.crunchyroll.com

Crunchyroll is a website that allows you to watch anime, read manga, play games and also has news on the latest updates in the industry e.g. if a new series is coming out. It is a free service but gives you the option of upgrading (Fan or Mega Fan) which cuts out on the adverts for you. I think this is a well designed website because it shows you the information needed in a creative way that also saves space. For example, hovering over an episode thumbnail gives a brief description of what happens. This is good for catching up when you’ve lost your place as it triggers your memory or just for enticing you to watch the next episode. It has a plain, simple colour scheme that contrasts well and also instantly recognisable if you know the brand.

There is a detailed list at the bottom of the page showing the popular shows, streaming platforms and devices the app is on, and the different website languages which I think is very important as there are fans from many different countries. It also allows you to try the new BETA version to get a feel of the new design and layout before going live. This shows that they want feedback from the fanbase to improve their services.

Full page search bar so its easier to read what you’re typing and allows you to search for something specific instead of looking through the A-Z list which would take longer. There is also the option to add shows to your watchlist and view your history so you can easily find series or finding what episode you were up to.

2. http://www.hauslabs.com

I like this website because it is inclusive of older customers by using big bold font making it much easier to read for anyone with difficulties seeing. Also uses large product imagery, for the same reason of making it easier to see but also allows the products to stand out. There are also not too many products listed which means the consumer is being shown the best of the best and doesn’t get overloaded with too much excess information.

The images used have great composition and have been implemented onto the website extremely well. When you go to a different page the large background image is blurred and slowly comes into focus. This is a great technique because it attracts the attention of the user and makes the products more desirable. It is like a surprise that it wants you to find out so that you can imagine what the make-up would look like on you. Overall I think it is a nice and simple effect that has been well executed.

Responsive website that centres position when size of browser is adjusted by being dragged. This means no information gets lost and unseen no matter what device you are using. Navigation bar theme that serves a good function – Transparent background when not hovered over so that the focus is on the huge banner, but once hovered over changes background colour to white and text to grey so that it becomes much clearer to read and navigate. This is cleverly designed to look attractive but serves function as soon as needed.

3. http://www.spitalfields.co.uk

What I like most about the website is that there is a search bar, for me I think this is most useful for customers who know precisely what sort of food they want to eat and conveniently this enters into a full page search bar making the text clearer and drawing focus. 

The website is very easy to navigate with all the crucial information – It has a list of all the stalls within the market, a few photos of each with a description in order to entice you and find out more in person. There is also a section for the market traders to apply via an online form which constantly encourages new talent and evolves the vibrant community. The form itself is very easy to follow with clear and concise instructions and is of course available to view on smaller devices with it being responsive. 

Immediately on the home page there are social media links which is crucial for the audience of this kind of website because people want to see photos of what the food looks like, but also the reviews and happy customer stories. This is a great way of gaining more followers and word of mouth which independent businesses need. The full-page images are there to draw you in and make you want to go and visit. In the specific stalls page it has also been designed so that a main image is ‘sticky’, as in it stays in the same position and you can scroll past it to see different aspects of the image. Also as well as the social media, the opening times are on the front page which is a must.

1. Cat Tea Infuser

Visually this cat tea infuser glass is designed well because it has the comical appearance that the cat has ate the fish and its now in its stomach, but interestingly the fish also has a practical use. The head clips off so that you can insert the tea leaves, and it has gaps big enough to allow the leaves to infuse in the water but not enough for them to escape to ensure you don’t swallow them. There is also a gap for the fish’s mouth so that once you remove the lid, you can pour any remaining liquid from the fish back into your drink.

The fish is attached to the inside of the lid which makes it easy to remove. The cat ears, whilst aesthetically pleasing and helping to identify the animal as a cat, also balances the lid at an angle once turned upside down so that no liquid is spilt onto your table. The pointedness of the ears also makes it easy to pick up. The lid also acts as a handy cover like with takeaway cups, making it less likely for spillages to occur. The tail is a good design because again, it helps to identify the animal as a cat, but mostly stops you from burning your hands on the glass.

I consider this item a great design because of all the above reasons and, if you’re a fellow cat lover like myself then it is a very novel and cute thing to have in your possession.

2. Ramune Bottle

Ramune is a well-loved Japanese carbonated soft drink. The drink comes with a green plastic opener that you must separate from its attachment. The opener then fits over the lip of the Ramune lid where the carbonated glass ball is. You then need to press firmly down with the palm of your hand (best on a surface) in order to pop the ball out. Whilst opening the bottle can sometimes be a bit tricky (especially in public), it is very satisfying once you hear the ‘pop’ and know you’ll be getting a nice refreshing drink as a reward.

The bottles are not only easy to grip due to the indentation on the neck and designated indentations to rest your thumb, but also this mainly serves the purpose of keeping the glass ball in place as the gap is too narrow for it to reach the bottom of the bottle. This means that the drink only becomes carbonated once it is tilted up to your mouth to drink, and so it will stay fizzy as opposed to a standard bottle that would lose its fizz throughout the course of the day. Once opened, although not a permanent lid you can use the green opener like a stopper as it slots nicely inside the hole, and ensures you don’t forget it is open.

The unique design not only serves functional purposes but benefits the company’s sales as they stand out from standard bottles and will stick in the consumer’s mind.

3. Water Bottle

This 500ml water bottle is the perfect size for carrying in your bag. The visual design is very simple which doesn’t detract from the functionality. It comes with a removable filter that is nicely slotted inside so that you have the option of infusing fruit or tea into the water. The silicone sealing plug on the inside prevents leaking. It has a simple mechanism to flip open the lid and this is also lockable to ensure that it doesn’t accidentally open and leak whilst it is in your bag.

As the bottle is slim enough it is very easy to pick up and fits perfectly in your hand, however it also has a carry handle if you wanted to hold it like that or attached it to something. On the back of the bottle, it has helpful time markers to remind you to stay hydrated throughout the day, along with a few motivational words. Once you reach the end it then tells you to refill so that you are meeting the required amount of water you should be drinking each day, around 1-2 litres.

I like this design because I think it’s the perfect size. You can get some very over the top 2litre bottles which are impossible to take outside with you due to the size and weight of the water. This 500ml bottle is much more transportable and is easy enough to just refill once you’ve finished.