A Taste of Paradise

Lake Wenatchee is a natural dreamworld in the Lake Wenatchee Forest on the eastern slopes of the Cascades in Leavenworth, Washington State. It has a very active community of some 600 full and part time residents. Summer and Winter activities for all occasions attract visitors all year. The site is managed by a hands-on group of volunteers and me.  We have been building the site for several years and it is continually evolving, both in design and content.

Site visitors average around 600 a day and peaked at 20,000 in August 2015.

Features of the site include the home slider showcasing some of the best photos submitted by the community, daily webcam updates from a dozen cameras on and leading to the estate, event calanders, managed advertising from sponsors and a lot more.

Some of the challenges have been to find solid and high performing plugins to work seamlessly together and to make the site with so many images and so much function consistently perform well. We have managed to achieve that.

With the help of Godaddy support we managed to cope with the peak in visitor traffic in August last year on the shared server plan without any noticeable performance issues.

Site URL: http://www.lakewenatcheeinfo.com/

Theme: Thesis

Podere Sant’Angelo

The 2015/16 trend to use full screen slider images to fill the most valuable real estate on a site is not always the best oprion.  In this case I was fully supportive of it. 

Graham Bradford needed a site  to advertise his holiday homes in exotic Tuscany (http://www.poderesantangelo.com/).  He had found the Nation theme that was 70% suited to his requirements, but not totally. The theme was built with specific features coded into the theme PHP files and in my opinion not meant to be customized by anyone without PHP experience.

My first inclination was to redo the site completely in a more open theme, but Graham liked the 70% so I customized the theme to fill in the blanks. I also created custom post types so that Graham can easily modify key elements of the pages without going back to template files.

Interesting Features of the site include:

  • Online Booking Enquiries
  • Checking availability of the locations through ICS and iCal interfaces.
  • Use of Multiple WordPress Featured images per post/page. These are used in a rotating slider on the room pages.
  • The site is multilingual … English, Dutch, German and Italian

Carol Read

This is another example of a unique site where the landing view tells you exactly where you are and what the person and the site is about.  To me it is the essence of hooking the visitor at first sight.  Carol Read is a publisher, teacher and an engaging speaker.

Carol is part of the IATEFL network and past president of the organization and this was one of the first sites that I developed in this network.  Carolread.com is not officially in the SIG network and the site therefore has its own personality.

Tasteful adult membership

I have worked with Michele Lisenbury Christenson for  several years to get to the current version of her site.  She is a business and personal consultant, a graphic designer and very detail oriented. Always looking to improve she has redesigned the site several times to reach the current version.

I was fortunate to have started building the site in Thesis. It is the only theme that was flexible enough to respond to her changes.  We joked once that tattoos would be something that to avoid forever.

MaWSIG in the IATEFL Group

The IATEFL group consists of a network of Special Interest Groups (SIG’s) for English Teaching.

It is a very active organisation with enthusiastic members sharing ideas and techniques for effective teachnig.  Each SIG has its own focus area.  The organisation has branches throughout Europe for teaching English to foreign language students.
After getting involved in one of these sites I was engaged by others through referrals and my portfolio now includes a number of these sites.  While they have a consistent theme, each site also has its unique identity and content.

Common Theme is Canvas from Woothemes.

Sliders with a lot of information

Divergentvc.com   is a venture capital firm in Seattle.  The professionally designed slider tells what the site and the firm is about without taking up all the real estate of the landing view. The slider is obviously not just a pretty picture pulled from a stock farm and it sets the site apart from all others that fill the viewing space with irrelevant stock images and sparse information.

Simple can be very effective

I like this site for its effective simplicity.  When you land on the home page you instantly know who, what and where and it promises a touch of fun.  

From the banner to the opening paragraph you get a consistent and clear message:  Sylvia’s English online is by Sylvia who uses brain friendly methods to teach English online.  If that is what you are interested in, you will definitely read further.

Sylvia is also cunning.  The site targets a specific audience and the use of acronyms is intentional. If you do not know what they mean, the site is not for you. 🙂

 

Typography

Typography is as old as the printing industry.

The printing industry started developing typography into an art and a science to make text have optimal impact as well as optimal readability.  Variable fonts brought in some new rules and opportunities and then, early computer screens brought in new limitations.  Remember green screens and pixelated mono-spaced mono fonts?  

As technology quickly caught up, computer limitations soon became new opportunities with cheap use of color, images and graphics.  Excepting for professionals, typography and all that the publishing industry knows, soon became ignored by everyone creating text on a word processor or a blog who are oblivious to the typographic principles they are violating. 

Typography became an insider’s secret.  The result is that today we see thousands of websites that are:

  • just plain ugly,
  • hard or impossible to read
  • definitely challenge the reader’s attention span
  • full of distractions from the main message

Sometimes there are different rules for print than there are for the web.  They are all practical.

  • We tend to sit further away from a computer screen than from a printed page.
  • Text on wide computer screens can require double the amount of horizontal eye movement, forward and backwards
  • Most computer screens are back lit and a pure white background can become eye straining
  • At one stage the advice was to reserve serif fonts (like this one) for print and use sans-serif fonts (like this) for the web.  This was because the pixel density of computer screens were not yet up to the level of print.
  • We hold our mobile phones closer to the eye than both printed media or big screens.

The rules keep changing as technology grows, but these are the finer points.  There are some age old rules of thumb that will make your text infinitely more readable and lengthen the attention span of your visitor.

Quickly judge the following samples.

Sample Text 1 Sample Text 2

This is an example of large print that aims to stand out from the rest of the text and grab the reader’s attention. let’s also get rid of the right margin ragged edges and make the text justified. It looks much more symmetrical and fits neatly into our block wireframe mindsets. On a computer this is easy to do. It takes no more than a click of one button to create uncomfortable text like this.

The above paragraphs can all be difficult to read or break the attention span of your reader and make her reach for the back button! If your reader has no use for your message, then typography will not help, but at least make it easy for her to get the message.

Here are some rules of thumb:

  • Choose a font-size that allows for comfortable reading for the device your user is using.  14px to 16px for a laptop or desktop.  Fonts differ in size, so test it.  Here I use the “libre baskerville” font at 16px with 27px line spacing.
  • Limit line length to 50 to 90 characters per line.  Shorter makes our eyes ‘carriage return’ too often. Longer makes our eyes stretch.  Here is a guide:

0123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789

  • Line-height should be 1.4 to 1.8 the height of the font. It is easy to set a default in CSS as follows eg. P {line-height: 1.5rem}. This makes it easy to catch the next line even at 90 characters per line without the text looking disjointed.
  • Paragraph spacing should be a full line-height.
  • Break up long paragraphs to maximum 5 lines per paragraph.
  • Use a maximum of three fonts on your site, preferably stick to two, one for headings, one for text. Sans Serif and Serif fonts compliment each other well for this purpose.  
  • AVOID ALL CAPS FOR EMPHASIS.  It is like shouting. Consider the following for Font-variations or emphasis:
    • Use bolding sparingly
    • Use italics for emphasis occasionally or in quoted text.
    • In headings use Small Caps as an alternative to ALLCAPS
  • Ease off on the #000000 jet black print color. We seldom see true black in print and it appears too black and sombre on most devices.   Here I use #333333 in contrast to #000000.  Even #555555 can be very user friendly depending on the style of your site.
  • Avoid overuse of exclamation marks!  One per page is enough.
  • Unless you’re a texting teenager, never us !! or !!!
  • Go easy on the ellipses…
  • Never center=align long paragraphs of text unless they are in columns and your columns look awkward with left alignment.
  • Avoid justified text.  It leaves unplanned word spacing and breaks the reading rhythm.
  • Give careful thought to the fonts you use. Avoid the default fonts that packages like Word or Web themes provide.  Fonts like Arial, and Georgia are over-used.  In a word, they look amateurish. Professional fonts can cost $100’s of dollars and are often worth it, but with Google fonts freely available you have a host of options to choose from.
  • Headings and sub-headings are for delineation of sections not for shouting at your user. Consider why you would use massive header styles when something smaller and more elegant will suffice.  Few sites need more than three header sizes and very few justify the oversized headers that come standard with most themes. 2x or 3x the font-size is normally more than enough and looks a lot more balanced.

Butterick’s Practical Typography is an excellent online eBook on typography by a recognized expert in his field.