The First Website Revived

Posted on September 25, 2013 by Lorelle VanFossen

The Web as we know it went “live” April 30, 1993. The very first web page and website Tim Berners-Lee and the WWW team put online has been brought out of the archives by CERN.

The web page and site was reconstructed by CERN from an archive found on the W3C site, which is a 1992 copy of the first website, not the original. The research team is still searching for the original or an older version.

Mark Boulton is involved with the CERN team to help restore the first website. He described their determination to preserve this moment in world history.
Continue reading →

WordPress Site Models

Featured

Posted on September 20, 2013 by Lorelle VanFossen

WordPress serves as a web publishing platform and Content Management System (CMS). There are a variety of layouts and site organizational structures to choose from when setting up a WordPress site. These are known as site models.

There are three core site models: blog, static, and hybrid.

There are pros and cons to each one. Let’s look at each one.

The Static Site Model

In the old days, websites consisted of static web pages, one web page for each article. Today’s CMS platforms like WordPress offer the same static feel and structure as a design decision.

The challenge of using WordPress as a static site takes a little thinking around the whole posts verses Pages and categories verses tags content organization options. In general, most static sites will never use posts only Pages.
Continue reading →

Subscribe to My Site: Subscription Options in WordPress

Posted on April 25, 2013 by Lorelle VanFossen

There are many ways to subscribe to a WordPress site. There are also many different types of subscriptions.

Here is an example list of the various ways a person can subscribe to your site’s posts.

Email Subscription: Readers sign up for an email notification when new content is published on the website.
Follow: There are many types of follows, adding the site’s activity to your social media stream. WordPress.com offers Follows with the option to get email notifications as well as the site streamed in your Blog Follows stream.
Feeds: Feeds are the syndicated and distributable version of your content. People use feed readers to keep up with the latest activity on their favorite sites.

A subscription is different from a share. Sharing is a one-time event. The shared article information is not an act of subscribing to or adding the site to your social web stream of information. A subscription is not just support but a choice by the reader to keep up with that site’s activities.

Subscribers are your site’s fan club.

This tutorial will focus on the three types of subscriptions, email, follow, and feeds, to help you promote these subscription options on your WordPress site.

As you add subscription options to your site, check out what your site looks like through email notifications, follows, and feeds. When you design a WordPress Theme, it is important to design for all the ways a site will be viewed and accessed.

For example, the image to the right in this article is a screenshot of a post article on Mashable, a popular online magazine featuring tech news. The designer has incorporated social media sharing, sharing stats, and encouragement of social sharing and subscriptions into the design of the site title area. The little worm-like line to the right of the sharing icons is a trending chart. It shows the popularity of the article based upon the social sharing, showing you the possible creative options.

As you go through this tutorial, examine the traditional examples used to promote sharing and subscription options, but consider how to creatively incorporate sharing and subscriptions into the design of the WordPress Theme. If you are designing for the public with a WordPress Theme, remember that users will customize menus and widgetized areas with their own ideas on where and how to place these icons and links. Give them options but have fun with these as well.
Continue reading →

What is a Properly Formed Link?

Posted on January 8, 2013 by Lorelle VanFossen

I talk about properly formed links or proper HTML anchor tags in all of my articles, workshops, and classes. This article serves as a tutorial and reference guide on the proper formation of HTML links.

Links tie the web together, linking one site to another, one web page to another. They are critical to helping us find information and understand what is being written.

In “What You Must Know About Writing on the Web,” I describe a link dump:

Ugly is as ugly does. Don’t clutter up your site with ugly link dumps.

A link dump is when the blogger is lazy and just pastes the link into their post such as https://lorelleteaches.com/2012/10/14/what-you-must-know-about-writing-on-the-web/ instead of the properly formed What You Must Know About Writing on the Web.

Which is easier to read?

A properly formed link makes it not just easier to read the post, it is clean and presents professional looking content. It invites the reader to click.

How to Create a Properly Formed HTML Link

To create a properly formed link, you may use the Visual Editor toolbar button called link or Hypertext Link.
Continue reading →

The Skills You Need for Mobile and Web Programming and Development

Posted on November 12, 2012 by Lorelle VanFossen

“What it’s like to work as a mobile app developer” by TechRepublic is a simple but solid list of what it takes to be a mobile application developer, but also a programmer, web designer, and web developer.

The skills mentioned include persistence, ability to keep up with trends and changes in the fast pace of technology, testing to the extreme, and the understanding that this is a new and evolving industry and be ready for the shifting terrain in and around you.

