After receiving the feedback from the SBW project, the main areas in need of improvement that were highlighted to me were to mark up the business address with something other than a definition list, as it didn’t entirely make sense within the context for that to be used – unlike with the opening hours when in that context it does make sense to be used.
Another issue was that I had put a class on the footer of every page, and looking back now that was for reasons I can’t comprehend, other than forgetfulness! Some further suggestions were to experiment with using Clamp for scaling typography, tweaking the margin on some of the cards, and to be more creative with my visual design.
Further Issues:
Upon looking over my code and the website when starting to implement the tips I had received from the feedback, I noticed a few other areas of improvement that would give me the opportunity to clean up unnecessary code. I had classes called ‘opening-times’ and ‘address’ on both divs within the footer element that wraps the ‘opening hours’ and ‘find us’ information.
There was also a class called ‘footer-info’ underneath the footer which contains my coursework link, copyright and fictitious website statement. Something else I spotted was that for some reason on the contact page I had placed an id named ‘contact’ on main instead of on the body element like I did with the rest of the pages.
Summary of Improvements
Solved Issues:
To solve the issue of having a needless class on the footer, I was able to just delete the class and in the styles.css file, change anything that was ‘.container-contact’ to just select ‘footer’. I changed ‘.opening-times’ to ‘footer>div’ and in all the HTML files I deleted the class off footer, this allowed the advanced selectors to target the correct area without needing extra code. Similarly with the classes attached to the divs wrapping the footer ‘opening-hours’ and also the div underneath the footer, I was able to delete the classes and use either ‘footer>div’ or ‘footer~div’ to target the divs around the description list and the final div. I was also able to update the markup for address, these had previously used the definition list and have now been changed to an unordered list.
More margin has been added to the product cards, and I have implemented the use of clamp for scaling typography instead of using min/max as before. For the final issue to solve I just moved the id class from main to body and within the css file, as the id was only targeting one element, I made sure this was selected correctly via ‘#contact>main>p>:first-of-type’.
Additional Improvements:
I added some vanilla JavaScript to my website for some subtle finishing touches such as the scroll to top function button that I added to the footer, the h1 greeting ‘good morning/afternoon/evening’ depending on the time of day, and the ‘we are open/closed’ in the header. I implemented the use of custom properties, declaring them within the root of the document and focusing only on colour to keep it simple and organised. I created a favicon icon using the same typeface as used in the headings, and added this to the head section of the document so it would show up in the tab. I decided not to use my logo as the favicon icon because there is too much detail in it and I knew it would be too small to recognise, however I thought the ‘r’ worked well as its using the same typeface as the headings which would be easily recognisable, and also contrasts nicely with the background that reflects the colour scheme of the website.
As per the suggestion in the brief I added an accessibility statement page that can be navigated to via the additional footer menu that I decided to include. I have created a call to action link on my home page, and have used PHP server includes for the sections that stay the same on each page – the header, navigation and footer. Finally I created a custom 404 page to give the site more of a personal and quirky feel.
Something else that I spotted was that on mobile view for my original submission in the Design for Web Content module, was that the ‘Wednesday’ was getting squished too close to the opening times in the footer section. As well as this the final paragraph was also breaking onto the next line once it reached the width of 360 x 760. To fix this I changed the size of the text for the paragraph to be ever so slightly smaller, and for the issue of no gap after ‘Wednesday’, due to this being the longest word, I added a padding-left of 2em onto the span which wraps the times.
New mobile design after padding-left was added to span element (hours)
Old mobile view of broken design at smaller viewportNew design once text size was decreased
Other Comments
I decided not to add a mobile burger menu to this website because it didn’t fit the layout and I think it would’ve slightly taken away from the design too. With the full page navigation bar being underneath the header block, once the viewport changes to smaller screen sizes it would mean the burger menu would then have to remain in the same place (rather than being placed in the top left or right corner). I tried this out and didn’t like how it looked as it felt like it was floating mid air. I also tried swapping the heading order and placing the navigation above the logo, however this didn’t look right either.
As a final touch, to make the design more consistent throughout the website I have continues with the use of the dotted border around the card items and also used the same design for the highlighting of the opening hours in the footer. I think this makes the website appear more reliable and trustworthy as users can see it has the same branding throughout.
CSS custom properties, sometimes called variables or cascading variables contain specific values that allow coders to reuse them throughout the document. In this article, we discuss what they are, how they can be used with various methods, key use cases, uniqueness, and a summary of why they are worth including in your document.
What They Are
Custom Properties are variables within CSS (Cascading Style Sheets). They can be given any name and can store all of the styling information you normally declare within CSS, such as padding, font size, background colour etc.
CSS custom properties “allow a value to be stored in one place, then referenced in multiple other places”, which is useful across “complex websites with lots of repeated values” (MDN Web Docs, 2023).
How To Use Them
The syntax of declaring a custom property adopts a similar style to declaring any property in a CSS file. You can put the custom property inside an individual element or on the root element property, which encompasses the whole HTML document, as will be described in more detail later in this article.
To declare a custom property, you need to use the ‘ –’ dash before the name of your variable and then follow this with the styling information.
For example, a custom property used within our seminar demo was a small font with the unit of ‘2rem’ (this was declared in the root element more on this later).
This variable was then declared in the styling of the h3. Applying the styling in the h3 happens by first using the keyword var and then placing the CSS custom properties name inside the parameters (the brackets). Consequently, the unit of 2rem will be applied to the font size of the h3 element. The syntax of this example can be seen below.
After creating this custom property, you can use it throughout the document. Using the previous example from our demo ‘2rem’ was found to be an ideal font size for the paragraphs. To set them to that size was simply a case of declaring that same variable in the styling for the paragraph element.
Along with the basic styling of the display block and text align left, you can see what the syntax for the styling for a custom variable looks like.
As can be seen, by this example, one of the inherent benefits of CSS custom properties is how it can integrate relatively seamlessly within the overall structure of the CSS file.
Naming The Variables
Naming the custom variables can be a difficult task in itself. It must be ensured that relevant names are chosen that make sense and relate to the value that will be declared. For example, if the colour ‘red’ is being declared for the background colour, then it would be logical to name the variable something like ‘–background-color’. This makes it easier if the CSS needs to be edited at a later date. It means the colour property can be changed without having to alter the name of the variable itself. However, if you named it something like ‘–background-red’ and it then proceeded to have the colour changed to purple, the variables name would no longer be relevant and it might also become confusing.
The importance of logically named variables becomes increasingly relevant when building a responsive website. One of the advantages of using CSS custom properties is that you can set various font, padding, and margin sizes, which can be used throughout your CSS file. Combining these stored properties with media queries enables you to build a responsive website design.
Naming the different font sizes reflecting their purpose will help make the editing and development process more efficient. For example, we named the custom property in our seminar demo, as shown below.
Each variable is named based on its purpose. The naming of the fonts and padding reflect their unit size within the document.
This simple naming of the custom properties was within the context of a short demo. However, if a more complicated website was being built. You could aim to be even more detailed and semantic with the naming of custom properties. For example, you could name the different font sizes based on the screen size they are useful for, so a variable that stores the font size of 1.5rem could be called –mobile-font. Whereas a variable with a larger font size could be called ‘–desktop-font’. You could even name font sizes suitable for certain phones or devices, i.e.– ‘iphone-font’, –small-android-font etc.
Using a logical system with this level of consistency in naming variables allows anyone who needs to edit the styling information stored in the custom property to know the purpose of every variable, making building a responsive design a more systematic and rational process.
Methods of Use
Custom properties are most commonly used within the root of the HTML document itself. It is declared in the CSS file and written with a colon beforehand like this ‘:root’. An example of this could be:
:root { –h2-font-size: 5em; }
They can also be used within individual elements themselves. However, this is less common as it means the coder would still have to scroll through the CSS document to find the section where the values that need to be edited are located. For example, suppose your code was part of a commercial website. This could be a huge CSS file, so using the method of declaring within the root is always best practice in this circumstance.
header { –main-bg-color: brown; }
Why They’re Unique
While CSS- Preprocessors, such as SASS (Systematically Awesome Style Sheets) allow for variables, these variables are limited compared to CSS custom properties. They are not ‘dynamic’ (Hospodarets S, 2017), meaning they are fixed after being compiled and therefore cannot be changed. Preprocessor Files are ‘static’- when a SASS file with variables is compiled, “it will always lead to the same, fixed CSS values in the output file.” (Imms D, 2014).
The styling and the names of the CSS custom properties can be changed on the fly during the “runtime” (Imms D, 2014). You can see a live example of this by editing the CSS directly within the DOM using a tool such as Firefoxes inspector. Using this tool you could change the colour of the styling information, i.e. changing a CSS-custom property called ‘background-color’ from green to red and watch it immediately change within the browser.
CSS custom properties follow the scope and rules of inheritance within the CSS cascade. If for example, in our demo example we had set the custom-property ‘–big-color’ as shown below,
If we declared the same ‘–big-color’ CSS custom property in the body but changed the colour to blue, the heading elements, such as h1, would all change to blue rather than red. This is because the heading elements are a child of the body element.
In our demo example, we had specific custom properties with different colours for h2 and h3, such as ‘–small-color’, ‘–medium-color’, but if we changed all the heading elements styling to ‘– big-color’, they would all change to blue.
(Adapted from an explanation from Coyier C, 2016)
The fact that CSS custom properties follow the cascade again allows for a lot of flexibility and makes the coding process semantic.
Key Use Cases
Font Size
Another key use case is using CSS custom properties to alter the font size on a website for different viewports. This can be done by declaring several variables within the ‘:root’ element that has a different scale for smaller or larger screens. The example below shows that the variable named ‘scale1’ is the size for smaller screens, and the other variable named ‘scale2’ is the size for larger screens. The font size stays the same at 1em but is calculated with the particular scale size depending on if it is needed for smaller or larger screens.
The font size (1em) gets multiplied by the variable, allowing it to continue scaling each time the breakpoint changes. In the media query, it has been stated that the min-width is 60em. This is in place to ensure that the font size doesn’t get too large and has a never-ending scaling size, as this wouldn’t look right on enormous screens. Once the screen size reaches the point of 60em, the font size will stop scaling so that it still fits well with the overall layout of the web page.
Declaring these values in the documents root element makes it easy if any editing needs to be done in the future. It is most likely anything declared within the root would be placed at the top of the CSS document so automatically the coder knows exactly where to go to find the section to edit.
h5 using –scale1 custom variable
h5 using –scale2 custom variable and media query
CSS for the h5 example
Colour
Another key use case when CSS custom properties are beneficial is when using colour. The colour scheme is something that changes a lot at the beginning of a project. Commonly, coders and designers will try out different palettes on the website to see how they would match the design of the layout and the overall look of it. It is common to find a situation where two or three colours which in the swatches work well but, when seen together on web page, do not work. For this reason, it is important to be able to test out ideas with the ability to alter them quickly if it is decided they need to be changed.
Creating variables for colour, such as for background colour, font colour, footer colour and so on and declaring them within the root element makes it easy to change the values. This saves a lot of time and effort, meaning the coder has less work to do, and the code becomes leaner, making it easier for others to read.
The example below shows how this can be implemented. It shows if there were one or two other elements, in this case the article element, that needed its properties to be a different value, this could easily be overwritten. Creating a new variable inside that element will ensure that what has been declared in the root will not affect this particular section of the web page.
Fortune Ikechi, LogRocket, 2021
If you follow the link below you can see our demo of how we used different custom properties with colour to create a design with different coloured headings. https://codepen.io/TT48/pen/NWBZpLY
Custom Colour Themes – Advanced Use Case
One method of starting to get even more creative with colours and CSS custom properties is to set colour themes. One of the most popular of these themes is a light and dark mode.
The Odin Project (2023) has an excellent demo in which they allow users to toggle between a light and a dark mode.
As you can see from the Odin Project example above (2023), one means of achieving this is to put the light theme and the dark theme in separate classes in the root. These two classes in this example are called ‘.light’ and ‘.dark’.
Once you have these two classes, you can then group all the styling of various elements under each class in semantically named CSS custom properties. In the dark mode class, we have properties such as ‘–color-base-b’ which stores the black background and ‘–border-btn’, which stores a grey border color for the button. The property names are the same in the ‘light’ class, but instead of the ‘color–base-b’ storing a dark background, it stores a light background, and the ‘border-btn’ property stores a dark shade for the border of the button to contrast with the light background.
As you can see from the example below, there are a number of different styling elements you can experiment with. The Odin Project (2023) demo even has different text appear depending on which theme is selected. The means of the user interacting with this can vary depending on the required complexity. However, it always requires a class to store the styling information and an event listener to wait for the user response to change the theme. The Odin Project (2023) uses a Javascript function and an event listener to call this function. For more information on the coding involved in the Odin Project (2023) demo visit:
Custom properties, especially when semantically named, allow for flexibility while changing your layout both in terms of overall layout structure and fine-tuning your design.
In terms of the overall layout and structure you could, for example, set a four colum grid in the root element, and then reuse this sterling whenever you need it later on within your CSS file. It could be named ‘-num-of-col-4’, so you know its purpose.
In comparison, you can also set the padding within variables in the root element for minor adjustments. For example, if you wanted to change the padding for headings and paragraphs, you could simply alter the units custom property on the root, i.e. reducing the size by 1rem. This change would then take place wherever you have declared the custom property for the padding in your CSS file. This is far more efficient than having to scan through your entire CSS file rechanging the value of the padding for each element.
Looking at the example from our demo, editing any of these custom properties, will change the styling information of where we have used these elsewhere in the CSS file.
Consequently, changing small padding to 1rem, will also change it in the paragraph element, which has its padding set to the ‘-small-padding’ custom property, as you can see from the example below.
Building Responsive Websites
The flexibility of CSS custom variables in being referenced and called back to so efficiently is crucial to the development of responsive websites. When combined with media queries, this ability to set custom variables that affect the global layout and fine-tune individual elements makes CSS custom properties a valuable tool. This is especially true when these custom properties are semantically named. Looking at our demo earlier, we might decide we only want to bring in the small font padding variable for h3 at a certain screen width.
Making slight adjustments is easy with CSS custom properties, as we have already seen so, you could easily create a slightly larger font, for a tablet screen size. We might even consider renaming our variables to –mobile-font, –mobile-padding, and then –tablet-padding and so on as explored earlier within this article.
This gives the user a huge amount of flexibility in adapting their style, even changing how they organise their system for styling depending on how many media queries are used and how complex the responsiveness of the website becomes.
As demonstrated through the earlier example of using a calc method in CSS to set the specific scale for fonts, you can go even further than this in terms of advanced methods of CSS custom properties for responsive design.
CSS custom properties fit perfectly into a logical workflow, allowing the design to maintain consistency whilst efficiently making small adjustments and global changes to their design. This makes CSS custom properties increasingly vital to the overall responsive design process.
Browser Compatibility
CSS custom variables are largely supported throughout most modern browsers apart from Opera Mini and Internet Explorer where it is not supported at all. The var ( ) function can be used as “multiple fallback values when the given variable is not yet defined” (MDN Web Docs, 2023). If working with custom elements and shadow DOM (the shadow DOM allows hidden trees to be linked to elements in the regular DOM tree), then this can be a very useful thing to use. However, these fallback values do not work as a fallback for browser compatibility in case of situations where custom properties are not supported. In this case the standard CSS declarations would have to be used within each element, for example:
h2 { color: white; }
This ensures the web page will appear the same even if the custom properties fail. Whilst this does add to the amount of code within the document it ensures that everybody is included no matter what browser is being used. This can be judged accordingly. If the target audience of the website is on a smaller scale or only caters towards a specific demographic, where the developer knows that they use particular browsers that support custom properties, then it makes sense not to include the fallback as it would not be needed.
Conclusion
In conclusion and as we described, CSS custom properties can be used effectively within the root of the document. They are a fantastic way to make code leaner and minimises effort, especially when collaborating with others.
User experience (UX) is a user centric approach that keeps users at the heart of the research and design process, enabling the end product or service to be the best it can that is tailored to fit their needs. It is important to do the research first before designing something that the public will be using. You need to ensure that you thoroughly understand why the product is needed and then this will help with the design process in creating the best outcome. ‘A system is usable when it provides a service and is of use to a person.’ (Rosenzweig, E. 2015). I will discuss different elements of acquiring data for UX and compare each with its counterpart to see how they differ. It will also delve into what research techniques I will use within my major project to achieve more insight into how the design of the website should be implemented so that the intended users benefit from it. This article will give an explanation into what UX research and design is, the best research methods to us, and what it entails. I will also talk about what was learned from the sessions with Steph Troeth and Chris How.
What is User Experience Research?
UX research begins with exploring common problems that users face when using a product or service. It makes you think about real people and real life scenarios that require a fix in order for the needs of these people to be fulfilled. UX research studies user interactions from a group of volunteers to gather information on how they might come up with different solutions to the same issue, or exploring all of the different pain points each individual has with the same product or service. This can be done using methods such as usability testing, diary studies, interviews, surveys and many more.
Qualitative vs Quantitative
Qualitative data is very subjective and the information that is received must be thought about and interpreted. An example is methods such as interviews and conversations with targeted user groups who would use the product or website. Quantitative data is something that can be counted and measured using numbers, such as large scale surveys or the analysis from analytics. The benefit of this is that it makes it objective, meaning it is more accurate and removes bias. ‘Interpreting your data and presenting those findings is straightforward and less open to error and subjectivity.’ (DeVault, G. 2020. liveabout.com) This creates a better user experience because there are no or less mistakes being made, also it isn’t based on opinions so it is able to remain neutral throughout.
Attitudinal vs Behavioural
Attitudinal research is ‘relating to, based on, or expressive of personal attitudes or feelings.’ (Merriam-Webster. 2022) An example of an attitudinal method would be to ask the participants what they think and what their opinions on a specific matter are. In contrast to this, behavioural research methods ask the user to observe what action has been taken and is a way to understand individual and social behaviour.
Generative vs Evaluation
Generative research is an open ended type method of how the research is conducted. These are much more vague and give more general detail from the user. For example, using diary studies is a method that would take place over a number of weeks or months as the prospective user or volunteer goes about their daily lives. In contrast, evaluative research is a close ended type of method. An example of this would be usability testing. This is where a small group of prospective users are asked to test the product or website and carry out certain assessments to see how well it functions, and how easy it is to use. This can also draw out any bad experiences, such as if it isn’t user friendly or works fine for one person but not another who has a specific need. This is a great way to test before the product goes live as it means adjustments can be made.
The session with Steph Troeth taught a good technique of doing a quick What I Learned analyses of data by using the roses, buds, and thorns method to sort the findings. This swiftly enables the answers to be grouped into 3 sections:
Roses – ‘Any positives and good experiences that the interviewee had.’
Buds – ‘Neutral areas, any opportunities for improvements that could be made.’
Thorns – ‘Anything negative or any pain points that the interviewee had.’ (Troeth, S. 2022)
This allows a much better visualisation of what the issues are, what is okay but could be improved, and what already works well that can continue to be used and possibly develop further. Something else that stood out from the session was the importance of sampling and how whilst there might be a specific group of people in mind, there will always be others outside of the intended target audience who want to use the website for many different reasons. It is important to keep this in mind when designing and ensure that the website is inclusive and user friendly for all no matter who the intended users are.
What is User Experience Design?
UX design helps frame the solution in a way that enables ease of use for users, giving them the confidence to continue using the website as they know that it functions well for their needs. This is known as user centred design, a process which focuses on the needs of the user throughout each design phase. This can include users in the design process to ensure that things are getting done correctly in each step and ensuring it is accessible for those (and others) who you intend to use the product.
‘Three main factors to keep at the forefront of your mind when designing a solution to a problem is the business, the user, and the technology.’ (How, C. 2022) This explores the viability of the business, whether or not it can achieve what it wants to set out to do. Such as is there something about the design that is too grandiose which might detract from the basic function of the product? How much the user needs or desires the product, such as why they need it and are there enough people who need it to make the cost worthwhile. What technology the company might use and how they set about achieving this goal, also how feasible it is for them to create it. For example how probable it is to succeed or not and if they have enough funding to see it through to the end.
The Double Diamond
The “double diamond” is a reflection of the design process. In the first
diamond the first two steps are:
1. Discover – ‘Discovering what the problems are and the issues that real life people face.’
2. Define – ‘Narrowing down the problems and looking at the ones you are able to manage and solve.’
In the second diamond, the continuing two steps are:
3. Develop – ‘Start developing the solutions, thinking outside of the box/keeping an open mind about how the problem might be solved.’
4. Deliver – ‘Pinpoint the solution that you think will work best and focus on delivering that idea.’ (Troeth, S. 2022.)
‘How Might We’ questions and statements allow for a more creative approach to problem solving whilst keeping focused on the issues at hand. To create a good ‘How Might We’ statement or question it is a good idea to first start with the problems that have been uncovered. They should avoid hinting at the solution within the statement as this is something that will be covered in detail later on in the design process. The questions and statements should be kept broad and comprehensive so that there is room for lots of different ideas. The more ideas there are, the easier it is to narrow down and tweak until it’s perfect. Whereas if there are only one or two ideas then there isn’t much room for improvement. The statements should also be focused on the desired outcome as opposed to just trying to solve the issue by ‘slapping a plaster on it’ and ignoring the root cause. Finally, the questions and statements should be phrased positively otherwise this will limit your creative abilities.
From the session with Chris How, it was important to note that no matter how bad somebody might be at sketching (and I learned that my skills were rather abysmal), it is best practice to still start the design by sketching out initial ideas. Sketching allows the designer to visualise the idea as a rough draft first and means that the parts that look like they could work well can be further developed and are then able to hone in on the good parts. In terms of designing websites this is a great approach because the visualisation comes to life on each page showing what it should vaguely look like. This makes it easier when it comes to coding and designing the website. Now there is a rough guide of how it should appear and function which works well as it can be followed along with and developed further.
Project Idea – Happy Citty
My project concept focuses on the life of pet cats in a city that are living in a flat with no garden and only so much space to use. The website will focus on how the owners can go about maximising the space that they do have in order to create the best quality of life for their cat. It will look at the cat’s behaviour when unhappy, the impact it can have on their health, and what can be done to improve their daily lives and put the owners minds at ease. The intended target users for the project are predominantly fairly young with an age grouping of between 20-40 years old, but it will be a website for everybody that will adhere to inclusivity no matter the reason for wanting to view the site.
Research Methods
Some research methods that will be used for the project to find out more about cat behaviours, and help identify the way in which specific users will interact with the website include:
User Profiles
Three user profiles will be created for the project to indicate who might use the website even if they don’t necessarily fall into the intended age group target or specific circumstances, such as living in a flat. Doing so will help visualise the types of user who will be using the website, remembering that users may be using it for reasons other than what was originally set out. This makes it easier to design for as it will be clear what their needs are and the reasons for them looking on the website in the first place.
Empathy mapping will be used after creating user personas as these specific ‘characters’ will be the centre focus of the empathy map. Therefore their specific qualities, traits and pain points will need to be kept in mind as it will represent what they say, think, do, and feel.
When certain phases are reached in the website progress, friends and family and the online community will be asked to test the website to see what opinions people have – where improvements can be made, if it makes sense to them, if it is user friendly and so on. ‘Involve real users, listen and respond to what they say, test your designs with a spectrum of different ages, abilities, and interests…’ (Lynch, P. 2019). There will be a form or questionnaire provided for them to fill out after testing where they will be able to express their opinions and any outside insights they may have that would be clouded from personal vue due to proximity to the project. An example of an open ended question could be ‘How easy did you find it to use this website, and what do you think could be improved?’. This will help to continuously improve the website at each point and enable vital feedback to be gathered from qualitative data.
Specific Behavioural and Dietary Information from Vet
A veterinarian will be contacted who has 9 cats, so she would be an excellent source of information for both scientific facts such as dietary requirements and behavioural patterns, both professionally and from personal experience as there will be first hand accounts of the cats and how they behave with one another.
Online Questionnaires and Surveys for Cat Owners (Quantitative)
Online forms or questionnaires will be created for people who have cats in order to gather research on behavioural patterns, and comparison between indoor and outdoor cats. They will be created using Surveyplanet where the data is handled and collected in the cloud. Firstly it will ask if the cat is an outdoor or indoor cat and will then ask different questions depending on if they answer ‘yes’ or ‘no’. The surveys and questionnaires will be completely anonymous as no personal details are needed and there is an option to enable this on Surveyplanet, ensuring that no identifying information will be captured such as IP addresses. It will also ensure that the research will follow the university’s guidance on the ethics practices and where needed will get ethical approval prior to beginning any research involving the participants. The surveys will have a mix of some specific close ended questions with multiple choice answers, and it will also have some open ended questions to give the users a chance to express their own opinion. The close ended questions will be constructed once relevant research has been done. An example of a question based on gathering cat behavioural research could be ‘How does your cat tend to play, such as favourite toys, and how often?’
Primary Sources & Secondary Sources
Primary sources for this project include spending time with cats via friends and family, cat sitting and visiting an array of cat cafés. Observing the cats behaviour and taking notes, interacting with them to attempt to garner a response and spot patterns. Taking photos of the cats as and when they are available to spend time with. Secondary sources for this project include watching documentaries, reading articles and books, and analysing data that is obtained from previous research such as public online questionnaires.
Conclusion
I think the biggest research method that will help me with my major project is creating user profiles and providing them with user journeys, and asking the online community to complete questionnaires. Whilst the other research techniques will also be invaluable, they are more on the side of specific research on cats so that I can ensure the content I am putting on my website remains factual and not just based on opinions. All of this research is important to give me the insight into what sort of content is necessary for the users of my website and what will be the most meaningful. I believe it is vital to get a firm understanding of the type of user who you are designing for, and what their needs and end goals are so that you don’t accidentally end up creating something that could be a major pain point for them. I have a specific target group of age 20-40 in mind but will ensure that I cater for everyone so that all needs are met, as well as ensuring my website is accessible for anyone with disabilities – such as difficulty reading due to impaired vision, which could be solved by both ensuring website design and layout is still legible when zoomed in, and by testing to see that the colour theme works well with font colours. It is also important to ensure code is semantically correct and adequately labelled for screen readers.
References
Rosenzweig, Elizabeth. Successful User Experience Strategies and Roadmaps. E-book ed. Amsterdam, [Netherlands] : Morgan Kaufmann, 2015.
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;
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 2nd 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 3rd child of any container, main p:nth-child(3) means the 3rd 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 3rd child, but the 3rd 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
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.
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.
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.
A range of different colours can have a variety of different meanings and interesting historical reasons. For example, whilst it is quite commonly known that purple is a colour used a lot by royals, I didn’t know that this was because back in the day purple was the most expensive colour to dye, and so the royal family used it a lot to show their wealth. Red can also be percieved as hatred, anger or a warning, as well as love.
Colour Combinations
Depending on the background colour, it can either illuminate the foreground or make it blend into the background and disappear.
Certain combinations are bad for colour blindless aspects such as red and blue. High brightness and saturation also hurts the eyes to look at.
For logo design it is best practice to start in black and white so that you can work with shape and from first, and then you can match colours to the density of the shade later on.
Monochromatic is the combination of tones and shades within the same colour/hue.
Analogues – The combination of adjacent colours
Complementary – The combination of two colours from opposite sides
Triadic – The combination of three colours evenly spaced around the colour wheel
Compound – Combination of colours that are often in two groups.
Methods To Choose Colour Scheme
Brand Based – We need to reserve an accent colour for buttons
Rooted in Content
Looking Sideways – Put together a moodboard of items such as tea leaves, tea cup, tea pots etc and draw colour schemes from that
Typography with CSS
The width should be 80% of the parent element. You need to include a max-width to stop the content from stretching too far on a larger screen. Similarly the min-width is needed so that text doesn’t become too narrow on a smaller screen size.
Margin: 0 auto; centres the elements within the parent element with equal margin on either side. This means 0 top and bottom, auto left and right.
<div id=…> allows you to have a shape underneath your content to act as a visual container and can make the background more interesting.
960px is the comfortable measurable width for screen that is the most commonly used. Screen width is always measured in pixels.
It is good practice to use off-black and off-white so that the contrast isn’t as high and is easier to read, making your website more accessible.
Use margin-top or margin-bottom for typographic design. One or the other should be used, but never both as ideally you don’t want two margins coming together.
Images and Colour with CSS
JPEG – Joint photographic experts group. They are true colour, 24 bit, have variable compression and used for photographs
GIF – A gif has 256 colours, 8 bit, and used for frame animation or simple graphics
PNG-8 – Has 256 colours, 8 bit, smaller than equivalent GIF, good for logos and used for simple graphics
PNG-24 – True colour, 24 bit, alpha transparency – no other file format has this and is used for complex graphics
WebP – Developed by google. One file format for the web
Colour dithering – mosaic/pixelated effect on photos when not using the true colour formats
Make sure image is under 100KB for use on web
Vector file formats – SVG (scalable vector graphics) are flexible to edit, you can edit the colour in html file.
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.
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.
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 11th. 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 11th. 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.
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
