week06 content strategy - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki
Objectives:
- SEO again
- CSS for responsive design: mobile friendly (image and layout)
- (optional) side menu, nav bar
- (advanced topic) accessible multimedia player
- next WCAG(3.0) toward plain-language & content strategy/design
Search Engine Optimization is how to assist the search engines to find and to use the website for the search context. Basically, it is beneficial search engines (so we need to provide the information as machine-friendly not for the ordinary users) but eventually that search machine is expected to serve human user's search behavior (but, we may want to criticize how search engines would intervene and manipulate the search results - and how much eagerly industries want to influence the result as part of their marketing effort. But let's skip that discussion). We want to believe a better SEO is correlated with a better ux (or vice versa).
Let's understand what kind of information/code search engines need to process the website efficiently.
https://web.dev/lighthouse-seo/
To understand the book at the first sight without reading all, for example, we tend to scan the book title (and table of contents, keywords). That is the purpose of the title. You will place the <title> in <head> where web browser manages all the admin and external relationships.
If you put just <title> untitled </title> to fill in carelessly simply to avoid SEO errors, it may work. Just because the machine cannot understand the meaning of the title, if there is something, the search engine would say pass. But, it is better to provide a meaningful and useful title for accessibility.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
You can also change the title dynamically by using javascript. The technique is similar to how you change the style, but this time you need to write something to replace the original text. For that, innerHTML is used.
<head>
<title> untitled </title>
</head>
...
<script>
var myTitle = document.querySelector("title");
myTitle.innerHTML = "DH150 Code Demonstration about title"
</script>
If you use inspector (or screen-reader), you can check the title has been updated.
The title can be useful when it can properly be understood. If the content/title is written in a certain language, like French or Korean, the web-browser and screen-reader should know ahead to parse the content and pronounce the text. You can start html by setting the attribute lang (=language). You will put ISO 2-letter language code to declare the language in use.
<html lang="en">
For the full reference of language code: https://www.sitepoint.com/iso-2-letter-language-codes/
First, you can include more information which characters are used for this contents. There is only one valid encoding for HTML5 utf-8.
<meta charset="utf-8">
You can elaborate the data that the website contains by <meta> in <head>
The specific names <meta name="..."> you can use for the metadata include:
-
keywords
-
description
-
viewport
<head> <meta name="description" content="Webb coding for user experience in Digital Humanities"> <meta name="keywords" content="HTML, CSS, JavaScript, Accessibility"> </head>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
https://www.w3schools.com/tags/tag_meta.asp
For more information about char-encoding: https://www.w3schools.com/charsets/ref_html_utf8.asp
FYI, keywords may not affect the search engine ranking order. https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag
Viewport is "the user's visible area of a webpage" - which means in different device (ex. computer screen vs. mobile phone), the referencing screen-size is different. Therefore, it is good to adjust the content size fit to the current screen-size, especially width. (if not, user's experience horizontal scrolls and unbalanced font-size vs. image layout).
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Usually it is safe to start with the initial-scale as it is (1.0). It is wise not to force the viewport with a certain size in (absolute) pixel because every device has different pixel size (width vs. height is not 1:1, again because they are tiny lamps and each manufacturer has different physical specification).
For mobile friendly interface design, there are several more things you may want check.
- font-size should be big enough (>12px), because in some mobile devices the (physical) pixel size is really small, even 12px would look like 6px in desktop screen. It is always safe to go with the browser's default font size 1em.
- the icon-size (or tap-target, hit-area) should be larger than 48px by 48px; and the space between the interactive items should be at least 8px (or normally one-space-key width).
I think up to this point, we have resolved the major issues in SEO and accessibility in <head>. Let's clean up our mockup website with a proper head. Upload the revised work and publish it. Please test and see if you can any noticeable errors in SEO and Accessibility (by the tool of your choice). Share the URL of your work and the result of your testing on CCLE as Activity01.
--
On visual design, we can try a bit more with the images and layout. This demo is just for your curiosity, which may be irrelevant to the course learning objectives. I will use assignment01 (or the later version in week02-activity) to make a simple project documentation.
In wee, we started with the goal of the project and summary of research with five museum websites. First I would like to make this work with proper <head>.
Then, I would like to organize the structure and provide some images - but at this time, I will consider all the images are decorative or there is text-based information and the images are supplementary (and ignorable). --> and so it is for the screenshots of the testing, because we have the text summary of the scores.
I will use css background-image to make the images responsive.
https://developer.mozilla.org/en-US/docs/Web/CSS/background
- background-image: url
- background-position
- background-size
how to make responsive images
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
I will use @media rule to hide/show the menu bar depending on the screen size.
The embedded items are very tricky in terms of accessibility. I will show some common mistakes in embedded media via iframes (ex. missing title).
http://web-accessibility.carnegiemuseums.org/content/third-party/
http://web-accessibility.carnegiemuseums.org/content/audio-video/
https://ableplayer.github.io/ableplayer/
http://web-accessibility.carnegiemuseums.org/content/maps/
We will have a discussion activity about three gov. sites
You will be asked to review these sites with your partner. Then, 1) list up the accessibility issues - perceivable, operable, understandable, Robust principles) and 2) overall assessment (what you think good vs. not-good). Share the thoughts and discussion on CCLE.
team-UK: Jacob + Valentin, team-USA: Labiba + Natalie, team-Japan: Josiah + Leah.
Check out the next version of WCAG guideline (3.0) and see the direction to go. HINT: it is more toward content and easy to understand in writing.
https://www.w3.org/TR/wcag-3.0/
A bit more of content strategy + design, introductory briefs from some references
References:
- Content strategy for the web by Kristina Halvorson & Mellissa Rach
- Content Design by Sarah Richards
- Letting go of the Words - Writing web content that works by Janice Redish