Back to Basics

I have a client right now who is interested in learning as much as she can about web design as we build a site for her. I directed her to teamtreehouse.com to get some foundational web design knowledge. I used a few of the Treehouse videos in my web design class last fall. Overall, the learning program they offer there is very high quality and up-to-date with current web standards and trends (a very rare thing in the world of web design education).

But, I hadn’t worked my way through the program myself. I always feel a bit uncomfortable recommending something I haven’t tried myself. I also like hearing fundamental concepts explained—you know, the kind of things you take for granted because you understand them on a level that is beyond words. Connecting that knowledge with language deepens the understanding and becomes an excellent tool for teaching and/or demonstrating expertise.

So, I watched a handful of videos today. Here are my notes:

HTML Introduction and History

  • Markup language shapes text in a way that makes it easier to understand. It adds annotation, semantic meaning.
  • HTML is a markup language that can be interpreted by web browsers. Other markup languages exist.
  • Programming languages determine behavior, markup determines structure. (HTML is not a programming language)
  • HTML tells browsers how to process various parts of a document: paragraphs, images, headers, etc.
  • The internet is the system of connected computing hardware located all over the world. The World Wide Web is not the internet. The World Wide Web is just one particular use case of the internet. Other uses include: VoIP, gaming, apps
  • Sir Tim Berners Lee invented HTML and the World Wide Web in the late ’80s. He was a physicist and contracter for CERN. He wanted to develop a better way of sharing documents. He created HTML by adding hyperlinking to an existing markup language. He also founded the W3C, the international organization that maintains the HTML specification and supports further development of it.

Learning HTML

  • HTML/web design is fun because you can instantly see the results of your efforts in a browser
  • no single technology or language enables the creation of websites, rather, a broad collection of technologies provide the pieces needed to build a complete website.
    • HTML = Structure
    • CSS = Presentation
    • Javascript = Behavior
  • To make a website, all we need is a text editor and a web browser. Every computer comes with a text editor.

Markup Element Highlights

I won’t bore you or myself with all the details of HTML tags covered in the videos, but here are a few nifty new things I learned.

  • the technical name for <hr> and other elements that are self-contained, don’t require a closing tag, is void element.
  • the cite attribute can be used on <blockquote> to include the source of the quote. example: <blockquote cite=”http://example.com”>
  • <q> can be used for inline quotations and also accepts the cite attribute
  • <abbr> is used on acronyms and you can add the expansion of the acronym by adding a title attribute. example: <abbr title=”Self-Contained Underwater Breathing Apparatus”>SCUBA</abbr>
  • <address> is for addresses (duh) and if it’s parent is the <body> tag, it is considered the contact information for the entire page. If it is nested in a div, it is considered the contact information for the content around it, for example, a list of names with addresses. (I bet the use of <address> is really helpful for localized search engine rankings)
  • <wbr> is optional whitespace. You can use it to indicate the best place for the browser to add a line break in a long word (or a url), but the line break appears only when needed! This is the equivalent of optional hyphen available in layout programs like Adobe InDesign. (I’ve previously longed for a tag like this, who knew it already existed!)
That’s it for now. I’ve got many more videos to watch. Stay tuned for more web design fundamental goodness!

 

User Testing

Aside

Someday, I want to do user testing on local websites that have fairly out-dated designs. Not to deride the owners of those website or make them feel bad, or even to get new business (though that would be an OK result) but because I want to understand better how design decisions, or lack of, affect the impression we give site visitors—our potential clients or customers. For example, would you believe that this organization once employed 50 people and had high-profile clients like Kimberly Clarke? Would you think that this place is one of the most beautiful nature preserves in Dubuque?

This blog is evolving

This blog is evolving. Morphing into something that is less professionally-focused—less about talking to the world and more about talking to myself. Professional, polished articles will now be published on my new business website, pearlstreetstudio.com. This blog will become the home of brief, sometimes rough, hopefully more frequent musings on my life as an entrepreneur, artist, perfectionist, etc. Sounds much more fun, eh?