I’d like to add two big skills missing from this list, without which makes the difference between a savvy developer and programmer and a mediocre one. It is the ability to pay attention to details and not make excuses.

It is always the details that bite you back. A missed semi-colon, a misnamed variable, a loop that doesn’t close right, validation errors, little simple things that should be a part of the testing environment but slip by.

I’ve seen many programmers and designers, including myself, blaming the software, the code, everyone else except the person who screwed up and missed the detail that caused the issue. Then the excuses start coming out. Not enough sleep, too much pressure, too many interruptions, trouble at home, traffic jam driving into work, family problems…the list is long and all of these can get in the way of your work.

When we let the excuses consume us, we negative the good work we’ve done. A lot of successes happened in the code before the mistake. Yet we spend a lot of energy on the excuses for that mistake instead of recognizing it as something fixable, a lesson learned or relearned, and move on.

We all have the same excuses. We’d all like them to go away so we could have a perfect working environment. They won’t go away so our ability to handle them must improve.

The first step is to acknowledge that we all have interference in our lives, so let them not interfere. Continue reading →

Clients From Hell

Posted on November 5, 2012 by Lorelle VanFossen

A group of web designers and developers have taken to the video waves and created a Vimeo channel called “ClientsFromHell.” Here is their first video to help you get a feel for what we face on a daily basis from clients.

I wish these were really jokes. 😀

Clients From Hell from ClientsFromHell on Vimeo.

Hattip: Philip Dews

What is the Difference Between a Website and a Blog

Posted on October 12, 2012 by Lorelle VanFossen

Colorful text says blog versus website. We live in a world of ever changing terms and jargon. Let’s see if this will add to the confusion or clear things up when it comes to what to call a blog and what to call a website.

A website, or site, is a collection of web pages.

A site is designated by its domain name, the part of the address or URL that defines the site such as WordPress.com, WordPress.org, or lorelle.wordpress.com.

A web page is any page on the web, usually found within a website.

A web page address is an extension of the domain name that points to the web page location on the site, such as example.com/article-title or example.com/2014/03/21/article-title/.

A blog is a site with content displayed in reverse chronological order.

These are the facts. A site can be a blog and a blog is a site.

However, there are the myths that we have to deal with. Continue reading →

Web Design: Tools, Color Wheels, Charts, Theories, and More on Color

Posted on October 5, 2012 by Lorelle VanFossen

Colored ball in a quilt of colors. Most business owners don’t consider the importance of color when thinking about promoting their business. They just want the colors to match their business cards or logo.

When it comes to choosing colors for your website, it can be as easy as planning the colors to paint the rooms in your house. It begins with some color theory, then pull out your old color wheel and give it a spin. Right?

Well, it would if colors on the web were that easy.

In order to understand how colors work in web design, you need to know some important concepts.

Web colors have three naming conventions.
Web safe colors are colors that will work across the most common machines and access devices for web viewing and usage.
Web accessibility influences colors based upon readability with tests for contrast and emotional response.
Colors stimulate emotional and reactive responses, making it critical to understand the theory and psychology of color choices.

I’ve put together this summary of resources to support these and included many online free tools, color charts, color wheels, and more to help you learn more about how web colors work and how to choose colors for your web design or WordPress Theme.
Continue reading →

Web Page Annotation and Markup on Live Web Pages

Posted on October 3, 2012 by Lorelle VanFossen

Teaching web publishing with HTML, CSS, WordPress, etc., and working with clients, I long for the ability to just look at a web page or PDF and draw on it. Point out what works, what doesn’t, editing notes, and somehow share it or preserve it. Or make notes. To scribble a note that says “I need to remember this” or “this is cool!”

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

Layers is a tool that allows you to have a conversation on a web page with annotations and image shows the conversation and graphics. In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

How to Choose a WordPress Theme

Posted on October 2, 2012 by Lorelle VanFossen

When it comes to choosing the right WordPress Theme, there is a right way and a wrong way. And both may be right for you.

First, let’s look at what people look for and what influences them in the decision process with a WordPress Theme, and the myths of their reasoning.

Comparing the same 2011 WordPress Theme - the light and the dark version - totally different.

The default WordPress 2011 Theme has two versions, dark and light. By changing the background image, these two sites on the same Theme are completely different.

How much does it cost?

First of all, the majority of WordPress Themes in the WordPress Theme Directory are free. Before you start investing in a WordPress Theme, stick with free Themes so you can test drive them.

If you fall in love with one and lack the web design experience or time to modify it, contact the author and hire them to fix this to your liking.

