Learn WordPress

Chalkboard with a Lesson

Learning WordPress has just become easier. WordPress has launched a new site, Learn WordPress, directed at WordPress.com users, those whose site is hosted by WordPress. WordPress.com sites are free and have limited but often adequate features. You then pay WordPress people to fix and refine your site if it needs it, or to add more features.

I host sites on my server independently of the WordPress.com site, using the same software but with higher capability and more options. But understanding those options can be confusing. That is exactly why Learn WordPress is helpful. It explains the basics without confusing you with all the possibilities and pitfalls and things you may never want or need to know.

Learn WordPress Concepts

The first key to learning anything is understanding the concept, the idea. What does this do? What is it? And how does it work?  The Learn WordPress website gives you the essentials in Plain English — a rare commodity as soon  as anyone says, “software.”

In addition to help when you are starting from basics, some pages will always be useful. The Glossary explains blogs, carousels, categories, pages and posts, responsive themes, etc.  Get Flashy explains widgets, the little boxes that can be added to sidebar to add images, slide shows, search boxes, subscription forms, etc.

The Get Configured page lists resources to find images. Images are very important on websites and the perfect images takes time to find. It can be useful to find the images you want to use without paying  by the hour for a designer to look for them.

Testing WordPress

It might also be helpful to set up a WordPress.com site for yourself as a test, even if you are going to hire me to design and host your site. It’s a good way to learn so you can update your contact information and text  information quickly and less expensively after I set up the site.  Then I can manage the software upgrades, add capabilities, do monthly maintenance, and trouble shoot.

Logo from WP Beginner

If you intend to take over your site completely this is a good site for leaning how to manage it: WPBeginner: A Beginner’s Guide for WordPress.

 

Essential Website Design

Websites are the new business card. If people can’t find you on the Web, it’s almost as if you don’t exist.

Why Not Just Linked-In or Facebook?

Facebook and other social networks are important but not enough.  They are not under your control. They all look alike. They change without notice. Very few people use them for anything other connecting with friends or railing against the government.

Social media can be important depending on your area of expertise or interest but an independent site is easier to find and control. It will always contain the information you choose, is private, and more easily found by search engines like Google.

A Simple Website Is Enough

Websites do not have to be complicated or cost a million dollars. Very few people need all the bells and whistles, and most of the bells and whistles are counter-productive anyway. They make it harder for people to understand who you are and what you do.

People who will be interested in you, not just entertainment, will be interested in content.

Most people need a site that says simply and sufficiently:

  • Who you are
  • What you have done, including  information about your professional interests, projects, products, or services
  • A sign-up for following your site
  • Contact information

Optional but recommended:

  • Page(s) of information or advice that will encourage engagement and introduce your work more fully.
  • A newsletter or blog for subscribers in which you offer periodic comments or information related to the purpose of your website.

Visitors to professional websites are interested in content. A simple, clean design with intuitive navigation will engage visitors and impress them with the ease of relating to you and your services.

Good website design doesn’t require  fireworks or the Rockettes to be attractive and useful.

A website not only brings you recognition and business, it gives you credibility.

What I Do and How I do It

I do attractive, straightforward, inexpensive websites that clearly communicate information and are optimized for all viewing devices — phones, tablets, laptops, desktops. I use WordPress because it is a fabulous program. It is open source, which means it is free. It is relatively easy to learn so you can take over your website, if you wish, and manage it yourself.

Websites are hosted by companies that maintain huge computers connected to the internet. They are faster, more accessible, and definitely more secure than if you put a website on your own computer and allowed the world to visit — not a good idea.

I use Bluehost because they are consistently rated the most reliable provider, they have great tech support, and their site is straightforward to use.  In the end, their fees are the most reasonable. Many other hosts will charge a pittance up front but then charge for every add-on and try to sell you new products and services you don’t need.

If your site is already set up on another host, I will look at the “back-end” to see how easy it is to use. I won’t to start a site for you if I don’t understand their system—it takes too much time and I would have to charge additional fees.

Domain Names

I can register a domain name—your website address— for you if you don’t have one or you can register it yourself. If I register it under my name, I will transfer it to you at anytime, at no cost.

When Will My Website Be Ready?

I like to work in “real time” and interact with you as the site develops. Unless you already have a site, we will put up the site right away and develop the design and content as we go. This means the home page would be quickly. If this is a new site, you won’t have visitors yet so only we would see the changes.

If you are uncomfortable with a publicly changing site, I can develop the site off-line and move it when it is completed.

How Much Does It Cost?

The Nitty Gritty gives more information about my fees but they are very low. I believe everyone who is working in their own business, has a passion for a subject, a cause they want to promote, or an idea they want to share with the world should have a website. I like working with people to help explain and present themselves.

Most people don’t need a $3,000 website which is the starting price for many designers. Business sites may cost $300,000. By limiting the technology I use and focusing on text and simple images I can work for a lower fee, still enjoy my work, and be of service to you.

What Do You Need to Have in Good Website Design?

Content

People who are interested in your services, products, or causes are interested in content. Your site needs to be attractive but most importantly it needs to be clearly written with good design. The most important pages will likely be:

  • A Home Page: The first page a visitor will see. It needs to say what the site is about. It has to be interesting and attractive but most users don’t like to be presented with a flash page, a video or image that takes a lot of time to download and says nothing.
  • The About Page: The most visited page on most websites. People  first want to understand  the purpose of your site, and then they want to know about you. No sales pitch or euphemisms. All straight talk.
  • Qualifications: For some sites this information may be a part of the About page but for some more detailed  information will be expected. This may include publications, work experience, products, etc.
  • Information: One or more pages that provide information about the subject and purpose of your site. Informative pages give visitors a better sense of  you and your interests. Useful information ensures that visitors will be more likely to come back.
  • Contact Page: A list of all the ways you can be contacted including a contact form. A form is particularly useful if you don’t want to list your phone number or email address. Your social media pages can also be listed here.

