CIS*1050 Final

"At" Rules

"At" rules are clever devices that encapsulate a bunch of CSS rules and apply them to something specific. They can be used to import other CSS files, apply CSS to a particular media, or embed uncommon fonts. Each rule starts with an "at sign" or "@". @import - is used to import an existing stylesheet in the current one. Sometimes this is useful if the CSS file for a website gets too complex, and it is easier to break it down into smaller files. The @import rules must be placed at the top of a stylesheet. For example: @import url(someotherstyle.css); @media - The types of media include screen (computer screens, tablets, mobile devices), print (printers), projection, handheld, and all (default). - It is mostly used for media queries, which can be used to check things such as the width and height of a viewport, the width and height of a device, orientation, and resolution. - Media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones. There are a bunch of features that can be used. Here is a basic example: body { background-color: lightskyblue; } @media screen and (min-width: 500px) { body { background-color: lightcyan; } } This query basically says that if the minimum viewport size is greater than 500 pixels, the background colour will be lightcyan, otherwise if less than 500 pixels, it is lightskyblue. It is also possible to do things like create a responsive navigation menu which is displayed horizontally on large screens and vertically on small screens. This all allows different design choices to be made depending on screen size. A webpage can then be optimized and laid out completely differently for mobile devices, tablets, and varying browser window sizes. For example, it is possible to target the screen resolution of a device: Screen resolution: @media screen and (min-device-height: 2436px) and (max-device-width: 1125px) { /* apply style */ } @font-face - Allows a webpage to use a specialized font, even though it does not exist on the user's system. Here is an example: @font-face { font-family: "font of Tatooine"; src: url(fontoftatooine.woff); } Font rule: body { font-family: "font of Tatooine", arial, sans-serif; } The font will be downloaded (from the same directory as the CSS files) and applied to the body of a webpage.

Fonts

"Web-safe" fonts appear across all operating systems Serif = extra bits hanging off

User experience guidelines

1. Simplicity 2. Visual hierarchy 3. Navigability 4. Consistency 5. Accessibility 6. Conventionality

Common Usability Mistakes

