Expressive Websites

By Dale Stubbart

Want to make your website expressive? Want to make it reflect you or your company? This book tells you how you can do that easily. 

In my mind, an expressive website is one which has personality. It is one which reflects your personality or the personality of your company. Do you want a plain classic website or one with flair?

To some people an expressive website has a video or a slideshow. To others, it starts with a big picture at the beginning, before you get to any text. In my mind, an expressive website should be expressive throughout.

My websites have always been expressive. My main website is both expressive and playful.

Expressive applies to fonts, color themes, layout or arrangement, pictures, buttons, menus, and other elements of a website. And yes, it also applies to videos if you have them.

Expressive websites should be engaging. Many websites take engaging to mean reminding you to sign up for their newsletter. Many websites take that too far, IMHO.

Expressive websites take into account language. Do you say IMHO or In my opinion? Do you use words from more than one language?

Do you use emojis?

Are you a minimalist? Or do you use a lot of whitespace? Are your paragraphs single-spaced or double? Are they indented or not?

Most of those things can be done easily. When they can't, I provide functions that allow them to be done easily. 

Please use this book to help you make your website more expressive. Let it be a truer reflection of who you are.

• Language: English
• Publisher: Dale Stubbart
• Release date: Nov 12, 2022
• ISBN: 9798215479841

Book preview

Where to Find Things in This Book

Where to Find Things in This Book

Who This Book is For

What Is an Expressive Website?

Website Basics

HTML

CSS

A Simple HTML Webpage

Corresponding Simple CSS

x_press – Expressive Website JavaScript Library

Shortcodes

JavaScript

JavaScript and Webpages

x_press Terms

Deprecated Disclaimer

Include Bits of HTML in Your Webpage

Testing Your HTML Webpage

Testing a Webpage on Your Computer

Refreshing a Webpage to Use Your Latest Code

Cool Cucumber Colors

A Quick History of Website Colors

Color Themes

How to Specify Colors on Websites

Finding Colors

x_press Color Functions

Transparency

Set Both Background-Color and Text Color

Color Appearance

Tasteful Text and Fonts with Flair

Font Libraries

x_script – Scripted Text

Reverse Text

x_accent – Accented Characters

Emphatic Emphasis

Keeping Your Text Together

Now You’re Styling

Serious Spacing and Super Sizing

Bully Bullets

Stay in Your Container

Hints and Tips

x_hint

x_tip

Prosaic Pictures and Evocative Emojis

Impressive Images

Emotive Emojis – Smiley Faces, Etc.

Iconic Icons

Sensational Sounds and Vivid Videos

Audio

Video

Dates and Times

Formatting Dates

Session Timeout

Divergent Divs

Which Width?

Leveling the Playing Field

Floating Containers

Quality Communication

Menu Emojis

Email Links

Phone Links

Information Gathering Forms

Designing the Form

Fields for Input

Fields for Output

Lazy Styling for Forms

Disabling Fields Based on a Checkbox

Dropdown Boxes

Form Processing and Validation

Buttons for Processing

Adding Simple Validation

User Verification

Processing the Action

Performing Complex Validation

Form Security

Making Your Form Even More Secure

I am Not a Robot!

Form Examples

Contact Form

Sending the Contact Form

Special Handling

Calculator Form

JavaScript Libraries to Evaluate Equations

Menu Form

Popularity Contests

Posh Social

Feeding Frenzy

Hairy Sharing

A Low Overhead Approach to Sharing

Connection Affection

Using Social Media Signons to Log into Your Website

Chocolate Chip Cookies

Card Transition Animations

xa_animate Definitions

Initializing the Card Deck

xa_animate Animations

Building the Cards

Filter

Simple Status Graphs

Progress Bars

Gauges

Common Graphs

Graph Types

Graph Data

Coloring the Graph

Drawing the Graph

Maps as Graphs

xg_svg_... routines

xg_svg_modify

xg_svg_group_init(group)

xg_svg_shapes_update (group,attr_array)

Coloring the svg Shapes

Tracking Who Won

Can’t Draw – Create Shapes

xg_shape Classes

xg_shape_draw

Other Style Attributes for Drawing Shapes

xg_shape_style

Accepting Payments and Donations

PayPal

Buy Me a Coffee

Under Construction

Return to Webpage

About the Author

Appendix A – x_press Entities

Appendix B – x_press Tags

Appendix C – x_press Functions, Classes, & Variables

Main Functions

Secondary Functions

Auxiliary Functions

Classes

Global Variables

Appendix D – xa_animate Functions & Variables

Main Functions

Auxiliary Functions