Search Engine Registration

Registration and confirmation with major search engines Google and Bing, and with Alexa, a website ranking service. This includes the information for the new Google box, the square of about information on the right hand side of the search results page.

Search Engine Optimization

A website is of little value if no one can find it. SEO means “search engine optimization.” Search engines need to use certain structures so search engines can properly index them. Both SEO optimization and continued update of content are important to being found in searches and to having higher placement in search results.

It is also possible to have a private password protected site for employees only, family and friends, a club, etc.,  that is not listed with search engines. Organizations often have these for members only. Or you may want a special site for your clients.

Statistics

Statistics on visitors: what countries they are from, what browsers they use, how long they stay, what words they searched to find you, which pages they visit, etc. The number of visitors each day in the current month compared to other months in other years.

This can be very helpful and encouraging. Or tell you do change your pitch  or do more outreach.

Security

Security of Websites is an increasing problem. Hackers are targeting sites that have almost no traffic. They will try to break into the site and use your account to post their own information or send spam to other sites. Regular security updates, firewalls, and blocking of blacklisted domains is important.

Backup and Repair

The Website will need to be backed up, optimized, and repaired on a specified schedule. Back ups can be stored on the server or emailed to you, or both.

Protection from Spammers and Sploggers

Spammers and sploggers  are mischief makers that can overload your website by using it for their own activities. If you allow subscriptions to your site, will need to be deleted regularly to protect the site. Removing them also allows you know how many true subscribers you have. This is a free service until you have more than 500 registrations a day.

Broken Link Notification

Links on your site need to be checked regularly. These may be links to other pages on your site or to sites you recommend. Broken links are very frustrating to visitors and an sign that the site is not being maintained. Visitors who find broken links are likely to leave and not return.

Responsive Design

Pages need to automatically adjust  for all size screens, from the smallest to the largest.

Tags, Categories, and Information Architecture

Categories are like subject headings and tags like keywords or items in an index. They are useful for directing readers to information when you have a site with multiple pages and posts. When they are carefully chosen they aid search engines in indexing your site accurately, paying more attention to it, and help potential visitors find the site.

Information architecture is the structure of information on your site. It needs to be intuitive so your readers don’t have to search around for the information they need.

And Other Things

There are thousands of other features available. These make the site sturdy and maximize functioning and use. We can discuss other features you might need. Charges for other features might mean additional charges because they are more time-consuming to install and sometimes require trouble-shooting conflicts with other features.

Maintaining the Site Yourself

For many people WordPress is easy to learn and they maintain the site themselves with minimal training. There are many good websites that introduce, explain, and teach WordPress. There is a support forum and extensive manuals at WordPress.org. And many training videos on Lynda.com and YouTube.

This isn’t for everyone or there wouldn’t be webmasters. With desire and effort, it isn’t impossible. It doesn’t require knowing programming languages, HTML, or CSS.

For information on fees, see The Nitty Gritty.

Perfect Profile Pictures

Not Just for Dating Anymore

Cartoon-Style Drawing of an AngelWith the growth of social media for networking, the profile picture has become a major decision for anyone who participates. Which picture will people click on in LInkedIn? Who will follow me in Twitter? Am I turning people off with my stern look on Facebook? Is my smiley smile too smiley? What do I do with my eyes? What should I wear.

On OKCupid, “the Google of Online Dating,” the profile picture had 90% greater influence than the profile text. Even if you aren’t looking for a date, they are still very important. I’ve never, for example, followed person without a profile picture unless I already knew them (and wanted to connect).

There is a solution on BufferSocial, Thoughts on sharing, creating, analyzing and converting with social media. Kevan Lee reports on the research into the science and psychology of profile pictures in “The Research & Science Behind Finding Your Best Profile Picture.” People actually study this!

The Highlights

Definitely read this article if you want to understand why but these are the top recommendations:

  1. Smile with teeth
  2. Dark-colored suits, light colored buttondowns
  3. Jawline with a shadow
  4. Head-and-shoulders, or head-to-waist photo
  5. Squinch
  6. Asymmetrical composition
  7. Unobstructed eyes

And things to avoid:

  • Hats
  • Sunglasses
  • Hair, glare, and shadows over the eyes
  • Laughing smile
  • Sexiness

So now you know. If you doubt these recommendations, Lee explains how the research was done including all the statistics, graphs, and test pictures. Interesting results: Women get more attention making eye contact with the camera; men receive more avoiding eye contact. Women can be more flirty and men definitely not.  Men don’t even do well smiling!

Guy Kawasaki’s four keys:

  1. Faces only. No family, friends, dogs, logos, etc.
  2. Asymmetrical. Use the Rule of Thirds to create your profile picture
  3. Face the light. The source of light should come in front of you.
  4. At least 600 pixels wide. There are varying shapes and sizes of profile pictures on social media. A 600-pixel image will look great no matter where it’s viewed.

The Rule of Thirds

Draw a Tic Tac Toe grid on the picture. Put key elements on the intersections and avoid putting a key element, like your eyes, in the center square. More info at 3.7 Designs.