1. Tiny clickable areas 2. Pagination used inappropriately (split into too many pages, don't split up articles) 3. Poorly written and laid out text content 4. No contact information 5. No search function 6. Dead end links

SEO for mobile

1. Traditional responsive web design. 2. Dynamic serving. 3. Separate mobile site, (i.e., m.domain)

Abbreviations

<abbr title="HyperText Markup Language">HTML</abbr>

Code

<code> </code>

Block level elements

<div>, <footer>, <section>, <article>, <header>, and <video>.

Creating a bookmark to jump to:

<h2 id="C1">Fun with Fungi</h2> <a href="#C1">Jump to Fun with Fungi</a>

Elements summary

<header>: a header for a document, or section <nav>: a container for navigation links <section>: a section in a document <article>: an independent "self-contained" article <aside>: content to one side of the main content, (e.g., sidebar) <footer>: a footer for a document or section <details>: additional things <summary>: a header for the <details> element

Embedding an image

<img src="cortado.jpg" alt="Spanish coffee"> src → URL alt → Alternative text, describes image for accessibility

Dimensions

<img src="cortado.jpg" width="104" height="142" > Setting only one of the dimensions will cause the image to scale proportionally while defining both will stretch the image. It's usually better to set image dimensions with CSS so you can alter them with media queries.

Ordered list

<ol> <li> </li> </ol> - Creates a numbered list

Citations

<p>Jamie Oliver's new book is titled <cite>Jamie Cooks Italy</cite>. </p>

Nested list

<ul> <li></li> <ol> <li></li> </ol> <li></li> <ol> <li></li> </ol> </ul> Creates a nested list with a bullet and then numbers

Navigation bars

<ul> <li><a href="#home">Home</a></li> </ul>

Blog website

A blog is just a collection of posts, and the most compelling ones have the right combination of font typography, images, layout, and effects - making their presence both imaginative and engaging.

<div> </div>

A division, used for CSS positioning.

Videos + formats

A file format that holds the video, like .mp4 A video format (aka codec), like H.264, MPEG-4, or Theora MP4 - was developed by the Moving Pictures Expert Group and is based on QuickTime. It is the most universally supported format and is supported natively on all browsers. It is the "safe" choice for storing and making videos accessible via the web. MP4 is supported by the likes of YouTube. WebM - was developed by the web giants, Mozilla, Opera, Adobe, and Google, and is supported by HTML5. Ogg - was developed by the Xiph.Org Foundation. Embedding: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> *Instead, just link to youtube* Upload a video to YouTube (or embed an existing video) Obtain the video ID. Define an <iframe> element in the web page. Define the src attribute as pointing to the video URL. Use the width and height attributes to specify the dimension of the player. Define any other parameters. <iframe width="420" height="315" src="https://www.youtube.com/embed/D37aDfmWBag"> </iframe>

Line length

A good rule-of-thumb is to limit the number of characters on a single line to around 80.

Benefits of mobile websites

A mobile website is instantly accessible to users via different browsers across a range of devices, regardless of the platform, or size (iOS vs Android, iPhone vs iPad). A single mobile website can reach users across many different types of mobile devices, whereas native apps require a separate version to be developed for each type of device. A mobile website is much more dynamic than an app in terms of pure flexibility to update content. A change in the design or content of a mobile website can easily be published, and the changes are immediately visible. Mobile websites are much easier for users to find because their pages can be displayed in search results, making it easy for visitors to find. In contrast, the visibility of apps is largely restricted to manufacturer app stores. Mobile website URLs are easily shared between users via a simple link (e.g. within an email or text message, Facebook or Twitter post). Because a mobile website is accessible across platforms and can be easily shared among users, as well as search engines, it has far greater reach capability than a native app.

Pages for starter website

A page dealing with writings on coffee culture, aptly named "culture" will deal with philosophical, or historical coffee related posts. The "discover" page will include informational posts about coffee (e.g., the types of coffee, how to determine a good microfoam, the types of beans, etc.). This almost becomes the informational aspect of the website. The "places" page will be home to travel and café reviews. This consolidates any travel posts as well as café reviews from various cities, on to one page. Simple is better. The "news" page will deal with any news about coffee culture or the website. The "about" page will give a quick overview of the website.

Snippet/code snippet

A piece of code, which by itself would not run without the surrounding code. Used to illustrate concepts.

Designing 404

A poorly designed one might have the effect of pushing a user away from a website, whereas a well-designed one might have the opposite effect. Some customized 404 error pages include a hero image, witty description, site map, search form, or basic contact information There are many options that could be included in a 404 page: - A search box - Popular/bestselling items A coupon code or special offers - The right piece of text explaining what happened There are also some bigger ideas: Branding Link building (people eagerly link to great/humorous/entertaining content) Getting more of social media traffic Connecting a positive shopping experience with your brand It is easy to overlook simple utility aspects of a design, such as 404 error pages. Even if a website does not automatically redirect, there's nothing worse than landing people on a generic error screen.

Bits

An 8-bit image is one that has 28 colours

Articles and sections

An article element can be used to mark a standalone section of content A section element, on the other hand, represents a way of splitting up an article While it is possible to use <div> to make these sections, the use of <section> and <article> allow for a much more meaningful document.

Asides

An aside is used to represent content that is related to the content surrounding it.

Modifiable parameters

Autoplay: Have the video play automatically when the player loads. The default value is 0, meaning it will not play automatically. To play automatically, change the value to 1. Loop: The loop will play only once (0=default), or infinitely (1). Controls: The player controls do not display (0), or do display (1=default) These parameters are used by adding a "?" at the end of the src video ID, and then the controls to be used: <iframe width="420" height="315" src="https://www.youtube.com/embed/D37aDfmWBag?controls=0"> </iframe>

Perceptions of colour

B&W - Exudes class, minimalism, and simplistic design. Monochromatic - One colour

Symbolism and Cultural Differences

Blue: In some countries, blue symbolizes healing and evil repellence (e.g., Greece, Iran). In Eastern cultures, blue symbolizes immortality, while in Hinduism, blue is strongly associated with Krishna, who embodies love and divine joy. Green: Forbidden in Indonesia, in Mexico, Green is a national colour that stands for independence. In the Middle East, green represents fertility, luck, and wealth, and it's considered the traditional colour of Islam. Red: Red is associated with communism. In Asian cultures, red symbolizes good luck, joy, prosperity, celebration, happiness, and long life. In India red is associated with purity, sensuality, and spirituality, whereas some countries in Africa associate red with death, and in Nigeria, it represents aggression and vitality. Yellow: In Germany, yellow represents envy, but in Egypt, it conveys happiness and good fortune. Orange: In Hinduism, saffron is considered auspicious and sacred. In the Netherlands, orange is the colour of the Dutch Royal family, while it represents sexuality and fertility in Colombia. In Eastern cultures, orange symbolizes love, happiness, humility, and good health. Purple: Purple is also associated with piety and faith, and in Catholicism, penitence. However, in Brazil and Thailand, purple is the colour of mourning. White: In China, and Korea and some other Asian countries white represents death, mourning, and bad luck and is traditionally worn at funerals. In Peru, white is associated with angels, good health, and time. Black: In the Middle East, black can represent both rebirth and mourning. In Africa, it symbolizes age, maturity, and masculinity.

Block

Box standalone - fitting the entire width of its containing box, with an effective line break before and after it. However, unlike inline boxes, block boxes allow greater manipulation of characteristics such as height, margins, and padding. None - Can be used for toggling information on and off. li { display: block; }

Layout techniques (CSS Frameworks)

CSS Flexbox: This is a new layout mode available in CSS3. Flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. CSS Grid: The CSS Grid Layout Unit offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning

CSS Colours

CSS allows a number of different ways: colour names, or RGB, HEX, HSL, RGBA, HSLA values. HEX - a colour is changed using its hexadecimal value, e.g. #1587D6 HSL - colour space involving hue, saturation and lightness, e.g. (205, 90%, 46%). Hue is a degree on a colour wheel from 0 to 360. Saturation is the intensity of a colour, 0% means a shade of grey, 100% means full colour. Lightness is how much light a colour has, 0% is black, 100% is white. RGBA - RGB with an alpha channel, which specifies opacity (0.0=fully transparent, 1.0=not transparent). HSLA - HSL with an alpha channel.

CSS selectors

CSS selectors are used to select HTML elements based on their element name, id, class, attribute. The first selector selects the elements based on the element name. Here we style all paragraph elements to be red: p {color: red;} The id selector uses the id attribute of an HTML element. To select an element with a specific id, use a hash (#) character, followed by the id of the element. Here red is applied to the HTML element with id="parat". #parat {color: red;} The class selector selects elements with a specific class attribute and is specified using the period (.), followed by the name of the class. If there are elements with the same style definitions, it is more efficient to group the selectors. For example: h1, h2, p {color: red;}

CSS Box Model

Center- Content Padding Border Margin -Outside

Advanced lists

Change bullet style: th { text-align: left; } table { border-spacing: 10px; } Roman numberal ordered list: <ol type="i"> Description lists: <dl> -> description list <dt> -> description title <dd> -> description description </dd> </dt> </dl> Change list starting number: <ol start="42">

Simplicity

Colour: Don't use too many colours, and that includes extremely busy images. This does nothing but distracts users from the task at hand. Fonts: Fonts should be legible (i.e., fonts in the style of the script are not). Use a maximum of three fonts, in a maximum of three sizes. Graphics: Only use them if it helps a user complete a task, perform a specific function, or convey information.

Meta data + what to put in head section

Data about data Important for search engines In the case of webpages, this metadata is information about the author, keywords, etc. <meta name="author" content="Kaffe Fyr"> <meta name="description" content="Cafe reviews and information"> < meta name="keywords" content="Cafe, coffee, espresso, culture"> In the case of webpages, this metadata is information about the author, keywords, etc.

Classes

Define equivalent styles for elements with the same class name. <style> .butterfly { CSS } </style> <div class = "butterfly"> </div>

<title>

Determines the website title in the tab

Review of usability

Does the website work well across all web browsers? - Web browsers are not all the same. How does the website work on the major ones? Does it look and feel the same? Are there alt attributes? - Accessibility is easily added to images by using a descriptive alt attribute. Has the website been tested by other people? - Let someone else look at the website and see how they interact with it. Do they find any glaring issues? Is there a search functionality, and is it easy to use? - Search helps people find things. Does the site load quickly? - Slow sites send people running. Enough said. Are there any broken links? - Root out and replace dead links. Nobody likes to find a link that doesn't work.

Tables

Each table row is defined with the <tr> tag. A table header is defined using the <th> tag. By default, table headings are bold and centred. A table data/cell is defined with the <td> tag. Double bordered: table, th, td { border: 1px solid black; } Single bordered: table, th, td { border: 1px solid black; border-collapse: collapse; }

Page layout

Element Position - Website width: Websites should be responsive, which means they need a minimum width, maximum width and breakpoint widths. A minimum width might be 320px and maximum width is 960px. Logo: - The website logo can be image or text. Users usually look at the top-left corner of the website. Navigation menu: - usually placed below the logo called a vertical navigation bar or places on the right side of the logo called a horizontal navigation bar. Page content: The content of the page can be placed below the navigation bar or else on the right side of the navigation bar. Secondary content: - Secondary content usually is not directly related to the primary content of the page. They usually remain constant throughout all the pages of a website. Secondary content can be placed on the side of the body or else below the body. When putting it on the side of primary content, make sure 70-80% of the width is occupied by the primary content. Footer: Placed at the end of the page. Grid system: - Vertical lines Whitespace - The space between the elements of the webpage - Not necessarily white - Vertical and horizontal Balance - When a webpage is divided or a section (a part of a page with 100% width of page and some height) of a webpage vertically, we get two pages. Balance is how much difference these two parts will have when compared one with another on the basis of size, colour, grid position and whitespace. - If they both form mirror images (difference is less), then it is called symmetric balance, otherwise asymmetric. Symmetric is beautiful, formal, cohesion, professionalism but sometimes static and boring. Asymmetric is dynamic, unique and interesting, but sometimes informal.

Some of the recommended optimizations include:

Eliminate render-blocking resources (page styling and functionality) Defer offscreen images (use offscreen images, i.e. photos that are not on screen straight-away should not load straight away). Serve static assets with an efficient cache policy (cache HTTP) Enable text compression

Colour preferences

Everyone likes blue

Commerce

Exploring: Users should be allowed to explore a website before requiring registration. Asking for registration or login too early may scare people away. Guest purchases: Users should be allowed to use guest checkouts, as they are perceived as being convenient, easy and quick.

Fixed VS Sticky Navigation

Fixed - The user would scroll down on the page, and the fixed menu would go upwards with the rest of the content. The menu was basically "glued" to the top of the page and would disappear before anything else - Disappears - doesn't distract the user Sticky - The user continues to see the menu bar even when they move toward the bottom of the page. - Less likely for users to get lost - Reminds users that there are other ways to navigate the site. - Logo is there the whole time, good for branding

Meaning of colours

Green earth, nature, environment, clean, organic, freshness, wealth, experience, jealousy Yellow happiness, optimism, warmth, discount, cheap, inexpensive Red energy, passion, warmth, aggression, love, emotion, safety, danger, rage Blue cool, calm, loneliness, trust, authority Black sophisticated, death, decay, power, luxury, authority, mystery White purity, peace, cleanliness, freshness, minimalistic, starkness, cold, emptiness, absence of colour (so technically not a colour) Orange fall (autumn), harvest, warmth Purple royalty, wealth, spirituality, and nobility

Similarity

Group similar things together, whether by colour, shape, size, texture, dimension, or other qualities. Similarity can help us with organizing and classifying objects within a group and linking them with a specific meaning or function.

Versions of HTML

HTML 2 (Nov. 1995) HTML 3.2 (Jan. 1997) HTML 4.0 (Dec. 1997) HTML 4.01 (Dec. 1999) HTML 5 (Oct. 2014) Different ends of file names = scripts that run on the server and make decisions about what content to reveal. They all output the same result though: plain HTML

Website layout

Header Nav Main Footer

Common Fate

Humans group together objects that have the same trend of motion and are, therefore, on the same path. In your site design, you can use this to guide the user's attention to something, e.g. sign-up form.

Closure

Humans seek completeness. When shapes that aren't closed or parts of a picture are missing, our perception fills in the visual gap. Using the law of closure can make logos or design elements more interesting. A good example is the World Wildlife Fund logo, which was designed by Sir Peter Scott in 1961.

ID VS Class

ID vs Class: One unique id that belongs to that single element, while multiple elements can use a class name. Both reduce clutter

What is a domain name

Identifies website Replaces the need to remember IP addresses

Figures

Images associated with caption

Why are webpages larger?

Images: images make up more than 50% of the weight on an average website. However, this is easy to fix - by compressing the images, shrinking their dimensions, or staking their resolution quality down a few notches, a huge chunk of weight can be trimmed from a website just by optimizing images. Scripts: JavaScript and CCS code can be complicated, and therefore they can form a large portion of a website. Video: Video, which is essentially a collection of images + audio, can be content heavy. Unless there is a lot of bandwidth, hosting videos on another website (like YouTube), makes sense.

How to effectively optimize a site's loading time?

Implement caching - The use of caching allows saving some of the website's files in a more convenient place, which cuts down on download times. Compress images - Large, high resolution images = slow loading times. Use image compression.

Logo + Name

In header

Separate paragraphs

Indent Space between paragraphs

Design review questions

Is the interface overcrowded or bloated? - Are there too many things on the website? Would the design benefit from some "reductionism"? Is the design distinctive and unique? - Website templates are a dime a dozen, so many websites look the same. Having a website that is a little different will help it stand out. It might also help with the brand identify. Although if you care more about content, this might matter less. Does the layout make sense? - The layout affects visual hierarchy, and it somewhat depends on the content on the website. Three columns in the main area doesn't make a lot of sense for a blog; maybe better for a newspaper? Does the website need a lot of scrolling or not? Do the colours feel, right? - Colour is closely linked to emotion, so a bad choice for a colour palette might make a website look more comical than it should be. Integrity is important, and wonky colours might put people off reading your website or buying things from you. Does the typography work? - Like colour, typography affects the feel of a website. Using a font that is not web-safe, or too many fonts detracts from a design. What happens if a browser can't support it? Are the links visible? - Links seem like low-hanging fruit when it comes to design, but they are extremely important. If people can't find links, they can't use them. Is there enough whitespace? Whitespace (or negative space) is king. It draws attention to important things. Too many images or too loud a background image can have a negative effect. Using a video as a background is fine if it is a part of the story being told. More whitespace also improves readability. Is the design aesthetically pleasing? - This is very subjective, but does it look good? Visitors to a website are drawn-in by a good-looking website. Ill-designed websites allude to a lack of interest. Is the content readable? - Is the textual information legible and coherent? Is it chunked, or thrown together as one large paragraph, which will affect how users view the page? Are important site features emphasized? - Important things should be more emphasized than others. On a shop, this might be a new product, on a blog, a new post. Does the website feel complete? - Is it ready to go live?

Image Formats

JPEG - Most common It is highly compatible with the web, and boasts a small file size (great for fast loading of webpages), with little (visible) loss in quality. JPEGs are usually 24-bit, meaning there is more colour than the human visual system can discern. JPEGS are lossy. They achieve this by discarding fine details, the amount of which is controlled by a quality factor. Less quality means less detail is preserved. Sometimes a JPEG with a high compression ratio shows signs of loss, small blocky portions of the image known as artifacts (JPEG codifies images in 8x8 blocks). An issue with JPEG is that depending on the image content, artifacts may appear at different quality factor values. JPEG compression can be optimized for photographs, making artifacts invisible to the human eye. PNG - A lossless graphics format designed to replace GIF (see below), PNG images are quite common on the web today, and it is a very versatile format. It supports transparency, and since it does not discard information, it does not produce artifacts. The downside is larger file sizes. PNG is an excellent format for screenshots, and graphical images or drawings. PNG-8 supports 256 colours and 1-bit transparency, and PNG-24 supports 24-bits and 16.8 million colours. PNG supports scalable transparency (from opaque to completely transparent) via alpha channel. There is also an animated APNG version GIF - This format is an excellent choice for limited colour images (i.e. 256) that need to be small in size. GIF supports LZW lossless compression and multiple frames that allow us to produce simple animations. The problem with the limited number of colours is that it can lead to colour shifts, posterization or banding of colours, and distortion in high colour images such as photographs TIFF - uber high quality, and shouldn't be used on the web WEBP - Designed by Google, WEBP aims to provide a single web-capable image format. To provide lighter images than JPEG, without the impact on visual quality. Unlike JPEG, it supports lossless compression and allows transparency and animations that may combine images coded with both lossless and lossy compression. In principle, it should serve as a replacement for JPEG, PNG, and GIF, however, it lacks universal support. WebP supports 24 bits and 16.8 million colours. It also supports animation, ICC profiles, XMP metadata, and transparencies via alpha channel. HEIC/HEIF - HEIF (High Efficiency Image File Format) is a standard developed by the Moving Picture Experts Group (MPEG) for storage and sharing of images and image sequences. IT made its debut on Apple's iPhone with IOS 11. This format supports a huge set of features, for example, multi-frame images with multi-frame compression - a key feature for efficient HDR, multi-focus, or multi-view images. It also supports many types of non-image data. SVG - This is short for Scalable Vector Graphics. Scalable Vector Graphics (SVG) is an XML-vector-based graphics format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. It can be scaled up or down to any dimension without loss of quality.

E-Commerce Design Mistakes

Lack of a responsive design - A responsive design fails the most when a user can't access a business website on a mobile device. A responsive e-commerce website should display the site in a way that is appropriate for the device being used. A good proportion of people who have trouble accessing a mobile website will not return (to either the mobile or full browser website). Not customizing a theme - Websites are easy to build with a CMS, but keeping the "default" theme is a big mistake. There are numerous free themes available, and designer-built themes often cost very little, so it is important for a company to choose a theme that matches their brand. Not customizing the theme will mean that the website will look like thousands of other businesses, which is generic and boring. A lack of readability - This has been mentioned before, but readability matters. Customizing things is fine, but don't stray from the well-defined norms. It's easy to turn away visitors because they don't like the design of a website. Use fonts that have already been vetted for readability; don't use a custom font just because it looks "cool." Font sizes should be used consistently and limited to 2-3 sizes. For example, this font (below), Soloist, looks cool in the right context, but could likely be hard to read. A sample of text in Soloist font. Choose font-background combinations carefully. - Adding text over busy images is a readability nightmare, or conversely, using colour combinations where the text fades into the background is also a mistake. Using jargon The copy on a website is just as important as the design. Often, websites that use a lot of jargon send visitors away quite quickly. Humans have a very short attention span, and if they are required to think too hard, they will leave. Copy should be interesting and engage the user, encouraging them to either buy a product or service. Headlines should be straightforward, and descriptions avoid the use of industry-based acronyms and jargon. Poor navigation - Websites with intuitive navigation generally receive more visitors. If a visitor can't quickly find what they are looking for, they will go elsewhere. To ensure a website is easy to use, one of the best things to do is to use a theme. Themes are often designed by designers who understand the ins and outs of proper navigation. For simplicity, keep navigation menus, etc., standardized - vertical navigation on the left side, horizontal navigation on the top.

Text alignment

Left is easiest and most common - large pieces of text = left always Right is for needed text ie. captions

Technical Aspects of SEO

Links: - Having a good internal linking structure helps users navigate a site, but also helps search bots understand the hierarchy of the pages in a website. There should also be a curated series of external links that are relevant to the content on a website. Page load speed: - The faster a webpage loads, the better. A fast website results in a better user experience, and can ultimately result in a better ranking. Mobile compatibility: - A good proportion of Google searches are performed using mobile devices. If a site is not mobile-friendly, there is a greater likelihood search results will not include the site. CMS: - The Content Management System used to create and upload content matters to SEO. Things to look out for include search engine friendly URLs, ease of content creation and caching, metadata forms, and whether the CMS is optimized for your particular kind of website. WordPress is very SEO friendly.

First browser

Lynx

Audio formats

MP3 (.mp3) audio files are actually the sound part of MPEG files. MP3 is the most popular format for music players. It combines good compression (small files) with high quality and is supported by all browsers. WAV (.wav) audio files were developed by IBM and Microsoft. OGG (.ogg) audio (and video) files are an open container format developed by the Xiph.Org Foundation.

Home page and site navigation

Main task: Secondary tasks are made available through menus or "below the fold" (the part of the webpage that can't be seen without scrolling down). Short menus: Mobile users don't have the patience to scroll through a long list of options to find what they want. Reorganize a menu to use as few items as possible, without sacrificing usability. Homepage availability: Users expect to go back to the homepage when they tap the logo in the top-left of a mobile page.

Load time

Make it load under 2 seconds

Site search

Make search visible: A search box shouldn't be hidden in a menu; it should be clearly visible. Search is more important because it is a quick way for users to find things. Make results relevant: Life is made easier on users by providing auto-completing queries, correcting misspellings, and suggesting related queries. Filters: Filters are used to narrow results, as no one wants to wade through thousands of things.

About pages

Many people forget to create a good "About" page, either for a business or personal website. The "About" or "About Us" page is one of the most important pages on a website, and it needs to be well crafted. This profile also happens to be one of the most commonly overlooked pages, which is why it should be made to stand out. It should tell a story - Good stories humanize your brand, providing context and meaning for your product. What's more, good stories are sticky - which means people are more likely to connect with them and pass them on. Using descriptive and emotive copy and gorgeous graphics, an "About Us" page with a story works harder for your business than a generic one. Make the page a story

Elements of on-site SEO

Meta-data is king: - This is data that is hidden from visitors, but accessible to search engines which will use it to rank your webpages. Make sure to optimize in-page meta-data for items such as titles, descriptions, headers, images. Page titles: Found at the top of an internet browser. Page titles tell search engines what the page is about, and should contain key terms. Sub-headings: - Use H1, H2, and H3 tags to help search engines better understand the content of a page. Internal links: Internal links (or hyperlinks) to other content on a site also helps search engines derive information about a site. For example, a blog post which talks about a historic site should have a link to the site. Image name and ALT tags: - Include an image name and ALT tag in images. This helps search engines index images (image searches are just as important). Content: - Content is effective in attracting search engines. The more relevant the content pieces, the more likely search engines will rank a website's pages higher on the search results page. The best method is to create a variety of different types of content pieces that are well-written and on topics that are most relevant to the particular website's audience. This includes blog posts and articles, social media content, How-To guides, video content, and infographics. Content should be original, regularly updated, well-written, and abundant. Phrases: When creating content, another key component is using appropriate keywords and phrases. These are used when a search engine looks for answers to questions.

Typographical guidelines

Minimum fonts: keep font use to a minimum, too many can make a website look unstructured. Use sans serif instead of serif: Sans serif fonts are more suited to the screen. Proper font size: Arial and Georgia should be 10pt, Times New Roman at 12pt. Not all fonts are the same size. Use mixed capitalization: Mixed capitalization makes it easier to scan a page, something that is not achievable with all caps or lowercase. Writing in all-caps is like YELLING and somewhat untrustworthy. Use standard fonts: Don't use unfamiliar fonts; they take longer to read. Limit font colours: Don't use many colours, and limit them to a maximum of four. Do not use blue: Blue text is associated with links, and therefore shouldn't be used. Avoid red and green: Red/green colour blindness is common, so avoid their use in fonts. Contrast: Do not use the same or similar colours for background and text. No erratic text: Do not use things like moving or blinking text; they are just unprofessional.

App vs Web

Mobile App PRO- native functionality personalization offline access CON- Compatibility reach support and maintenance Mobile Web PRO- Compatibility reach support and maintenance CON- native functionality personalization offline access

Disadvantages of mobile websites

On the downside, a responsive website can't leverage some of the features of smartphones that relate to user convenience, such as cameras, GPSs, and even phone dialling.

Usability (mobile)

Optimize for mobile: A responsive layout should be used, which changes based on the size and capabilities of the user's device. No pinch-to-zoom: Users are comfortable with scrolling vertically on a mobile device, but not horizontally. Text that is too small forces users to pinch-zoom, which is bad usability.

Storyboard purposes

Outlines the design Defines the elements that need to go on each page It shows the navigational architecture and information flow to the team and demonstrates how the pages are to work together to provide the user's interactive experience.

Basic Colour Theory

Primary: three pigment colours that cannot be formed by mixing other colours: red, yellow, and blue Secondary: colours formed by mixing the primary colours: green, orange, purple Tertiary: colours formed by mixing a primary and a secondary: Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green

Styling images

Round Edges: border-radius: 8px; Responsive: max-width: 100%; height: auto; Centered image: display: block; margin-left: auto; margin-right: auto; width: 70%; Opacity: opacity: 0.4; Blur: filter: blur(4px); Other filters grayscale(%) contrast(%) hue-rotate(deg) invert(%) opacity(%) saturate(%) sepia(%) drop-shadow(px px px px color)

Basic CSS Syntac

Selector + Declaration (Property & Value) Selector {property:value} ie. h1 {color:red; font-size: 16px;} Alternative format: h1 { color: red; font-size: 16px; }

What to consider when designing e-commerce

Simplicity and minimalism Navigation - Menu bars are essential - The menu bar should always indicate to the user where they are, and should not change - There should not be too many menus, and menus should not have too many options (even if they are drop-down). Simplicity is king and Hick's Law rules. Too many options will cause sensory overload in the users. Search and Filter - Well designed search tool kit (visible, top right) The Shopping Cart - Recognizable icon, that is highly visible (in the standard top-right corner), and easily allows users to check what's in the cart. - Using a different icon (as mentioned before) or a different location, can confuse users. Pricing and shipping should be clear before checkout Divide the products into groupings, which users can easily browse. This helps make the flow of the website much better for the user. Cards! - A grid three cards wide on a normal website can easily be manipulated to be one card wide on a mobile site. On a mobile site, this works even better, because cards are made for thumbs, which is the digit used by many people to interact with their mobile device. Focus on customer FAQ page → HAVE ONE! Social media - Link to social media, use standard icons, open in a new window, improves SEO rankings Websites give companies business

How to be mobile friendly

Simplify menus: Mobile menus should not have as many menu items as desktop websites. Using a structure similar to a normal website makes navigation almost impossible. Decide what sort of information mobile users of the site will need. Sidebars are also useless. Keep forms short: If you ask visitors for a lot of information, then it is not an effective approach. Keep forms short. Long and complicated checkout processes will guarantee people abandon their shopping carts. Include a search function: Encouraging people to use search actually reduces the need for large and complex menus. Check out the mobile website. Make customer service accessible: Your website might be great, but regardless people will always have issues. Helping them in a quick and efficient manner with good customer support will lead to a good user experience. Provide contact information like email addresses and social media. Size matters: Navigating on a large screen is easy. Browsing using thumbs on a 6" screen is not so easy. Make sure clickable things are in the right place. Don't have pop-ups: Pop-ups are horrible, avoid them at all costs. People use their thumbs to navigate on mobile devices, and hence use their thumbs to tap on the screen. The X used to close pop-ups may be too small to close successfully. This can force the user to attempt to zoom in to close the box. Avoid large blocks of text: People don't want to read pages and pages of text on a mobile device. The more they scroll, the more overwhelming they become to read. Choose the proper font: Mobile screens are small (really?), so choosing the right font is critical. Speed is critical: Mobile sites need to be fast. Research has shown that 53% of people will abandon a mobile website if it takes more than 3 seconds to load.

ID

Specifies a unique id for an HTML element and must be unique within the HTML document. <style> #flutterby { CSS } </style> <h1 id="flutterby">Favourite Baking Books</h1> <div class="butterfly">

E-commerce design tips

Tell a story - A good e-commerce website has a story to tell, a brand so-to-speak. Customers will remember a brand if they feel the story behind it is sincere. Why was the product created? How did its creation change your life? Who is your target customer? Good navigation - Customers want to be able to find products, learn about them, and where they can buy them. If it is difficult for them to find a product due to sloppy navigation, or heaven forbid no search capability (or even worse, search with no filters), they might lose patience and leave the site. The less time searching, the more time purchasing. Colour - Use colour effectively to evoke feeling for a product. Green is often used for companies that sell environmental products, earth-tones for companies who are natural-world related. Photographs - Use photographs that are clear and beautiful. Visually appealing images will draw people into a website. A well-situated photograph will instil emotion and create a sense of identity for a product or service. Customers are more likely to remember a photograph than they are a paragraph of text. Make sure the images are of high-quality and are original. Think like a visitor - What do you like about the design of websites you use? To effectively design a website, a designer has to think like someone who will use the website. Are products easy to find? Is there a description associated with the products? Photographs? Is it easy for the customer to buy the products, or find out where they are sold?

Text style

Text can be "decorated," using the property text-decoration, and is used to set overline, line-through, underline, or none. Text can be transformed to specify uppercase or lowercase characters using the text-transform property (the values are uppercase, lowercase, or capitalize the first letter of each word). To indent the first line of text, use the property text-indent. To specify the space between lines, use the property line-height. To specify the space between words, use the property word-spacing. The font-styleproperty is used to specify italic text, with values being italicand normal The font-weightproperty is used to denote boldor normal The font-variantproperty specifies whether or not text is displayed in a small-caps font with values small-capsor normal

Box sizing

The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Problems sometimes occur when the dimensions of an element are calculated. Normally the actual width of an element is calculated as the width+padding+border, and similarly for the actual height. Sometimes this makes elements seem bigger than they have been set using width/height, due to things like the padding. The box-sizing property solves this issue. Adding the property border-box includes the padding and border in an element's total height and width.

Loading

The act of reading on a web page and rendering it.

Display size VS Hardware pixels VS CSS pixels

The display size is the diagonal measurement of the screen, from corner to corner in inches. This is how televisions are measured. The hardware pixels is the resolution of the physical screen in pixels. The CSS pixel is the size used by CSS to determine the display size on a device. This is the actual size of graphics on the browser. CSS pixels are an abstraction created by W3C specifically for web development that has nothing to do with the device's actual pixel density and its actual hardware pixels in the display.

Inline

The display type inline displays boxes that inline following the flow of a line. Anchor (links) and emphasis are examples of elements that are displayed inline by default. For example, in styling a list, it is possible to display all list items in a continuous list, rather than each one having its own line: The display type inline displays boxes that inline following the flow of a line. Anchor (links) and emphasis are examples of elements that are displayed inline by default. For example, in styling a list, it is possible to display all list items in a continuous list, rather than each one having its own line: li { display: inline; }

External style sheet

The greatest benefit of external style sheets is that the look of an entire website can be modified just by changing the style sheet associated with the website External stylesheets exist in plaintext files with a .css extension. It's normally best they exist in the same folder. Each HTML page must include an external style sheet file, using the <link> element inside the <head> section. IE. p {color ; red} Changes the colour of the text in <p> TO RED <link rel="stylesheet" type="text/css" href="style-1.css">

Human perceiving colour (human visual systems)

The human eye has three types of "cone" photoreceptors responsible for perceiving colour (red, green, and blue). Each of these can register about 100 different shades, which puts a ballpark on the number of colours we can perceive as being around 1 million There are, of course, people who have only two cones (colour-blind or dichromats), and see roughly 10,000 colours, and a rare few who have four types of cones and can potentially see 100 million colours (tetrachromats).

Newline

The invisible character that occurs when the ENTER/RETURN key is pressed.

Basic HTML structure

The main page: café-culture.html The sub-page for "discover" - discover.html The sub-page for "places" - places.html The sub-page for "culture" - culture.html The sub-page for "news" - news.html The sub-page for "about" - about.html

Common problems with images

The website is slow - Because it is full of images that aren't optimized for the web. Huge megapixel images should not be embedded in your website, because their size (in megabytes (Mb), or kilobytes (kb)) is too large. Find the right compromise between actual size and quality (resolution), see Image Optimization. The images do not look right on screen. - Maybe this is because of blurriness or pixelation. This is all about resolution. A resolution of 72 PPI is considered a minimum for acceptable quality images, but anywhere between 72-120 PPI is optimal. Sometimes a poor-looking image will result from using too much compression when saving the image, which reduces its quality. The focal point of the image isn't obvious. - Not all photographs work in the proper way. It may be necessary to crop an image to extract a region of high interest; otherwise a visitor to the site may have a hard time deciphering what the purpose of the image is relative to the theme being discussed (or product being sold). The image is poorly composed. - Choosing appropriate images for a website is as much about aesthetic appeal, as it is about content - making an image eye-catching and visually appealing. Properly composing an image means framing it for maximum impact, something that is best done when the photograph is taken. This has to do with the traditional rules that artists use, for example, the "Rule of Thirds," repetition, making use of positive, and negative space. The image looks distorted. - This is commonly caused by stretching images out of proportion. Keep the original proportions of an image when scaling up or down. The image isn't accessible. - Probably because it has no metadata associated with it, some of this data is created automatically, much like the data a camera generates. Other textual information (e.g., image names and descriptions, keywords, captions) is optional and should be included because it makes for a better user experience. The image is boring. - Be careful here, too much editing can have the opposite effect where the image becomes, let's just say unnatural. Follow some of the simple image manipulation techniques. The colours don't look right. - Colours will appear differently depending on the screen being used. It's similar to how photos will look different printed than they do on the screen. In order to fix this, the screen needs to be calibrated. You're using generic stock photography. - One word - don't.

Headers and footers

They can also be used within the article elements, making them the header and footer of the sections within which they are contained. For example, you can have a footer for an article, and another one for the page as a whole.

Web inventor

Tim Berners-Lee (WWW) "Web" because everything can link to anything else

Internal style sheet

Used when there is a single page that has a unique style Defined within the <style> </style> element, inside the <head>section of an HTML page <style> p {color: red;} </style>

Website scrolling patterns

Vertical scrolling - Usual Horizontal scrolling - Good for mobile and lots of photos Infinite scrolling - Continually load content Parallax - Different elements moving at different speeds ie. moving icons when hovering, pop up buttons when hovering, moving foreground

Visual hierarchy

Visual hierarchy means arranging and organizing website elements so that users naturally gravitate toward the most important elements first. When it comes to optimizing a website for user experience, the goal is to lead users to complete the desired action, but in a way that feels natural and enjoyable. By adjusting the position, colour, or size of certain elements, the site can be structured in such a way that users will be drawn to those elements first.

How content management systems help

Website management: For a website with 2-3 pages that is fairly static, and does not need a lot of maintenance, HTML might be a good bet. However, businesses may require a more dynamic website with multiple pages that are modified quite often. A CMS will make this easier to achieve. Development time: Businesses often opt for a CMS because it reduces the time needed to design and develop the website. Most CMS systems use some form of pre-built themes to achieve this, with the downside being that a website might not seem unique, as many sites may use the same theme. So, knowledge of both HTML and CSS is needed to customize the design. From an HTML perspective, setting a website up from scratch can be costly, both monetarily and in terms of time. Customization: CMS makes it easy to change an image, or text, because of the ease-of-use of the front-end user interface. This is largely because these sites are WYSIWYG, or "What You See Is What You Get." Changes on an HTML website are more difficult, as pages have to be manually modified, including changes to the CSS files. Most themes are also designed to be responsive (i.e., work regardless of whether they are viewed on a computer monitor or mobile device). Previews and testing: A CMS allows preview of a website at the click of a button. This is harder to do if creating an HTML-only website.

How does colour work?

When the web began, there were very few colours available (computers only supported 256 colours), and people didn't really know how to use them properly. Now typically, there are over 16 million-odd colours at our disposal. Each colour is comprised of each of the three basic colours: red, green and blue, each of which has 256 shades. When using colour on a website, it is common to see it represented as a hexadecimal value. Here black is represented as 00 (the absence of all colour) and white as FF (the presence of all colour). Note that the perception of these colours will depend on the type of display and the person viewing the webpage - not all colours are perceived the same.

Who controls the web

World Wide Web Consortium (W3C)

Links and lists style

a:link - a normal link that has not been visited. a:visited - a link that has been visited. a:hover - a link that is moused over. a:active - a link the moment it is clicked.

Quotations

blockquote → standalone often multi-line quotations <blockquote cite="https://metro.co.uk/2019/01/30/story-destroyed-world-plastic-fix-8405293/"><p>"Every breath of air we take, every mouthful of food that we take, comes from the natural world. And if we damage the natural world, we damage ourselves." Sir David Attenborough discussion with Prince William at the World Economic Forum, Davos, 2019</p> </blockquote> q → in line quotations <p>Naturalist Sir David Attenborough has said that with respect to climate change we face <q>irreversible damage to the natural world and the collapse of our societies</q>. </p>

Background

body { background-image: url("baking.jpg"); } Repeat horizontally only: background-repeat: repeat-x; No repeat: background-repeat: no-repeat; background-position: bottom; Shortcut: body { background: url("baking.jpg") no-repeat fixed bottom; } Specification = order of property vals: 1. background-color 2. background-image 3. background-repeat 4. background-attachment 5. background-position Cover: background-size: cover;

Interacting with floating objects

clear: left - will clear left floating boxes clear: right - will clear right floating boxes clear: both - will clear both left and right floating boxes

Borders

h1 { border-style: dotted; border-width: 2px; border-color: Tomato; } Shortcut h1 { border: 2px dotted Tomato; }

Height and width

h1 { width: 75%; }

Websites =

hardware + address

<figcaption></figcaption>

image caption

What swap did apple make?

killed finicky Adobe Flash and replaced it with HTML + CSS + JavaScript.

Margins

margin-top margin-bottom margin-right margin-left Shortcut for margin-left = margin

Max-width

max-width: 100%; for reponsiveness

Padding

padding-top padding-bottom padding-right padding-left All sides = padding

Positioning

static - This is the default setting, rendering a box as it would normally appear in HTML. absolute - This takes a box out of the normal flow of a webpage and places it in its own world. The box can be placed anywhere on the page using the elements top, right, bottom, and left. relative - This is very much like static, except a box can be offset from its original position using the elements top, right, bottom, and left. fixed - This behaves like absolute but will position a box with reference to the browser window as opposed to the web page. Fixed boxes stay exactly where they are on the screen, even when the page is scrolled. float: left (or right);

display: inline;

to display a list horizontally

Image as list icon

ul {list-style-image: url('book-icon.jpg')}

Resolution

DPI - dots per square inch If a standard printing resolution were 300 DPI, a 4000×6000 image could be printed at 13.3×20 inches

Metadata

Data that describes other data. Metadata is used to describe individual pages on a website, allowing search engines to understand what each page portrays.

Issues with e-commerce sites

Limited access to product information Shopping carts that do not conform to the standard, and confuse the user Sites that contain erroneous information (e.g., "Where to purchase" with stockists that don't actually stock a product)

Symmetry

The mind perceives objects as symmetrical, forming around a centre point. It is perceptually pleasing to divide objects into an even number of symmetrical parts. Symmetrical elements are simple, harmonious and visually pleasing.

Website Structure

A website, in its simplest form, is just a collection of HTML files organized into one or more folders. To refer to those files from inside of another file, the Internet uses "uniform resource locators" (URLs). The URL specifies the "address" of a file (for example, another web page or an image). Depending on the location of the file, either a relative or absolute URL must be used.

Navigation

Effective navigation includes a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the "three-click rule," which means users will be able to find the information they are looking for within three clicks.

Markup Language

Language that annotates text so that the browser can manipulate that text. Most markup languages are readable by humans because the annotations are written in a way to distinguish them from the text itself. For example, with HTML, XML, and XHTML, the markup tags are < and >.

Usability factors

Learnability: How easy it is for a new user to accomplish tasks the first time they visit a website? Memorability: How easy it is for someone to come back to using a website after they haven't used it for a period of time? Efficiency: How quickly users can complete tasks on a website after they are familiar with its use? Satisfaction: Do users enjoy the design of a website? Errors: How many errors users make when they use a site? How severe are the errors, and how easy is it to recover from them?

Hamburger menu

Menus take up a lot of screen real-estate, and do detract from a minimalistic view (if that is important). An alternative to this is the hidden or hamburger menu. The hamburger menu is represented by three parallel, horizontal lines, provides an economical way to save space by hiding your navigation off site. POSITIVE: On the one hand, removing a large series of navigation bar elements does make the experience cleaner and more distraction-free. NEGATIVE: On the other hand, it obscures vital information and interactions from your visitors.

Image optimization

Nobody likes a slow website. Large, high-quality images can slow things down as they load, and slow pages drive away visitors. Unless you are a professional photographer, there is likely no need for 20MP images. Conversely, fast-loading images that lack quality won't help people return to a website. Benefits: - It improves page loading speed. - It improves Search Engine Optimization because search engine crawlers hate slow sites. - It's faster to create backups (you need to backup a website like anything else). - Smaller image sizes use less bandwidth. That's beneficial for mobile browsing. - Small files require less space on a server. Image optimization is really dependent on image file format and image compression. If you take a picture with a 24-megapixel camera, it's not necessary to use that picture on a webpage. One a fraction of the size will suffice. People won't be blowing the picture up to 24"x36", so it likely won't matter.

How storytelling is useful in webdesign

Stories provide order and meaning by simplifying the complex. Stories can make the material more memorable. Stories can elicit feelings and emotions. Stories powerfully persuade where facts cannot, allowing the audience to come to the desired conclusion on their own.

Strategies for Designing Visual Hierarchy

1. Establish defined scanning patterns - Use F configuration 2. Use white space - Removes clutter - Increased focus 3. Use repetition - Some obvious places to use repetition on a website are the font, colour scheme, line thickness, shapes, etc. - When establishing a theme, repetition is a vital ingredient to consistency through space emphasis and unification. 4. Breaking the flow - A good example is again the Ark Shelter website. The auto-play video helps distract the user from the task of finding out more about the small houses.

Unordered list

<ul> <li> </li> </ul> - creates bulleted list

HTML Entity

A special character that can't be represented as plain text in an HTML document. This typically either means it's a reserved character in HTML, or you don't have a key on your keyboard for it. Entities always begin with an ampersand & and end with a semicolon ;

Hick's Law

Less is better - Categorize choices: By categorizing choices, a user does not become overwhelmed. A good example is a blog where posts can be organized based on categories. - Limit the number of choices: A good example is a form, which users hate filling out. Make the forms simple or allow users to sign up using social media. Also, limit the navigation options and the number of lists. - Divide and conquer: When purchasing something on an e-commerce website there is still a need for the user to enter information, but by breaking it up into chunks (e.g., email/password, shopping cart info, delivery info, payment info) it may seem a shorter process for the user. - Hide and seek: If there are complex things on your website, hide them from all but those users who can handle using them.

Compression

Loosy = file is saved with loss of quality Lossless = file is saved without loss of quality The easiest way to save space is to save the image as a JPEG with lower quality. The loss of quality really is dependent on the level and type of detail in the image. For example, a JPEG image, which is 3035x3021 pixels in size, is 6.3MB as a 100% quality JPEG. Reducing the quality to 80% will reduce the file size to 1.8MB, reducing it to 60% will make the file size 1.2MB. Even at 60%, the quality is quite good.

Tags

Markers are referred to as tags, and they have angle brackets, < >, around them. HTML elements usually consist (but not always) of two tags, one opening and one closing. In our example, <html> is an opening tag and </html> with the slash is a closing tag. The text between the opening and the closing tag is the content of the HTML element. With <html> and </html> we tell the browser about the beginning and end of the HTML of our web page. HTML offers a huge number of such tags, and browsers are designed to interpret them, formatting the contents based on preset rules.

Continuity

People have a tendency to perceive a line as continuing its established direction. When there's an intersection between objects (e.g. lines), we tend to perceive the two lines as two single, uninterrupted entities. Elements following a continuous line are perceived as grouped. The smoother the line segments, the more we see them as a unified shape; our mind prefers the path of least resistance.

index.html

The filename index.html is special. If a website address is called, for example, https://eatingwildfood.ca, the index.html file is automatically displayed first, which in this case is https://eatingwildfood.ca/index.html.

Comments HTML

<!-- HELLO -->

SEO stands for...

Search Engine Optimization

Megapixels

The number of pixels in a camera sensor in millions of pixels ie. 12MP camera sensor might be 3000 pixels in height and have a width of 4000 pixels. Note that while the number of pixels doubles from 12MP to 24MP, the dimensions do not - an 8000×12000 pixels image would have double the dimension, but four times the size at 96MP.

Occam's Razor

The simplest solution is usually best Keep it simple and don't distract form the goal

Database:

Blogs or shops will require a database.

How does the web work

Client-Server model Client side = using your mobile phone to look something up (Browsers)

Design Laws

Proximity Similarity Closure Symmetry Continuity

Naming conventions

No spaces for HTML files to seperate Only lowercase ie. montreal-cafes.html

Headings

The largest heading is <h1>, and decrease in size to <h6>

Text guidelines

The text should be easily readable, and the ideal font size is 16px, and stick to a maximum of 3 fonts, in a maximum of 3-point sizes.

Bandwidth:

The traffic, or amount of data that is transferred to and from a website.

URL STRUCTURE

- Request message - URL (Uniform Resource Locators) - Structure = protocol, host, resource path - Default port = 80 - Protocol = HTTP (HTTPS for secure, FTP for transfers)

Background Videos

Alternative to a hero image They can be used to tell a story and actually reduce the amount of content needed to explain the key points of the website. In comparison to text, a video was processed 60,000 times faster by our brains. Videos are effortless to consume, versus large blocks of text.

Transparency

GIF, PNG, and TIFF support transparency through a transparent colour, or an alpha channel.

Why is e-commerce important?

It can broaden a brand It is convenient It increases reach Marketing opportunities Scalability Data

Webspace

Storage space, similar to what you would find on a computer, or mobile device. For example, a blog with text and standard images would likely require 1-2GB. If the blog were to contain a lot of videos or music, then 10GB might be more appropriate

<aside> </aside>

The <aside> tag allows content to be marked as being not wholly related to the content of the page (e.g., sidebars).

Render

When a webpage is loaded into a browser, it is rendered, (i.e. the HTML is interpreted, and the visual elements displayed).

Pixels

Building blocks of images In the case of a monochromatic black-and-white (grayscale) image, a pixel takes a value between black (0) and white (255) R-B-G Converted to B&W by averaging RBG Abstract size The size of an image for a webpage is directly proportional to the number of pixels in the image. The best way to determine the proper size of a particular image is to load it into an image editor and view it at 100% - then reduce. It can then be reduced to various sizes to determine which maintains its quality. Generally, reducing the image dimensions by 50% does a good job of reducing its size - not forgetting that a 50% reduction in dimensions relates to a 75% reduction in size. So 12 megapixel images with dimensions or 3000 x 4000 after a 50% reduction would be 1500 x 2000 = 3 megapixels.

Differences between the spoken or written narrative, and that of the web page.

1. Content - Visitors to a website can drop in at any given point, so it is important to provide content-orientation cues so that the user is best able to construct the story for themselves based on the information provided. - A story that is told through content does so by establishing strong connections between information. The story is told through the main paragraphs and "teaser" text (which can help draw a user into a site), but also through things such as titles/headings, navigation labels, hyperlink text. 2. Visuals - Visuals should be used to help tell the story, not fill empty space. - By having an understanding of how the visual story will unfold, this can be used to guide design choices such as colour, whitespace, typography, texture, etc. 3. Interactivity - The interactivity of the website helps enhance both the content and visuals and, ultimately, the user experience. This can be achieved by guiding the user through the site. - Storytelling incorporated into a site's interactivity can inform how users move from page to page, and the ways in which visual promptings of "what happens next" are structured.

Basic structure of HTML page

<!DOCTYPE html> <!-- tells the browser what kind of content to expect.--> <html lang="en"> <head> <!-- head element contains all the pages metadata, things like the page title, any CSS stylesheets (more on this later), and anything else required to render the page, but you don't need the user to see.--> <meta charset="utf-8" /> <!-- meta line = A character set is a type of "digital alphabet" for a browser. If the character set is not specified, some special characters may not get displayed correctly.--> <!--meta element has no closing tab but they are the exception--> </head> <!-- "<html>" = opening tag --> <!-- everything inside the opening/closing tag = HTML element --> <body> <!-- Content goes here --> <!-- body element includes headings paragraphs and content --> </body> </html> <!-- "</html>" = closing tag -->

Inline CSS

<em></em> - italics <strong></strong> - bold <br> (self closing) - line break without extra space ie. <p> <em>Photography takes an instant out of time, altering life by holding it still.</em><br> - <strong>Dorothea Lange</strong> </p> <small> </small> - smaller text <mark> </mark> - highlighted text  - subscripted text  - superscripted text <q> </q> - a short quote <blockquote></blockquote> - quote which is indented with a line above and below <hr> - defines a thematic break in an HTML page and is most often displayed as a horizontal rule. <abbr> </abbr> - defines an abbreviation or an acronym

Embedding CSS style

<tagname style="property:value;"> The background-color property defines the background colour for a HTML element... <body style="background-color:powderblue;"> </body> The color property defines the colour for a HTML element... <body style="background-color:powderblue;"> </body> The font-family property defines the font to be used for a HTML element... <p style="font-family:courier;">This is a paragraph.</p> The font-size property defines the text size to be used for a HTML element... <p style="font-size:160%;">This is a paragraph.</p> The text-align property defines the horizontal text alignment for a HTML element... <p style="text-align:center;">Centered paragraph.</p>

Breadcrumbs

A breadcrumb is a line of dynamic text or visual links. Breadcrumbs show the website user the path they have taken, and their current location (rightmost link). Breadcrumbs act as a secondary navigation aid but should not compete with the core navigation schema. Each link can be selected at any time. Clicking on "The Site" will take you to that page, and the breadcrumbs will change accordingly. The classic version of breadcrumbs uses dynamic text in combination with the greater-than ">" symbol to separate pages.

Card design

A small rectangular module with images and text. Websites using card design help distribute information in a visual way so the visitors can easily consume bite-sized pieces of content without being overwhelmed. Cards can come in all manner of shapes, colours, and forms, but generally, they'll all include an image or icon, plus basic information, such as a title, user name, or occasionally text. They are simple, organized, easy to read, rank free (content does not need to be ranked), social-media friendly, flexible, increase space utilization, improve operability (e.g. stacked, moved, swiped), and can provide a personalized user experience. Airbnb.ca is a great example of the use of cards. Here's another use of "cards" on www.objectsofuse.com, where the cards represent product categories. Cards should be responsive (i.e. as screen sizes change, cards should adapt accordingly).

Accessibility + types

Accessibility is designing for inclusion. By 2019, 63.4 percent of all mobile phone users will access the Internet from their mobile phones. So, to provide good user experience, a site needs to be compatible with different devices, operating systems, and browsers. This means the structure of a website should be very flexible and responsive. In a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a user happens to be using. Access means designing for different devices and places. Websites like the Icelandair discussed earlier change things likely time, language, location and currency based on information sent by a user's browser, or perhaps geolocation of an IP address. Making these changes makes it easier/quicker for the user actually to achieve their tasks. Improving accessibility can be as simple as adding "alt-text" to all of your images (so visitors who can't see images in their browsers can still understand what's on the page). Types: Physical: People don't have access to technology that will help them overcome physical limitations. Visual: Websites aren't designed to accommodate people using screen readers or other technology. Auditory: Audio and video files aren't correctly captioned or transcribed. Cognitive: People don't have access to technology that will help them read, click or scroll through a website.

Attributes

Attributes declare additional information for an element. Attributes are part of the opening tag of an element and always have a name and a value. As an example, consider the HTML element for a link. It is probably one of the most important elements - what would the internet be without links? <a href = "http://eatingwildfood.ca"> Foody Website </a> The attribute name comes first, then an equal sign, then the "value" of the attribute in either single or double quotation marks. This syntax distinguishes attributes from content (which goes between the tags) In this example, the <a> element above includes an href attribute (short for "hypertext reference") with the value https://eatingwildfood.ca. The browser knows that it must show the link as "Foody Website."

Heuristic evaluation questions

Does the website keep things simple? - A usable website avoids information that is irrelevant or rarely needed. Only the text and visual elements that are needed are shown - no more, no less. Every additional thing competes for visitors' attention. Are users informed? - A usable website provides feedback when something changes, such as an icon lighting up or text telling a visitor that their task was successful. For example, when Expedia performs a query, it shows a graphic that illustrates a search is underway. When an item is added to a shopping cart on an e-commerce website, the shopping cart should indicate the number of items it contains. Does the website speak the user's language? - A usable website uses words, phrases, and ideas that are familiar to the audience, and avoids jargon that few really understand. This is about simple things like the 404 error messages. Is the website consistent? A usable website follows established conventions when possible and doesn't make visitors wonder whether different words or ideas mean the same thing. Does the website avoid making visitors remember things? - A usable website makes actions and options visible to visitors, so they don't have to remember things from one point to another. Most people are busy, distracted, and much less invested in a website than you might like. Don't make them think. Does the website provide control and freedom to explore? - A usable website makes it easy to find things. If visitors make a mistake, there should be easy ways to go back, start over or continue a different way. A usable website also provides a search capability. Does the website help visitors avoid mistakes? - A thoughtful design should prevent problems from occurring by guiding visitors to success, capturing errors as they happen, and avoiding as much unnecessary complexity as possible. Does the website help visitors recognize and recover from errors? - To err is human. If visitors make mistakes, a usable website should use plain language to explain what happened and how they can successfully complete whatever they were trying to do. Is the website's help...helpful? - Ideally, visitors shouldn't need to use documentation to use a website successfully, but sometimes it's necessary to provide help or customer support. A usable website makes these resources easy to find, read, and search. This allows users to focus on the important things they are trying to do. Does the website grow with your visitors? - A website should be easy for new and novice visitors, but also scale to speed up the experience for expert users - ideally in ways that are invisible to the new folks. A usable website allows visitors to customize as they go, in ways that flow naturally with the experience.

Gestalt Design Laws

Emergence - Identify clear objects before complex Reification - Recognize objects even when things are missing (fill in gaps) Multi-stability - People interpret ambiguous objects more than one way Invariance - People recognize simple objects independently of their rotation, scale and translation

HTML vs CSS + javascript

HTML is for adding meaning to raw content by marking it up. It is composed of a series of tags (elements), all of which have their own identity. These consist of opening and closing tags, with appropriate content in between. HTML defines a complete series of tags, for headers, footers, navigation, videos, etc. - The basic building block of websites. In its simplest form, a web page is a plaintext (i.e., human-readable), a file that contains instructions about the type of content it contains. - It provides the structure, content, and connection between pages, allowing web designers to create interactive experiences. - HTML defines the content of every web page on the Internet. By "marking up" raw content with HTML, the web browser is informed as to how differing parts of the content are to be displayed. CSS (Cascading Style Sheets) is the language applied to an HTML tag to format it (i.e., add style). A CSS takes the name of an HTML tag and defines properties such as height, width, colour, borders, margins, etc. JavaScript, which is used for making the content and formatting interactive elements.

Conventionality

Having the main navigation at the top (or left side) of a page. Having a logo at the top left (or centre) of a page. Having that logo be clickable, so it always brings a visitor back to the homepage, regardless of where they are on the website. Having links change colour/appearance when you hover over them. Use a shopping cart icon for your cart!! - DO NOT USE A SHOPPING BAG - The first issue is a shopping cart that is barely visible and does make itself known, i.e. nothing happens when an item is added to it (the page has to be manually refreshed). The icons below do little to inspire confidence. - Auto-refreshing a cart to update shipping fees, item counts etc., keeps the shopper updated, and makes them less likely to abandon their shopping. If a cart seems empty, a customer might think something is wrong with the shopping system. - Another issue is forcing people to create accounts before they can make their purchases - 25% of shoppers abandon their purchases because of this annoyance. - Users want instant gratification. - Similarly, shoppers are wary of any website where the financial transaction takes too long.

How to tell a story

Images and illustrations: - People generally prefer images over text because they are much easier to process. Well-chosen images tell a story. Background images can add depth to a design and help the user focus on what the website is all about. For example, a background image of a landscape to illustrate a website for an eco-related company. A good example of the use of background images is the WeForest website (https://www.weforest.org/ opens in new window). Illustrations such as infographics can help convey things like quantitative information without the user having to make sense of numbers. They can also be used to show how things work. Illustrations can realistic or even abstract. Words: - The pen is mightier than the sword, and well-written stories can be very powerful. Every single word on a website contributes to a website's story. Interactivity: - Techniques such as parallax scrolling help create layers in a design, providing a sense of depth, and engaging the visitor - the story changes as they scroll. A webpage can also involve people in the process of visiting the website. Social media: - Helps websites connect with the people that use them. A restaurant may use Instagram to distribute the daily menu or show people the type of dishes they make. Video: - Moving pictures are easy for humans to understand because we interpret them so easily. Many things can be easily illustrated in a video, as opposed to writing them down in copy (text).

Links

Links can be added to a webpage using the <a> </a> element, which stands for anchor. The anchor uses the href attribute tells the browser that the <a> element is, in fact, a link, and it should render the content in its default blue text. The destination of the link is usually somewhere else on the website, but also any page on the internet. The content, in this case, is the "link text" (i.e., what the user sees on the webpage because the user does not want to see a web address). Linking to an internal website (Relative links): <a href="vintagecookbooks.html" > Vintage Cookbooks </a> - It's implied that the scheme and domain name are the same as the current page, so the only thing you need to supply is the path. - If the target file is located in another folder, this must be taken into account: <img src="images/nfld.jpg" alt="Picture of Newfoundland"> Linking to an external website (Absolute links): <li><a href="https://ca.phaidon.com/store/food-cook/the-nordic-baking-book-9780714876849/" >

Divine Proportions

Magic number = 1.618 A Golden Rectangle. - A Golden Rectangle is one whose length is 1.618 times its width. - For example, a rectangle with a width of 1000 pixels and a height of 618 pixels. The same idea can also be used for font sizes. If a document uses 10pt font for the text body, then the best size for heading might be 10*1.618 = 16.18 = 16pt.

Fitt's Law

Making a small button 25% larger will make it easier to use, but making a large button 25% larger will not be effective. The size of an object should be proportional to its frequency of use.

Status Codes

Once a request has been made, the server responds with status codes and message payloads. - 1xx: Informational Messages (new to HTTP/1.1): This tells the client to continue sending the remainder of the request. - 2xx: Successful: This tells the client that the request was successfully processed. The most common code is 200 OK. - 3xx: Redirection: This requires the client to take additional action. The most common use-case is to jump to a different URL to fetch the resource. - 4xx: Client Error: These codes are used when the server thinks that the client is at fault, either by requesting an invalid resource or making a bad request. These are the codes most often seen by web users: - 400 Bad Request: The request was malformed. - 401 Unauthorized: request requires authentication. The client can repeat the request with the Authorization header. If the client already included the Authorization header, then the credentials were wrong. - -403 Forbidden: The server has denied access to the resource. - -404 Not Found: The resource does not exist. - -405 Method Not Allowed: Invalid HTTP verb used in the request line, or the server does not support that verb. - -409 Conflict: The server could not complete the request because the client is trying to modify a resource that is newer than the client's timestamp. Conflicts arise mostly for PUT requests during collaborative edits on a resource. - 5xx: Server Error: This class of codes are used to indicate a server failure while processing the request.

Basic accessibility guidelines:

Provide text alternatives and captions for non-text-based media (i.e. videos and images). Allow users to traverse the page with only the keyboard - not all users have access to devices like a mouse, so they should be allowed to navigate using the keyboard. Provide users with control over which features to load or change (e.g., increasing text size). Design text with sufficient contrast - the lower the contrast, the harder it is to read. Content should be easy to read and consume (e.g., grammar, spelling, content location, text size). Content should follow a logical focus order - headers, paragraphs, and sub-headers should be organized based on content direction. The text should never be justified and dynamically resize itself without going off the page and requiring the user to scroll horizontally.

Image scaling

Reducing the dimensions of an image by 50%, reduces its size to 25% of the original. A 4000×3000 pixel image becomes 2000×1500 pixels. TIPS: It's all about resolution: Pixels are the raw medium of the image. There is little purpose in uploading a 12, 16, or even 20-megapixel image - they are just too large. Downsample the image if possible. Crop it! An image taken with a 12-24MP camera will produce an image that is large. Sometimes the whole image is not required, and cropping allows the size of the image to be changed, or even it's shape. Sometimes an image is cropped to remove parts of the image that aren't necessary or to refocus the image on another object. Here are some examples of how an image can be cropped. Adjust the contrast: Cameras don't take perfect shots, and sometimes the contrast can be a little lacking. Contrast is about accentuating the difference between the light and dark regions of an image. Increasing the contrast of an image can dramatically improve the visual impact that has, by making the boundaries between those light and dark parts more distinct. Below is an example of an image that has low contrast. The histogram has been stretched so that the contrast becomes much more apparent, and the image loses some of its "hazy" feel. Adjust the colours: Some images look better if their colours are more saturated to the point where they look somewhat comical and unrealistic, others are better as monochromatic black-and-white images. These choices are more subjective and have to be modified to fit the theme of the particular web page.

Wordpress

Stored on central server/repository Remote hosting What to know: It is free. - It is possible to host a website on WordPress.com, or a self-hosted website. WordPress is open-source, meaning that it is developed by a community of contributors. It is adaptive - It can be used for many different types of websites, not just for blogging. It is easy to incorporate plug-ins to turn a simple website into an e-commerce site. A good example of such a plug-in is WooCommerce, woocommerce.com. Here are some examples of websites using WooCommerce: Ceasar's Homemade Ice Cream - www.heladitos.com/en/ It is easy to customize - WordPress with themes and plugins. Themes serve as the site's foundation, and after choosing an appropriate theme, the design work is minimal besides some colour changes, logo additions, and of course, the new pages and blog posts. It is possible to add plug-ins to increase functionality and change themes to provide a fresh look to a website. WordPress is SEO friendly. - It produces standard, high-quality code, with semantic markup. Search engines like WordPress and WordPress sites tend to rank higher than other sites. WordPress is easy to learn and use. - Plug-ins, content, and themes can be easily managed from the WordPress dashboard. As it is open-source software, it can be used by anyone. It takes a very short amount of time to learn to use the interface. The amount of online help available is tremendous with blogs, forums, online courses, seminars, webinars, and books, all outlining different aspects of the WordPress platform. Here is an example of the interface to writing an article. WordPress can handle multiple types of media. - It allows images, documents, audio and video. It will allow upload of the following common file formats: .jpg, .png, .gif .pdf, .doc, .pptx, .mp3, .m4a, .mp4, .mov, .wmv, and .avi.

Reserved characters

The <, >, and & characters for instance are called "reserved characters" because they aren't allowed to be inserted into an HTML document without being encoded. This is because they mean something in the HTML syntax: < begins a new tag, > ends a tag, and & sets off an HTML entity. Quotes: Double quotes: &ldquo; &rdquo; Single quotes: &lsquo; &rsquo; Ampersand &: amp; Copyright ©: &copy; Degree sign °: &deg; Euro €: &euro; One-half ½: &frac12; One-fourth ¼: &frac14; Three-fourths ¾: &frac34; Greater-than >: &gt; Less-than <: &lt; Multiplication ×: &times; Plus-or-minus±: &plusmn; Trademark™: &trade; Small e with accent grave è: &egrave; Small e with accent acute é: &eacute; Small a with accent Circumflex â: &acirc;

History of HTML

The Internet already existed in the 1980s and 90s, such that it was - mostly emails and file transfers. In fact, before the internet, there was a bunch of regional networks loosely tied together - ARPANET, AARNet, etc. Tim Berners-Lee was working at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland. - He realized it would be useful to have a simple method of sharing information, and so developed a markup language based on SGML format. He developed a simple protocol, HTTP (HyperText Transfer Protocol), for retrieving documents via hypertext links. - This was the birth of the web as we know it today.

Verbs

The action that should be performed on the host - GET: Fetch an existing resource. The URL contains all the necessary information the server needs to locate and return the resource. - POST: Create a new resource. Usually carry a payload that specifies the data for the new resource. - PUT: Update an existing resource. The payload may contain the updated data for the resource. - DELETE: Delete an existing resource. - Sending messages: message = <start-line> *(<message-header>) CRLF [<message-body>]

Colours

The colour palette used should be well thought out to create a sense of balance. Using contrasting colours for text and background makes it easier to read. Research has shown that text and background combinations that are too high or too low in contrast can lead to eye strain. Black text on a white background actually has the highest contrast. Instead, try using dark gray on a white background, so the change in brightness is reduced.

Hero Images

The large web banner image, prominently placed on a web page, generally in the front and centre. The hero image is often the first visual element a visitor encounters on the site. Having a visitor focus on the image creates a strong visual experience. They help tell a story without having to rely on text. These websites have to be responsive so people can have the same experience, whether on a normal or mobile browser.

HTML 5

The latest HTML specification Managed by the World Wide Web Consortium (W3C). Introduces new features and support for multimedia. For example, HTML5 supports the <video> tag. Many of the improvements centre around making documents self-describing. The nice thing about HTML is that content can be arranged however is required - this is both a blessing and a curse (because you can end up with a mess!). The general idea behind the use of semantics is to mark up content according to its type and importance. This is similar to how content in books is arranged into sections, chapters, and paragraphs. HTML5 introduces new semantically oriented tags, to allow marking things like navigation <nav>; headers <header>; and articles <article>.

Consistency

The overall look and feel of a site should be consistent across all of a site's pages. Backgrounds, colour schemes, typefaces, are all areas where being consistent can have a positive impact on usability. That's not to say that every page has to look exactly the same, just that groups of pages should look similar (e.g., blog post pages, information pages, etc.). If a website is to be offered in more than one language, then the use of language should also be consistent. For example, many transit systems such as rail in European countries offer an alternative in English. However, the translations must be consistently used.

HTTP (or HyperText Transfer Protocol)

The protocol used to transfer web resources. HTTP allows for communication between a variety of hosts and clients and supports a mixture of network configurations. Includes... - URL structure - Verbs - Status codes

Navigability

The structure of the main navigation should be simple, and near the top of the page. Nobody wants to have to go and search for something. There should be navigation links in the footer as well (repetition is okay). Breadcrumbs should be used on every page so that users are aware of where they are. A search window should be situated near the top of the site so that users can easily search by keyword. Don't make visitors dig too deep (i.e., don't require the user to dig seven levels deep to find something). The labels and location of navigation structures should remain the same on each and every page of the site (i.e., they should be consistent — for example, icons like search).

Scanning Patterns

There are two classic scanning patterns, "F," and "Z" shaped. Eye-tracking studies have shown that people scan computer screens in an "F" pattern. - Most of what people see is in the top and left of the screen, and the right side of the screen is rarely viewed. - Rather than trying to force the viewer's visual flow, effectively designed websites will work with a reader's natural behaviour and display information in order of importance (left to right, and top to bottom). The "F" pattern is viewed in the following manner: 1. Users first read in a horizontal movement, usually across the upper part of the content area. 2. Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. 3. Finally, users scan the content's left side in a vertical movement. Sometimes this is a slow scan. The problem is that when people scan in an "F" pattern, they can miss large chunks of content. This is not the only pattern; there are others including (i) layer-cake pattern, where users scan headings and subheadings and ignore paragraph text; (ii) spotted pattern, where users look for some specific text; (iii) bypassing pattern, where users deliberately skip portions of text.

Webserver

Web Servers are used to store, process, and deliver web pages to clients (e.g., web browsers like Google Chrome).

Proximity

When people group things together that are close together in space. They become a single perceived object. Make sure things that do not go together are not perceived as one. It can be used for grouping similar information, organizing content and decluttering layouts.

Chunking

When writing a large amount of copy (text), it helps envision the content into topics and subtopics, and avoid creating a long-form document, like a printed novel. Dividing information into smaller parts is known as chunking and allows users to scan information. There are various ways to perform chunking, including writing short paragraphs, using bulleted lists, or even separating paragraphs with figures, and images.