Global Variables

Appendix E – xf_form Functions, Classes, & Variables

Main Functions

Auxiliary Functions

Classes

Global Variables

data-... Attributes

Appendix F – xg_graphics Functions, Classes, & Variables

Functions

Classes

Global Variables

Who This Book is For

This book is for both website designers and programmers. I try to keep things simple, while also explaining the coding details.

If you’re a web designer who doesn’t care to learn to program, that’s ok. You can still make your website expressive. You can build your website using a website builder. And you can tweak elements to make it more progressive. Many website builders offer you choices of fonts and colors. Some even allow you to add a little bit of code, if you want to go that far.

I have my own code library to help me make my websites expressive. This code is simple to include in your website, if you know just a little bit about coding. You don’t have to learn a whole new programming language to implement most of those functions. And, if you don’t know anything about programming, often it’s as easy as following the simple instructions.

If you want to follow along with the code portions, all you need to know is HTML, CSS, and perhaps a little JavaScript.

This book started out as a Second Edition to my book Fonts and Special Characters for Websites. Then I decided to gear this book more towards Expressive Websites. Many things in my previous book, also apply to creating an Expressive Website. You can refer to it for details which I omit here.

What Is an Expressive Website?

In my mind, an expressive website is one which has personality. It is one which reflects your personality or the personality of your company. Do you want a plain classic website or one with flair?

To some people an expressive website has a video or a slideshow. To others, it starts with a big picture at the beginning, before you get to any text. In my mind, an expressive website should be expressive throughout.

My websites have always been expressive. My main website – Stubbart.com – is both expressive and playful.

Expressive applies to fonts, color themes, layout or arrangement, pictures, buttons, menus, and other elements of a website. And yes, it also applies to videos if you have them.

Expressive websites should be engaging. Many websites take engaging to mean reminding you to sign up for their newsletter. Many websites take that too far, IMHO.

Expressive websites take into account language. Do you say IMHO or In my opinion? Do you use words from more than one language?

Do you use emojis, emoticons, both, neither? An emoji is a smiley face. An emoticon typically uses several symbols to create a smiley face. Kamoji are Japanese emoticons. Emoticons and Kamoji often use non-English letters.

Are you a minimalist? Or do you use a lot of whitespace? Are your paragraphs single-spaced or double? Are they indented or not?

Finally, expressive or not, your website should look similar on the various major web browsers. It should also function similarly on both a phone and a laptop.

Searching for expressive websites, might lead you to answers for responsive websites. A responsive website is one which fits well on any screen (laptop, tablet, phone). While that’s not an expressive website (IMHO), I do cover responsive websites in the next section – Website Basics.

Website Basics

You may think, Oh, I know how to program a website . But do you know how to design one? And, do you know how to keep your programming simple and maintainable?

Maybe you do. Still, you might want to read this section to see if there’s anything you missed. Or you might want to read it to see what I missed.

Programmers can use a host of programming languages to create a website. No matter which ones they use, it boils down to the screen and scripts to make things happen with that screen. HTML is the basic language to create a screen. CSS can be used to create stylesheets which affect how the screen looks. JavaScript is a simple scripting language to make things happen. PHP is often used when more secure scripts are needed. Those are the four I normally use, and most of my websites don’t need the extra security of PHP. So, I typically use only three.

AFTER I GIVE YOU AN overview of HTML and CSS, I’ll introduce how to create a simple website using only HTML Then I’ll introduce a little CSS to help style the website. Lastly, in this section, I’ll cover the very little JavaScript you’ll need to make your website more expressive. If you’re a web designer and not a programmer, don’t let the JavaScript worry you. I’ll keep it short and simple. You can cut and paste the code.

HTML

HTML IS MADE UP OF tags, like . The tags tell what this part of the screen is. is the entire screen. Most tags need an end tag, like . The slash tells you this is the end of that part of the screen. The basic HTML screen is .

Note that !DOCTYPE has no end tag. This tells the web browser which displays the screen that you’re using the current version of HTML (don’t ask me how).

is the header. This is information about the screen, rather than the screen itself. is the screen. You’d think since there’s a , there would be a . There’s not. There is a

tag and a tag. However, those are for different purposes.

Inside , you place things which describe your screen or webpage. These are called metadata. The tag is used for that. This information is mostly used by search engines. However, search engines now use information from much more than from . Metadata is also used by social media (Facebook, Twitter, etc.) when it refers to your website.

You also place script functions with tags in . Links to external things which the screen refers to, like CSS are placed in with the tag.

contains blocks (portions of the screen) which are known mostly as