The OKCupid page with profile pictures of the staff is an excellent example of profile pictures that meet these recommendations — although not all of them. Those that don’t stand out.

There is more but I found this enough to build high anxiety over why people aren’t clicking on my posts.

Majestic: Analyzing Links

Majestic describes themselves as “The planet’s largest Link Index database.” What they know is a lot more than I know, for sure. What they can tell you for only one of their services is how many links there are to your site and how many of them are “good links.” Good links come from sites with real content. Bad link come from link mills that only link to a lot of sites to drive traffic to their own site — where they sell various, probably worthless services or stuff.

Improve Your SEO

The reason you want good links is because they help you in search engines — Bing, Google, Yahoo, etc. There are many general search engines and some specialized ones.

Majestic also provides pie charts and data on the kind of links — text, images, etc. — and which pages are linked most often. This can be important information. Some of the pages that are linked most often are ones I had forgotten I had posted. I had to go look them up to see what was most important to my readers!

Search Engine Optimization, SEO Tools

What is SEO, Search Engine Optimization?

“Search engine optimization” is a fancy way to describe methods that help search engines find your site. This site, SharonVillines.com, is the place where I put things I don’t want to forget—and probably will unless I write them down. I’m not concerned about the world’s ability to find this site, but more concerned about my ability to find the stuff I store on it. And for whatever reason, your ability to find it.

Thus the assortment here appears to a search engine to have a lack of focus. That means it is highly unlikely to find its way to the top of any search except my name. Thus this site is probably the worst example of best practices SEO you could find.

I do care about SEO on my other sites, however, and on the sites I design. I try to keep up with best practices. Solid SEO with no tricks. Tricks like keyword stuffing will get you Banned in Boston. Deep-sixed in search engine land. Think page three where no one goes.

SEO Simplified for Short Attention Spans

All that to say I found an excellent article today on SEO on the TNW site,  “SEO Simplified for Short Attention Spans.” It is a short (by website design standards) explanation of SEO. It’s written by Barry Feldman (on Twitter) of FeldmanCreative, a content marketing consultant, copywriter, social media advisor.

It includes very clear explanations and good illustrative examples. Check out the article for understanding SEO. What I wanted to remember here are the tools Feldman lists for checking the SEO of my sites and yours.

Three Must-Have SEO Tools

To practice, study, and check search engine optimization, Feldman recommends three free must-have SEO tools for beginners and experts alike:

  • Google AdWords Keyword Planner—Supplies keyword search data and ideas.
  • Open Site Explorer by Moz—Tracks your website’s link profile against competitors, identifies top pages, shows social activity data, and more.
  • MozBar—On Chrome and Firefox browsers, helps determine how difficult it is to rank for specific keywords. (I haven’t used this so I can’t explain how you use it. But it sounds like a good thing.)

So that’s the daily don’t-forget-this update. Not quite as exciting as popcorn but you can’t have everything.

Brand Colors

BrandColors.net Screen ShootA lovely online source of brand colors complete with color numbers—no guessing. Includes colors from Adobe, Airbnb, Amazon, AOL, Basecamp, Behance, Better Business Bureau (they have colors?), Bing, bitly, Boeing, Digg, Dribbble, Drupal, Ebay,  Firefox (a big palette), Freshbooks (very fresh), Google, HootSuite, Kickstarter, Klout, Microsoft, and many more. Memorable address BrandColors.net.

Has a search function to find one quickly.

Click on the colors to see the color number.

You can download the whole set in several file formats including swatches to import into Photoshop, and I suspect other programs as well but I probably haven’t ever heard of them.

My favorite for color storage is still Color Schemer. It amazing. I couldn’t do without it.

Free Icons

iconsSketchAtive

A collection of free icons created by “Aegean K” from SketchActive.

360 outline and 360 matching solid vector and bitmap formats. Transparent individual files in 60px & 120px for Coding. JPG files for overview and detail revealing. Sketch files for Editing, fully scalable and adjustable. You can use these icons in tab bar, navigation bar and table row for both iOS and Android apps. Also in web design, branding, stickers, presentations and prints. Anywhere you want.

Very fine icons. Highly recommended.

A Website Is the New Business Card

A website is the new business card. A good website provides greater credibility, visibility, and accessibility. A bad website is like a business card that is unreadable and falls apart in five minutes.

What Can a Website Do for you?

1.  Increase Credibility

A website establishes instant credibility. It expands the functions of the business card a flyer and even a booklet. And it is available on everyone’s phone and computer, instantly.

2.  Expand Visibility

Business cards are limited to face-to-face contact in personal and professional networks. A website is available 24 hours a day, seven days a week with no further effort on your part.

3.  Unlimited Accessibility

People who have forgotten your name or lost your card or never heard of you will be able to search your name, occupation, services, geographic location, and/or keywords and your website will pop up. It is the least expensive way to reach the largest number of people—faster.

The Top Six Things a Website Should Do

Understanding why you need a website is important but not enough. You need to know what a good website is and what it should do.

1.  Communicate Quickly and Effectively

A website should quickly explain who you are, what you do, and how to contact you. Potential clients will give you 10 seconds unless they see something they want or need. They will move on if all they see is marketing jargon and beautiful but uninformative graphics. Or can’t find you phone number or email address. Or if it matters, what city you are in.

2.  Place Essential Information First

The front page should include what you do in three words or less, name, address, phone number, and email address. Hiding contact information so people are enticed to read a sales pitch is irritating and ineffective.

