Miri's Blog

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.

Class 1: What I Learned This Week…

What Makes a Good Website?

“Good design is not decoration. Good design is problem solving.” – Jeffrey Veen

Accessibility: People and bots need to be able to see. This can include things like creating a responsive site so that people with difficult eyesight are able to zoom in on the page to make the text larger, without losing the integrity of the design. Or writing code in such a way that the elements and pages of the site are able to be read out loud to the person by the computer.

Colour Scheme: A simple theme that sticks to the same handful of colours in order for it to be consistent and aesthetically pleasing.

Fresh Content: Fresh content is good for the order of where your website might appear in a search engine. If you’re updating frequently enough then it will appear higher up in the search, making it more likely for more people to click on it. However it is important to keep in mind that quality of content is always better than a lot of mediocre content. And also quality/functionality is better than appearance.

Relevance: It is important to know who your users are so that you can cater to them. For example if you made a website aimed towards children, you would most likely use a vibrant and fun colour scheme with playful fonts to attract their attention.