I wrote this post, not because I think you particularly care, but to serve as a reminder and reinforcer to me of this new direction.

Happy trails!

The Big Quiet

It has been a long time since I had anything to say here. I took on too much and spent the last four months treading water, my head just above the flood. This happens sometimes. It’s ok.

Some highlights, in bullet point fashion:

  • Hired a part-time assistant/intern to help out, discovered the joy of sharing my knowledge with others and made an excellent friend in the process
  • Taught a web design class that met twice a week for two hours with 18 students. Confronted and pondered the many challenges of higher education in today’s economy and culture. Confronted also my fears of public speaking and doing something less than perfect. Expect I will continue to uncover hidden gifts from this challenge.
  • Managed and launched my first Drupal project.
  • Fell out of the routine of daily yoga and journaling, regrettably.
  • Struggled with and eventually accepted my horse’s career-ending injury. Realized that horses will play a much smaller part in my life moving forward, and that is ok.

… and more floating just below my consciousness.

The Local Web and Competition

A friend passed along this link recently: http://www.iowagetonline.com/ It looks like Google and Intuit are teaming up with economic development agencies to get Iowa small businesses online for free. How cool! Here’s the full scoop at governing.com.

The little web designer in me felt a little threatened when I first came to this page (Google is taking my clients!!!). I was happy that Big Web Designer stepped in quickly and recognized what a great opportunity this is for both local businesses and myself. First, and most important of all, small businesses are getting online! Second, Google is doing me a huge favor: getting the word out about the importance of a web presence, guiding and reassuring the nervous business owner as he registers his domain name, cautiously writes his first “About Us” page and goes live with his version 1.0 of his web presence. In time, he will tire of the limits of his free website (you always get what you pay for) and I will be happy to come to the rescue, building and improving on the foundation that Google helped him lay.

A Simple Website

What do we really mean when we ask for something that is simple?

On more than one occasion, a vision for a simple web site was explained to me by a new client: it should have only a handful of pages, the design should be minimal, we will use only a few images. In one case, these details were assumed because the client did not have a large budget for the new website. In another, the client equated simplicity with minimal effort invested in design.

In reality, here is what I have found to be the traits of a simple web site:

  • It can be created for an amount that is within your budget.
  • You can independently make updates to crucial content.
  • It has clear and meaningful language.
  • It assists your business or organization in meeting it’s goals.
  • Its visual design is in alignment with the core purpose and personality of your business.
  • The purpose and ways to use the site are obvious.

Simplicity looks different depending on the context. Simplicity has no relation to expense. Simplicity is not equivalent to austerity. Simplicity is about ease.

Really, shouldn’t all websites be simple?

Patience and Perseverance

I am quickly approaching my one-year anniversary of leaving full-time employment. This milestone of course causes some introspection. Lately, I’ve been looking back over the last 10 months and taking stock of what has been accomplished. I made a list:

  • Resolved that I am unlikely to ever be someone’s employee again. The entrepreneur life is what I love and where I have the greatest opportunity to realize my full potential, so that is where I’ll stay.
  • Refined my business processes and transitioned to some great, time-saving tools. (Cashboard and Google Voice being the most valuable.)
  • Worked with a lawyer to register my business as an LLC and also craft a brief but thorough Services Agreement (no more ridiculous, embarrassing boilerplate contracts!)
  • Served 21 clients, bringing 8 new websites into the world, as well as an HTML email design, CD packaging design, 3 letterpress designs and several posters
  • Made plans and began working to establish a letterpress stationery business with a friend
  • Nurtured existing relationships with friends and family and launched several new ones
  • Had a breakthrough with my husband about money, resulting in agreement that we will work together much more closely to manage our spending
  • Built and maintained this website

Sounds pretty good, eh? Well, I’m definitely not “done” yet, each week presents a host of new challenges, and the past month has been financially one of our leanest, but the general feeling is hopeful and I am having the time of my life.