A paid or premium WordPress Theme is no better or worse than a free Theme. Don’t believe the hype. You are usually paying for support or additional features you may or may not need. Price does not dictate quality. Continue reading →

What is a Website Call to Action?

Posted on September 25, 2012 by Lorelle VanFossen

Call to action button called click me with quote that says go on, you know you want to. What is a “call to action” on a site?

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.
Call to Action Buttons: Examples and Best Practices by Smashing Magazine

It is literally a visual hint (or shout) that encourages a user to click or take some form of action.

Calls to action are used to:
Continue reading →

Public Domain, Free Photography and Images for Your Blog

Posted on September 22, 2012 by Lorelle VanFossen

Originally published on Lorelle on WordPress and used here with permission. This list is for my classes and workshops needing public domain, royalty free images for their projects.

Colorful brain scan of a mouse.

I’ve been collecting a variety of resources for free photographs to use on your website and blog. These images are, for the most part, free to use, but may have copyright and usage restrictions. Some may require registration, use only on non-commercial sites, and/or a link back to the source. Others may require more. Check thoroughly for the specific usage rights before using any of these images.

Just because you select a filter for public domain and royalty free images on a Google Image search does not mean these images are actually public domain and royalty free. Check. Ask first, they might say yes.

Flickr is a major resource for images, but many of these have restricted use. Not every image on Flickr or the web is free to use. Check thoroughly for usage rights, and if in doubt, get permission or don’t use the image. Check out Flickr’s Public Domain Photos’ Photostream for images specifically marked as public domain.

The images featured range from people, places, wildlife, and space, as well as textures, patterns, and artistic graphic images. These free photos sites listed may have nude or violent images, though I did my best to exclude image sites which specialize in those.

One of the best, kept up-to-date lists for images and graphics in the public domain for free use is Wikipedia:Public domain image resources. I usually start my search from their list, which includes government collections and resources, special subject-based collections, and more.

Continue reading →

How to Create Seamless Background or Tiled Patterns

Posted on September 20, 2012 by Lorelle VanFossen

One of the ongoing challenges web designers have is with background images. Background images are found within the background of a web page, specific DIVs, menus and navigation, sidebars, all over the place.

$Example seamless pattern background image for tiles and tiling on web pages. Source - fractured-sanity.org.$

A well designed pattern or texture that is seamless and tiles well is one that repeats gracefully in the background, complementing the purpose of the site and not distracting. A non-distracting background is one that is literally seamless, no distinction between the edges of the graphic. It doesn’t look like a bunch of repeating blocks. It is one smooth, evenly repeating pattern that is flexible, stretching into the background no matter what the width or length of the web page.

The process involves developing graphics that, when tiled together, appear as one single image, or a gentle repeating pattern. This is often done by selecting simple graphics and blurring the edge or positioning the elements to they bookend to each other, repeating the pattern over and over again.
Continue reading →

Most Common Database and Programming Errors

Posted on September 18, 2012 by Lorelle VanFossen

WordPress, web database, and web designers need to pay close attention to these two articles from TechRepublic: “Five common programming mistakes” and “Five common database development mistakes.”

The first one deals with the most common programming mistakes, a few I’ve done myself. UI craziness and variable naming inconsistencies will often eat up my time as I resolve their issues.

The second article on database development mistakes addresses many of the issues I and others have with dealing with other people’s work. A missing mistake that should be on the list is a lack of inline documentation, the notes a developer should leave to not only remind them of what happened here and why choices were made, but informs future fixers of what is going on. Without these, we have to read the code like a book, and not everyone writes based upon readable standards. We spend too much time playing detective for the simplest of fixes.

A comment in the first article really caught my eye and sums up so much of what causes problems with the code.

This isn’t the tool’s fault — the error is between the keyboard and the chair. On the one hand, it speaks volumes about the quality of these tools that I trust them so much that I lost a lot of my vigilance; on the other hand, it is still my fault that I allow convenience to turn my brain off entirely. I have learned to slow myself down when using code completion and take the extra second or two to ensure that I have made the right choice.

The biggest problem is what is sitting in the chair – remember that next time you start blaming.

Tutorial: Tools for Evaluating and Testing Web Pages

Posted on September 12, 2012 by Lorelle VanFossen

There are many online tools, web browser extensions, and add-ons to help you evaluate and test web pages. We will be talking about web page validation later, but you can use these tools now to become familiar with such tools and how to integrate them into your web browser.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

Go to the page or site for your browser’s extensions or add-ons:
Follow the instructions.