s. You can have s, images , paragraphs

, portions of paragraphs ,

, etc. is used to create links to other webpages or to other locations on this webpage.

Formatting tags can be used inside . These include , , - bold, italics, underline.

There are many other tags. Those that I’ve listed are the main ones in my opinion.

CSS

CSS STYLESHEETS FORMAT (style) elements (tags) in your HTML. You can also use the tag in HTML and the style= attribute on and tags within to style your webpage. All styles can be in one stylesheet. Programmers often have one stylesheet for the screen and another in case the user tries to print the screen.

Styles for an outer tag also apply to an inner tag, unless overridden by styles on that inner tag. So styles set for body apply to all tags within body. And styles for a paragraph apply to all spans (portions) of a paragraph.

HTML tags can specify the class= attribute. Rather than styling each individual element, you can place multiple elements in a class. Then you just style that class to style all elements which are part of that class. Individual elements within that class can still have their own overriding styles.

For instance, you can apply the same style to multiple paragraphs, using a class. Let’s say the class is tall. In the stylesheet, we would say .tall{line-height:2em}. Each red paragraph in HTML would read

tall>

. In CSS (the stylesheet), the class starts with a period. In HTML, it does not. I have no idea why.

A Simple HTML Webpage

FIRST, LET’S BUILD the shell or outer code frame of our webpage. This will be the same for all webpages.

tells us what type of document or webpage or screen this is. In this case, we’re saying that we’re using the current version of HTML.

wraps the page.

describes the page.

is the screen. You could say this is the visible part of the screen, except for the fact that you can put invisible objects on the screen. It’s not recommended to put a lot of invisible objects on the screen. If you do, search engines think you’re hiding something from people but not from them. And search engines will be less likely to promote your page if they think you’re doing that.

Now, let’s fill up the .

title content= Dale Stubbart - Computer Consultant>

description content= Send your computer to my computer obedience school. />

UTF-8>

That’s the first part.

is the title of your webpage. This (or at least the first part) displays in the tab of your web browser.

title> is also the title in a different format. This one is for the search engines. I keep mine the same as . You’ll notice that tags do not have an end tag.

description> is the description of your webpage.

is a comment. Just make sure to surround the comment with .

UTF-8> is the character set – UTF-8  is a good choice for Western alphabets like English.

Next, I place the Facebook and Twitter metadata. You can tell if it’s for Facebook and for social media sites which read Facebook metadata by the og: (open graph) part. You can tell if it’s for Twitter and for social media sites which read Twitter metadata by the twitter: part. You probably only need to specify one or the other, and possibly neither. I specify both, just in case.

og:url is the link to this webpage.

twitter:card is always summary.

twitter:site is your Twitter user-id.

The rest are self-explanatory, I think.

og:title content=Dale Stubbart - Computer Consultant>

og:url content=https://mywebsite.com/index.html>

og:image content=https:// mywebsite.com/images/computers.png>

og:description content=Send your computer to my computer obedience school.>

og:site_name content=Stubbart.com>

twitter:card content=summary>

twitter:site content=@yourhandle>

twitter:title content=Dale Stubbart - Computer Consultant>

twitter:description content=Send your computer to my computer obedience school.>

twitter:image content=https://mywebsite.com/images/computers_tw.png>

NEXT, I PLACE THE LINKS to the CSS stylesheets. The order in which you place many tags in doesn’t matter. Links to stylesheets have to be placed in the proper order with relationship to each other. Later styles can override earlier styles. Links can be to font libraries which are used like stylesheets by the webpage.

I also use a link to point to the favicon. That’s the little icon that appears on the browser tab when this webpage is open. You don’t have to add a link for favicon, so long as it’s on the home path. However, if you omit the link, the favicon will only show for webpages on the web. In this case, favicon will not show when you’re testing a page before you upload it.

icon type=image/x-icon href=favicon.ico>

stylesheet type=text/css href=style.css>

stylesheet type=text/css href=style_print.css media=print>

https://fonts.googleapis.com/css?family=Bilbo+Swash+Caps rel=stylesheet>

I PLACE THE tags next. Order matters for scripts or they might run in the wrong order. The tags without anything between and pull in functions from files. They don’t execute anything. The last script immediately below runs some initialization (init) routines.

NOW FOR THE VERY IMPORTANT viewport. viewport makes the webpage scale to the screen that it’s being displayed on, whether that screen’s on a computer or phone or ....

If you don’t include this, Google will downgrade your webpage in its search results. That means you’re website will show up lower in the results.

viewport content=width=device-width, initial-scale=1.0>

THAT’S