Week 5 - Notes

This is the second "no programming" chapter. (The first one was Chapter 1, the third one is Chapter 10, and the fourth and empirically last one is Chapter 12 - because our class omitted Chapter 12's JavaJam assignment.)

There are a lot of "common sense" aspects of creating a website for your users (that aren't necessarily about code writing), since that is what HTML and CSS are used for. Considerations such as target audience, site organization, and visual design - among others - are aspects of a website that are essential to having a good website. Visual design on the web could be an entire semester long course.

Of course, this is a lot of information that should be read and understood, but not necessarily memorized.

I wish the book was more "modern" and socially aware to include things such as dark patterns so that we don't get deceptive websites that taunt ordinary end-users with the borderline evil things they include in most implementation of websites today, dancing on the fine line between legal and illegal.

Accessibility is a thematic motif that comes again and again in HTML. Don't underestimate those who are visually impaired - that's why screen readers exist! Make sure to include alt attributes for image elements! (This is also a good fail-safe for any end-user who somehow experiences a client-side error - in this case, it is highly likely that the alt text of an image will still be processed.)

Thoughts

Random organization (for websites) reminds me of Terminal00.

A thought: "a stint with visual design" - is this an art class?

Font

The Fantasy font is annoying, because apparently this could be a proprietary font and it can't display in Linux.

Also, the author is leaving out high DPI screens when discussing "Font Size", and simply chalks this up as a gross simplification when writing: "fonts display smaller on a Mac than on a PC."

Designing color themes

Another reason why this book should be used in high school, instead of wasting time teaching students how to use MS Office for an edition that will be outdated in 3 years.

Colors

The fact that dark colored themes are **not** promoted is borderline criminal. This is why every mainstream site is glossy in design and burns your eyes with horrible white themes, such as: Google, Facebook, Twitter, Amazon, and Microsoft. So, basically all of Big Tech.

(I'm aware that at least Google, FB, and Twitter have dark themes; however, Google's isn't on by default and the last two basically practically require you to sign into your account in order to have these options available. Well, Twitter does have a dark theme in private browsing mode on the "default" out-of-the-box Chromium or Firefox browsers, but this is no longer available after hardening Firefox with ArkenFox techniques or using LibreWolf.)

One reason the modern web experience is horrible is because of the lack of easily accessible dark themes. People make everything printer ready, but print preview isn't suitable for display for long time periods on computer screens.

The idea of "dark theme [is] for young people" might be true, but only trivially -- as other people of other age groups might benefit from dark themes as well.

The author severely underestimates the capabilities of smartphones/tablets in 2020, especially if all you need to do is a quick web search.

Though this unfortunately doesn't encourage webpages to be much smaller than 100KB, even if there is a mobile ready site.

60KB webpages? Jeez -- impossible with Google Analytics in 2020. Tell that piece of advice to Instagram's web developers...

At least I have finally learned what aliased font means and why you should want one in a dynamic tiling window manager.

Screen resolution: 1024x768 is rather small in 2020... not to mention not really common in much of new display production anymore.

Also, the 4:3 aspect ratio isn't used by many monitor manufacturers anymore in 2020.

To be more modern, the book should suggest 1920x1080 as a screen resolution for 16:9 aspect ratio displays in 2020 (if some don't already have 4K monitors, or haven't already migrated to the more modern 16:10 aspect ratio displays)...

"Be mindful that not all of your web page visitors will maximize their browser viewport." Yes, very true -- especially for Tor Browser users!

When "Android Browser" is written, this tells me that the author likely has little experience with a modern Android device as a heavy Apple/Mac (not even the latest macOS rebrand) user. Yes, it's probably difficult to get a practical grasp on what browser most Android users use because of fragmentation, but honestly most should just install Bromite via an additional F-Droid repository (or simply add the Bromite repo that's built in Neo Store, formerly known as Droid-ify) if you don't have Vanadium exclusively via GrapheneOS. (But between you and me, Bromite is better than Vanadium - at least for now in June 2022.)

"Skip to content" - this page jump seems sort of old-styled. Why don't you just get to the actual page content right away?

Site maps: with social media and glossy sites influenced by Big Tech, I don't think many are moved to have complete site maps anymore as a popular trend.

Could you imagine if Twitter's or FB's entire site map for all non-deactivated accounts were revealed? It would be a mess! Instagram's site map (well, technically called the "directory" -- if it still exists in 2020) of all current users is already a nightmare to naviage in your browser.

A preliminary CS/IT question or problem: a site search feature could be extremely slow with long query times for large sites... especially if unoptimized search algorithms are chosen. However, most search boxes are simply Google search boxes directed to search only under the website itself.

A fixed layout is what HyperPhysics uses. "Older" HTML sites that look somewhat spartan compared to sites being made in 2020 tend to have a fixed layout.

Fix-width centered content is the best to deal with many screens in a way that is "old school fashioned".

Fluid layout: the "modern" way of website display.

Max width with centered text content via CSS is the best way.

This will help with users with those crazy curved ultra wide computer screens from Samsung or LG used in gaming or whatever...

Some thoughts on mobile versions of sites:

  1. No one makes a site with a `.mobi` TLD in 2020.
  2. Separate mobile versions of websites are somewhat annoying, e.g. mobile.twitter.com.
  3. Techniques of responsive web design via CSS is the most extensible method of making mobile friendly sites.

I understand that this is part of the reason why the notion of "just make an app [for everything]" is prevalent, but this is just too much...

As I said before, not everyone in the world has 4G LTE or 5G cellular data speeds all the time.

I'll have to say this repeatedly about the 9th edition of the book: Adobe Flash needs to die in 2020!

Don't make a mobile site that requires mouse hovering to make the menus/navigation to work! Not everyone has an S-Pen from a Samsung Galaxy device or an Apple Pen for iPad...

I know this comparison is grossly simplified, but some Android phones now have more RAM than some lower end desktops/laptops! (Of course, most RAM isn't optimized for every respective Android device; and also that was sort of an apples to orange comparison when comparing the characteristics of hardware -- for example, removable SODIMM RAM cards on laptops/desktops are truly different than the built-in RAM of a SoC for a smartphone.)

Since when did we use the term "netbooks"? Or when did they last have the 4:3 aspect ratio? (By the way, RIP to the ThinkPad X60, X60 Tablet, and X61 -- even though they're still 32-bit `X86` architecture devices.)

Is it me, or is there no way that an iPhone 5 or 5S was **that** tall as the screenshot shown in Figure 4.45 is attempting to simulate...???

Please, don't mention Internet Explorer! That browser is too old and abandoned to be mentioned anymore. (Also, don't speak of the Chromium-rebranded version of Microsoft Edge -- it's questionable proprietary software.)

Accessibility on the web is a social good (a term freely borrowed from microeconomics).