An “About” page will be the most read page on your site. It should clearly state your professional and business qualifications and interests. Unless the work you do is closely related to your personal interests, a personal profile should be very brief—people are there to find out about your business. Present yourself as a professional.

3.  Be Useful

Websites are about content. Providing information  will convince potential clients that you understand their business. They will read your biography once, but they will return many times for useful information. They will remember you.

Your website should help potential clients understand how you can be useful to them. Your website should help them understand what you do and clarify what they need. It should give them the words to express their needs and desires.

4.  Easily Found

Your website should be registered and indexed by the major search engines and connected to social media. It should connect you to professional or special interest networks.

Depth of information and the higher traffic it brings will place your site higher in search results.

5.  Easily Used

A website should have a logical structure of menus to allow potential clients to find information easily. Appropriate categories and tags help search engines list your site accurately so it can be found by those looking for you or your services.

6.  Reliable and Stable

A website should load quickly and be error free. This may mean fewer bells and whistles but what you need is a site that conveys information. It can be attractive and pleasing without being technically complicated and error prone.

It needs to be secure and protected from security breaches. Security software will prevent hackers from inserting embarrassing content and malicious use to send spam which will blacklist your site. The backend needs to be reliable and stable.

Website  Examples

Carolivia: The Works, World, and Ways of Carolivia Herron

Epic Center Stories: Creating Community Stories

John Breeskin: Call me Sparky

My Name Is Dog: The Case Files of a Real PI (Almost)

Sociocracy: A Deeper Democracy

Urban Cohousing Associates

If my simple style is interesting to you, My Essentials of Website Design explains the functions and features a good website needs, The Nitty-Gritty provides the details of who, what, when, where, and how much.

Favorite WordPress Plugins

If you have favorite WordPress plugins, the ones you use on all your sites, download them to your computer, put them all in zip archive. Then you can upload them and have them all ready to use.

 

Why a Newsletter Blog?

Woman reading newsletterNewsletters on your website are a better choice than printed or even emailed newsletters. The “issues” or  entries stay posted on your website easily accessible for as long as you like. A newsletter on a website can be indexed by search engines to be found by people who never heard of you.  Notice of new issues can be sent automatically.

Printed and eMail Newsletter Downsides

Printed newsletters are normally planned for a certain size and length and with special features for each issue—a calendar of events, a cute quote, a joke, a feature story, news items. All these have to come together at once and get to the printer in order to meet deadlines for timely publication. Then they have to be distributed. Mailing is expensive. Address changes difficult to maintain.

An email newsletter with a predetermined format will still have to meet the same content expectations, plus being prepared by someone who understands the format and the software. Most newsletters, distributed in print or by email, have become uneconomical and of questionable value given the amount of time, effort, and coördination they take to produce.

What Exactly Is a WordPress Blog?

The letters Blog with a globe replacing the OBlog is short for Web Log. Blogs began as online diaries in which writers posted their thoughts and opinions with discipline and openness. A serious blogger wrote every day and was followed by other bloggers. For many of the early bloggers, who were writing before the easy to use Web existed, it became both a religion and a science.

WordPress is an online software that began for bloggers to easily write blog entries using a web browser. It is open source, which means available at no cost. It has developed over the years into a “content managing program,” a CPM, which is capable of doing many more things. It is essentially a file cabinet in the Cloud. It exists on a web servers somewhere.

A newsletter blog post is like posting a news item on a bulletin board or to a news feed than preparing a newsletter for publication. It has a singular focus and is relatively brief. (Mine are typically too long!) Posts are added to a website in chronological order but can be searched and sorted in multiple ways, like notecards.

A Blog Post Is Not an Email Message

A blog post is intended for a wide audience and for “posterity.” It becomes part of the historical record, not just an announcement or press release that will be thrown away. They can be published on a schedule or spontaneously. A calendar of events for the next month might be posted on a regular date, and posts announcing births or other happenings as they occur. Posts on special topics can be posted when completed—Planning a Garden, New Lamps, etc.—or scheduled for later publication.

Blogs Convey Continuity

A blog post is part of a continuous process. Each post is a reminder of the last and the next. That continuity is established more easily than with a newsletter because each post is complete within itself but the blog is “never-ending.” Its past is always present.

Blogs Can Be Spontaneous and Informal

With the ability to post frequently, not all information needs to be collected before announcing an exciting event or be copy edited and perfect. It can be one short paragraph informally jotted down. Who wants to know about a baby born a month ago when it can be announced within minutes? So what if there is no name yet? It can be sent when available. Distribution is essentially free so three short posts can be sent as easily as one long. Frequency can be irritating, but sometimes it is a welcome virtue.

A blog post can be quickly written and distributed with little extra cost beyond maintaining a website (which you should already be doing.)

 Wordpress

Wordpress logoI use WordPress because it is free, well-designed, constantly updated, and used by millions of  other people worldwide. I can always find advice. It can be used on your own website under your own domain or on the WordPress.com website where WordPress will host a blog for you. It is easy to learn by anyone familiar with word-processing program and the web.

What the software does is set up a framework for organizing and sharing information. Think of each news item as an individual snippet. WordPress helps you organize each snippet chronologically and by author, title, date, subject, keywords, etc.  The snippet can always be found by searching any of those elements.

WordPress also keeps track of subscribers so you can distribute these news items as they are published or weekly or monthly. Any schedule you choose. It does many more things but in terms of replacing printed or email newsletters with a blog, these are some of the main advantages.

Pixels, Ems, and Rems

Website design measurements are not inches or even centimeters. They are pixels, ems, and rems. Rems are new. When I opened the Twenty-Twelve CSS (styling) sheet, I was thrown by the new rem measurement. The first thing I did was delete all of them and used pixels or ems. That messed things up pretty well, until I came to terms with rems.

Pixels

Computer monitors have resolutions in pixels. A screen can be 72 pixels per inch (PPI), 124, etc, etc. To size a font in pixels means it will appear as that number of screen pixels. It’s a constant that depends on the number of pixels on the screen. On my monitor has many pixels per inch, so in Microsoft Word, for example, I view documents at 125% in order to see what the page will look like when I print it. On websites, I often have to increase the font in order to read it.

In addition to different pixels per inch on different monitors, pixels are sized in absolute numbers, Each style on the webpage has to be given a specific number of pixels. Since the styles may take pages of code and pixel sizes range from 36 to 8, proportions of various elements were difficult to keep consistent. And if the size or proportions were changed, each of those numbers had to be replaced.

Then ems came along.

Ems

“Em” is a typographical term that refers to the height of a letter. Other measurements on a page of text, like line-height and the proportions of titles and headings, are measured in percentages of ems. On webs pages the size of an em is established by the website designer for the site or each section of a page or the site. If the base font size is set to 16 px other sizes are set a percentages of the base font size, the em. If the base font is 16px, a  smaller font might be set .75 em resulting in 14 px letters. When a base font size is increased or decreased, all the other sizes will change in relation to the base font size.

But they don’t. And there lies the problem.

Measurements, like colors, are established using “CSS,” which stands for Cascading Style Sheet. Styles change in relation to the style above them or in which they are nested in a “cascade.” If the text of a paragraph is set at .75 em, and a quote within the paragraph is set at .25em, the quote will be 25% of 75%, not 25% of the original 16 pixels. With long pages of complex CSS coding, this means sizes can change unexpectedly. Tracking down all the relationships between cascading percentages of ems can take a lot of time—unless you are mathematically inclined and can see the logical (or illogical) flow of percentages cascading on top of percentages. Designers are often not.

On top of that screen sizes began changing. One person would be using an iPhone and another a 24 inch monitor. One person a new retinal display and another a much older 72 ppi screen. Predetermined numbers meant that what was good design on one was unusable on another. Enter rems.

REMs

With the increasing variety of screen sizes and resolutions, programmers began working on “responsive design,” web pages that change according the size of the screen. What can be read on a desktop monitor may be difficult to read on a notebook and laborious on a smart phone. This required either different websites, at triple the design cost, or a web page that would change depending on the device it was being viewed on. Elements had to be able to move around according to the width of screen on mobile devices and the browser window size on desktops. A stable, non-cascading measurement became necessary.

Rem stands for “root em”. Rems work as logically as one expects ems to: in relation to the base font size of 16 px, not the size of the font immediately above it. Current version of all the mainstream browsers and mobil devices support rems, which means they can read them and render a page accurately. As a fall back, however, for those who are not using current browsers, sizes are still set in both pixels and rems.*

More on Rems

 

A good place to watch for updates on CSS changes is CSS-Tricks which features a blog, forums, demos, gallery, snippets of HTML and CSS, videos, and more.

A  (Life Saving) Rem Calculator

And here is a calculator from Foliovision to convert a pixel measurement to rem measurement. Type in your pixels measurement and hit Enter. You will get two results—one for font-size, width, height, margin, padding and the other for line-height.

Responsive Design Calculator: Pixels to REM

*Everyone should be using current versions of browsers. They have better security protecting your computer from worms and viruses and trojan horses, and can use more features on websites. And they are faster. Old version so Internet Explorer are particularly deficient. Those users should definitely upgrade to version 9 or change browsers.

 

 

Image Size for Websites

When designing a website, I look again at the latest recommendations for image size for websites, at the best pixels per inch (PPI). This article from PhotoshopEssentials.com (dated only 2013) says, “there’s simply no such thing as a standard web or screen resolution, if your images are destined for the web, you don’t need to worry about image resolution at all!”

Photoshop Essentials 72 ppi Web Image Myth

The old standard resolution of 72 pixels per inch dates from 1984 with the first Macintosh.  Today’s screens are more like 100-150 ppi; for retinal displays, 300 ppi. Each monitor will show the pixels per inch that it is designed to show or a smaller number if the settings have been changed. Resolution only applies to print images.

A file with a resolution of 72 will be very small when printed and cannot be enlarged with a satisfactory result. The top dialogue box in Adobe’s Photoshop programs applies to images on the screen. The lower box, where the resolution and size in inches appears, applies only to printed images. Photograph set to 200 ppi will still be 200 ppi on screen whether the resolution is set to 72 or 300, and the file size will be the same. But the photo will print very small if set at 72.

Snazzy Maps

Snazzy Maps is a collection of links to, you guessed it, Snazzy Maps. When a Google Map isn’t enough look a these: Pale Dawn, Midnight Commander, Avocado World, Neon World, and more. A map to match every color scheme.

Simple Design, Short Names, No Ads

Triple Threat Websites are simple, and becoming simpler. It takes time to learn to leave out what people don’t really need to know, but we’re getting there.

Simplifying the Internet

Today’s examples of simple are from a post by  on the BuzzFeed FWD website. It includes examples of simple design sites and the new attitude: “Welcome To The New Internet: Simple Design, Short Names, No Ads”

These examples are publishing platforms directed at simplifying and redesigning blogs. John Herrman writes:

In recent months, at least four of the most interesting new startups — all either from or backed by people with deep roots in the current internet, including Twitter cofounders and many of the most prominent VCs in Silicon Valley — have been launched to, in some way, replace the internet. Not add to it, or change some part. These sites want to fix the whole thing: to remake comments, content, and updates with little to no encumbrance from the current web.

Simple Blogging Websites

The Nitty Gritty: Website Services and Costs

If you haven’t already, please read Website Design for more information.

Website Services and Costs

Initial Consultation on what you want and whether I  can meet your needs: Free

Basic Package: Design, Hosting, and Maintenance for One Year: $750

Includes initial design, hosting, and maintenance of a ~5-page website, a contact form, a subscription form, and 2 email addresses for one year.

The clock starts when we have contracted to work together and includes times when I am waiting for you to provide materials or to review what I have done.

The site can be visible quickly but It will take time for you to decide what you want on the site and how you want it to look. You will need to live with it a bit to determine if everything is there and worded the way you want it.

The first year will also give you time to learn to maintain your own site if you wish.

My fees are among the most affordable because I emphasize simple design, search engine optimization, security protection, and optimal speed over bells and whistles.

Maintenance Beyond the First Year: $240 annually

Websites require regular, ongoing maintenance at least once a month. Maintenance includes:

  • Annual domain name renewals
  • Hosting on the internet
  • Email accounts under your domain name.
  • Ongoing maintenance and security checks
  • Regular backups
  • Software upgrades
  • Security protection
  • Statistics on visitors
  • Protection against malware and pesky people

Does Not Include searching for or reformatting photographs, making videos, streaming movies, slide shows, or musical scores.  Photographs are important but as you may have already guessed, I think the others are a distraction unless you happen to be a videographer, photographer, or musician.

Additional Services: $40 an hour

Beyond the basic package and annual maintenance, most updates to current pages can be done in an hour. For additional material or redesign, I will estimate the hours needed and give regular reports on the time spent.

The kinds of services I can provide at additional costs include writing, editing, research, newsletters, galleries, connecting your site to Constant Contact, PayPal, etc.

If this seems reasonable to you, see Getting Started.

The Perfect Website

Addressing the key elements of the perfect website as simply as possible is the basis for designing an affordable, effective, and fast website.

The Key Elements

  • Design: Testing on multiple browser capabilities, and screen sizes and resolutions. Valid HTML and CSS coding.
  • Navigation: The ability to find information
  • Usability: Including features that aid users and avoiding those that irritate them
  • Content: Information in the language of your users.
  • SEO: Optimizing a site for search engines is more than improving your rankings, it’s about engineering your site so users can find it using a search engine — clear content and keywords.
  • Social Media: In May of 2011, US web users spent 53,457,259 minutes on Facebook. Nielson reports that people don’t like doing business on Facebook. But a personal website might be effective.
  • Tracking and Analytics: 80% of all websites used Google Analytics in 2011, but the important thing is using the data from your analytics to  learn what your users are reading and looking for on your site, and how they get there. That doesn’t mean being user driven. It does mean looking at what is important to you and measuring it against what your users are viewing. You may need to present yourself more clearly.
  • Footer: Don’t slack off at the footer. Repeat navigation links, include your copyright, and contact information, including your company name.

The infographic from Visual.ly:

The Anatomy of a Perfect Website

Explore more infographics like this one on the web’s largest information design community – Visually.

 

Navigation Guidelines for Better Navigation and Categories

Navigation Guidelines is  report on an e-commerce  study at Baymard Institute which researches the best ways to improve the online user experience. This was an eight month large-scale usability research study on the product-finding experience—a multi-syllabic way of saying how people do or do not find things they are looking for on the web and how they feel about it. The study tested multi-million dollar websites by the best designers. Amazon, Best Buy, Blue Nile, Chemist Direct, Drugstore.com, eBags, GILT, GoOutdoors, H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys’R’Us, The Entertainer, and Zappos. They found more than 900 usability problems.

While most of these guidelines apply to retail shopping sites, the principles can be applied to any site.

1. Don’t Make Parent Categories Shallow. (Also, Have Parent Categories.)

Use parent categories and child categories. Both should be clickable, not just a list of items. Users expect items in a menu to be clickable and they like to explore.

2. Put the Same Subcategory Within Multiple Main Categories When Necessary.

When a subcategory could logically appear in multiple parent categories but appears only in one, users believe it isn’t there when they don’t find it where they expect it to be.

3. Consider Having a “What’s New” Category or Filter.

Some users want to see what’s new — to be inspired or buying a gift — without having to plow through known products.

4. Suggest Both Alternative and Supplementary Products on Product Pages.

Alternatives, substitutes, add-ons and accessories to the product that the user is currently viewing are often hard to find.

5. List “Recently Viewed Items.”

Returning to a a previously visited product becomes needlessly complex using only the browser’s “Back” button or has to re-navigate the categories or reuse search.

6. Create Dedicated Pages that List Compatible Products.

Users have a difficult time finding compatible products and verifying their compatibility when the website doesn’t explicitly state their compatibility or link to the corresponding products. In other words put matching stuff together with matching stuff.

7. Always Link Contextual Images Directly to the Products Shown.

Users quickly grow frustrated when they spot a product in a front page display image but can’t navigate to it.

GoOutdoThe full article can be found here: Navigation Guidelines for Better Navigation and Categories

Smashing Magazine

Smashing Magazine LogoSmashing Magazine is simply smashing. Articles on coding, design, graphics, and WordPress and other CMS programs and software.

Beautiful, helpful, indispensable. An essential email newsletter, a library, workshops, job board, etc. More than I can ever remember.

Website Design Research: What Works and What Doesn't

Nielsen Norman LogoJakob Nielsen, of the Nielsen Norman Group, has been conducting website design research since 1995, essentially since there were websites. He is the world expert on what works and what doesn’t. Instead of marketing, he focuses on the user experience. Ultimately that helps market information, services, and products, but his focus is not on how to trick the reader into believing you are saying something when you are saying nothing, you will provide services they can’t live without, or you are selling a product they don’t want or need at a price they can’t pass up. His focus is user-friendly websites.

Conclusions Based on Research

Nielsen wants to know how people use websites and what frustrates them.

  • Why do employees of companies only find what they want on their own websites 74% of the time? These are sites about a subject they know well and are highly motivated to pursue.
  • Why do teenagers, those masters of technology, have an average success rate of 72%, less than corporate users?
  • Why do e-commerce users only find what they want 64% of the time? This means e-commerce sites are designed to frustrate 35% of the customers who have already “walked into their store.”

To find out NNg does Evidence-Based User Experience Research, Training, and Consulting. The NNg website contains dozens and dozens of well-written research reports of the studies his firm has conducted. This is the kind of information that costs thousands of dollars, and all you have to do is read it.

Nielsen is not afraid of detail and he is not afraid to share what he discovers. And he does it in plain English (mostly). He is not afraid to give examples of sites that don’t work. And he doesn’t favor glitz and glamor over clean simple text and readable photographs.

Research Topics

These are just a few of the topics on which you can find reports:

My favorite individual reports —and I haven’t come close to reading all of them or even implementing everything I have learned from the ones I’ve read:

113 Design Guidelines for Homepage Usability

Top 10 Information Architecture (IA) Mistakes

A free downloadable Report: PR on Websites

Another free downloadable Report if  you like social media: Social Media User Experience.

There are dozens more. Or if you like books Nielsen has done several classics. The reason they are classics is that they are the authority and things like human-user interface don’t change very much because humans don’t change very much very fast. We still look around with the same eyes and type with the same fingers and forget which page we were on with the same brain.

Mobile Usability by Jakob Nielsen and Raluca Budiu. 2012.

Prioritizing Web Usability by Jakob Nielsen. 2006

Designing Web Usability by Jakob Nielsen. 1999, and still relevant. I use this one frequently.

Nielsen’s books are thick and detailed but like websites are easily browsable. You take them in one page at a time or sit down and read them cover to cover.

If you have any interest in web design, Don’t miss Nielsen’s work.Nielsen Norman Logo

WordCount: How Many Times Is a Word Used?

Wordcount LogoAnother fabulous gem from the UK. WordCount is a ranking of the 86,800 most used words in the English language by frequency of use. Presented in the same format as a timeline—a beautiful timeline. Very minimalist and elegant. The design itself is worth the effort.

From the site:

WordCount data currently comes from the British National Corpus (BNC), a 100 million word collection of samples of written and spoken language from a wide range of sources, designed to represent an accurate cross-section of current English usage. WordCount includes all words that occur at least twice in the BNC. In the future, WordCount will be modified to track word usage within any desired text, website, and eventually the entire Internet.

You can scroll the horizontal line of words or search for a specific word. Very interesting results. Then you can go to QueryCount that tracks the words that people search. A screenshot of those words would be R-rated.

Warning: Doesn’t work with all browsers. Try another one.

Cohousing Website Special

It is vitally important for developing cohousing communities to have a cohousing website. Because many communities need to post the same information, Triple Threat Websites has template for cohousing communities that includes basic information and an outline of information that would be useful to prospective members.

The basic package for the Cohousing Websites Special is $300 instead of $500. It does require a member of the local group to eventually learn how to update dates, prices, contact information, etc. This is not hard; it is much like using a word processor. A member of my community recently did this with less than 2 hours of help. This is also a skill that will be beneficial to the community during construction and after move-in.

A website can make a huge difference in:

Establishing Credibility: Rumors, vague memories, and outdated flyers on bulletin boards are not always the best way to convince people that you are serious. A website can do that with up-to-date information.

Attracting New Members: It is not uncommon for prospective residents to lurk many months before coming forward to indicate interest. For many people it is a big step to say I’ll try this. Others want to be sure they are willing to make the commitment and not let the group down later. Some want to avoid being pressured by sales pitches once their name get on your list. A website allows them to make decisions.

Expand Your Reach: Flyers, press releases, and local newspaper articles only reach local prospects. Estimates are that more than 10% of households in the United States move each year. As cohousing publicity grows, more and more people will be using search engines to find cohousing communities in their area. As the Baby Boomers retire, many move back home or to the place they always wanted to live. In your community, 10% could be filled with households from outside your area.

Sharing Community and Sales Information: A website is an excellent way to store information where all your members and prospective members can find it. The press can refer to it and find accurate copy. Updated contact information can be posted. Descriptions of unit designs and available units can be posted without the expense of print media.

If you are a forming cohousing community, please read the rest of the site and contact us through Getting Started.

Optimum Line Length

In addition to letter spacing and line height, optimum line length, the number of characters per line, affects readability and user experience. A long line of text produces fatigue and a short line of text can be distracting. Seventy-five characters per line, including spaces, is usually the maximum for a block of text with 50-60 being the optimum range. Unless a line is short for effect, such as emphasizing relationships between words as in poetry, readers begin to skip words as their eyes move down the page instead of moving from left to right, because quick side-to-side movements fatigue the eyes.

Responsive vs. Fixed Website Design

Since line length is so important as a fatigue factor, the traditional advice is that web pages should be set to a fixed width rather than being liquid, which means they are allowed to contract and expand.  On a desktop computer, a fixed width remains a fixed width even when the window if much wider. With liquid layouts too narrow to read comfortably, readers can become fatigued and stop reading for reasons that have nothing to do with your content.  However, since so many people are reading on so many different sized devices now, the new advice is that responsive is a plus.

Designers generally don’t like responsive page design because it prevents controlling the look of the page. It allows graphics to move around and headlines to end up on two lines with word breaks that can change comprehension. A compromise is to have two layouts, one responsive for mobile devices and tablets and one fixed for desktops. (This is almost twice the work.)

The Golden Ration Typography Calculator

A narrow text will require smaller type in order to maintain a line width that is conducive to being read. If you are designing specifically for a device with known measurements, like an iPad, you can adjust type size and line height accordingly.

For calculating the relationship between text size and line length, you can use the Golden Ratio Typography Calculator by Chris Pearson of Pearsonified (Yes, that is the right spelling.)

Golden Ratio Typography Calculator

The Golden Ratio Typography Calculator addresses one of the most difficult aspects of designing a text: to layout type in such a way that it is most readable and attractive. Most typographers and graphic designers have had years of visual experience that allows them to choose the most attractive and readable font sizes, widths, and line lengths intuitively. Even with comparable experience, however, doing this on the web can be a challenge. Chris Pearson of Pearsonified has designed a calculator that produces several optimal sizes and proportions given your preferences or the requirement of a specific project.

Calculating Sizes, Heights, and Widths

The calculator will (1) calculate the appropriate font size, line height, content width, and characters per line, and paragraph spacing; and (2) allow you to choose a font that is set to these numbers in a block of text. It will show you the optimum settings for a given content width, number of characters per line, for your chosen font and size, etc.

For 16pt type, for example, in Hoefler Text the optimum settings are:

Font Size: 16, Line Height: 25, Content Width: 600, Approx.92, Characters Per Line: 85.

In Verdana, these settings are:

Font Size: 16, Line Height: 25, Content Width: 600, Approx. CPL: 74

If you click on the font size, a box will open giving you the optimum settings for headline and primary and secondary text sizes.

You may not agree with the settings Chris finds optimal, but it is an excellent place to start.

Color Schemer

This entry on a computer software application, Color Schemer, is Part II of a two-part entry on Color. Part I: Colorist Painting may contribute to your appreciation of color and thus of this program.

Color Schemer Application Start PageIf you love color, and especially if you hate it because you never get it right,  I highly recommend an inexpensive software program called Color Schemer.  It is both useful and captivating. It allows you to create color samples and save them in palettes or collections of colors—without wasting any paint.

Sample and Match Colors

You can also sample and match color with any photograph or other image on the screen. Love the colors in that landscape by Vincent van Gogh or that Martha Stewart Living interior? Choose Tools > Color Screen Picker and save the color. You can sample a whole photograph to create a full palette of colors based on a field of wild flowers.Color Schemer Sampler Tool

Even more fabulous is the quality of color. On a computer, screen color is instant and luminous. It doesn’t take hours of mixing and 45 coats of thin glazes to get a rich pale blue.

Automatically Generate Palettes

ColorSchemer Sampel Palettes

The program will also create analogous splits, angled accents, complements, smooth gradients, shades, soft blends, rectangle shades, semi-circle blends, mono comps, and tetrad blends. I have not a clue what an angled accent or tetrad blend is but my original palette was transformed into 20 or so radiant prisms of perfectly calibrated colors. Fabulous.

Once you have a palette of colors you like, you can name it and save it. As a graphic or website designer this is fabulously helpful because you can save by project. if you are doing website design, you can print out the html # codes for each color. You can also check your color to see how they work for those who are color blind.

Share Color Palettes & Get Ideas

Color Schemer Themed Palette

Color Schemer also has a website where people upload their palettes so you can scan through tens of thousands of examples, and even rate them. They are all named: A Rose, A Walk in the Park, Angel in the Moonlight. Even Baby Poop and Windows XP. Wedding names are common and get a lot of stars: Winter Wedding, My Wedding, Silver Wedding, Tiffany’s Berry Wedding, Sunny Wedding Day. You get the idea.remixed colors, you have to mix them every time you want to use them. With Color Schemer, you just enter the color number or drag and drop to your new palette or graphics program. Some artists keep records of 2 drops this and 4 drops that, but many painters and designers are intuitives. Intuitives think differently—we do it the hard way and recreate.

And Avoid Taxes

I spend hours there, particularly instead of doing my taxes, like today when I’ve received my last deferral and have four days to finish them. I have a whole folder of palettes, my own and others. Totally useless. Complete waste of time. So I recommend Color Schemer if you care about color, or even if you don’t. You might grow to love it since you don’t even have to mix the paint.

Color Schemer Website

This entry  is Part II of a two-part post on Color. In case you didn’t take my advice the first time, you  may enjoy  Part I: Colorist Painting that might contribute to your appreciation of color and thus of this program.