So, the lesson to myself, and maybe to you too, is this: Meaningful progress takes constant work and a lot of time. You can’t expect great things to happen over night. With so much going on in our lives—commitments, deadlines, financial obligations and demands—it can be hard to see beyond the daily minutia to the complete picture of a life and what is being built through all those little actions. If you feel overwhelmed by your challenges, take a step back and appreciate what you have already accomplished. I recommend making a list like I did. You’ve probably achieved much more than you think.

Leverage Color

There is an entire discipline of psychology that studies the symbolism and meaning of color. Colors, and combinations of them, can convey very specific moods. Web site owners would do well to gain a basic knowledge of the colors that best convey the purpose of their business. Following are a few examples of adjectives and the colors that may help convey them:

Serene: blue, green and sometimes yellow or purple, mostly muted shades.

Earthy: Rich reds, browns and greens. Mustard yellow and burnt orange too.

Spiritual: Saturated purples and pinks, with some grey to add balance.

Romantic: pastel pinks, purples, greens, yellows

Powerful: Bold, saturated primary colors (red, green, blue, purple) paired with grey or black

Traditional: dark shades of primary colors

Playful: A mixture of bright colors (cyan, magenta, chartreuse, yellow, deep purple)

Classic: blues, greys, and browns, both muted and bold versions paired together

What do the colors in your site design and branding say about your business? Are you leveraging color to give impactful and instant support of your business mission? Or is it hidden behind a swath of generic or inappropriate colors?

For further reading, I recommend checking out the Pantone Guide to Communicating with Color.

The Fundamental Benefits of a Web Presence (For Small Businesses)

In this challenging economy, diligent care of your web presence should be the focus of every small business’s marketing plan. If your still holding out, consider these three benefits of the web:

1. Visibility

Traditional marketing mediums are pathetically ineffective compared to the web. Print ads, signage, radio, yellow pages … all are lost in the noise and reach only segments of your potential customer base, at best. With the help of search engines, people who are actually seeking your services can find you. Your website works for you 24-hours/day, 7 days/week and is just a few clicks away from anyone connected to the internet.

2. Customer Satisfaction

A well-tended web presence makes basic information about your business–hours of operation, phone number, address, etc.–easy to find. In a small but significant way, you make your customers lives a little easier by putting this stuff out there where they can find it. You save your customers the frustration of unsuccessful searches. Even if only sub-consciously, the pleasure of a question answered and a slightly less stressful day will make a lasting impression on your customers.

3. Trust and Respect

Finally, having a web presence shows your customers that you are serious about your business. You have your act together and your priorities in the right place. Whatever your industry or expertise, an accurate web presence is evidence that you know what you are doing and you plan to be around for a while.

Your homework:

  • Google Places: Claim or set up your Google Place Page. It will be the #1 listing in searches for your business. Pretty much a no-brainer.
  • Yelp and other social review sites: Claim your listing on these sites and keep an eye on what people are saying about your business (warning: people are often rude and unrestrained on the internet, so this can require a great deal of grace and maturity from you). Direct happy customers to leave a review of your business on the site. Maybe even give them some kind of incentive or gift for doing so.
  • Facebook: Despite our love/hate relationship with Facebook, it cannot be ignored that Facebook practically is the internet for some people. Set up a page for your business, then feel out the best way for you to engage with your customers through it. Here are two articles to start with: 9 Rules of Facebook Promotion Every Small Business Should Know and How To Promote Your Small Business Through Facebook

Extra credit: Register your domain and get your own website set up there

WordPress videos for beginners

WordPress.tv is is a great resource for WordPress users of all levels. It is hosted and maintained by Automattic (a web development company that has made major contributions to the WordPress project and is owned by WordPress co-founder Matt Mullenweg). It features both user-submitted and professionally generated content covering events, tutorials, slide shows, interviews and more.

The How To tutorial videos may be the most useful part of the site, and I often direct new users to them after training. Here are my favorite WordPress.tv videos for WordPress beginners: