The best music video ever made: Viewing Grand Rapids

Roger Ebert ranked this of “Views of Grand Rapids” the best music video ever made. After Newsweek pronounced the city one of the top ten dying the cities in the nation, residents sang and danced back.

This world-record setting 9+ minute lip dub features every willing resident of Grand Rapids and they sing, dance, and move in formation to Bye, Bye, Miss American Pie. In the background is Grand Rapids—probably all of it— including parks, office buildings, rivers, fire trucks, gymnasts and cheerleaders, guitar players of all ages and sizes, kyakers, a pick up football game in the street, marching band, swing dancers, car dealers, bands, and a mass pillow fight. Eminently viewable, multiple times. Watching it more than five times in a row is probably excessive — but who cares?

What’s the point?

I’m going to have to be the pismire here and say that while it’s entertaining, I’m not sure it’s great marketing – I got to the end and wasn’t sure what the point was.  — Comment on YouTube

The best kind of marketing there is. Marketing is about creating desire for your product. It’s entertaining and amazing. It makes you feel good. You want to see it over and over to hear that song and see all those people singing it. And figure out how they did it.

And in the background is Grand Rapids. Who knew what Grand Rapids looked like? Now “everyone” does. They will never hear “Grand Rapids”  or hear “Bye Bye Miss American Pie” again without seeing images of happy, healthy people having fun under blue skies in pristine cityscapes. If all these people could pull this off, Grand Rapids has to be a great place to live.

People will be going to Grand Rapids to visit the site — it will become a destination. If they have a job offer in Grand Rapids they will be more likely to go. Better than a home office in a less hip place. Any organization or business in Grand Rapids can have a great website by linking to the YouTube video. Current residents will be reenergized and proud — if they aren’t in the video, they will know someone who was. Everyone in Grand Rapids is now famous.

How the video was made:

Pattern in Islamic Art

Grand Mosqée de Paris, 1926
Grand Mosqée de Paris, 1926

Pattern in Islamic Art is an online archive of over 5,000 beautiful Islamic patterns. Images sortable by museum, monument, region, town, materials used (ceramic tiles, plasterwork, wood, etc.), or by architectural feature (decorative panel, doors & doorways, lattice-work, etc.) Excellent images and documentation.

Images are also available in prints.

The image above is from Pattern in Islamic Art:

Grand Mosquée de Paris
This mosque was founded in 1926 and built in recognition of the 100,000 Muslim soldiers from French colonies who gave their lives during World War I. Designed in a Neo-Mudejar style, with contributions from both Morocco and Algeria.

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.

Comics

ComicBook+ is an archive of public domain Golden and Silver Age Comics — books and newspapers. 24,184 books as of today. Categorized by type and date. It also has a forum for comics lovers and collectors.

Invisible Scarlet O'Neil from a 1940 comic Strip
Invisible Scarlet O’Neil from a 1940’s comic Strip

All can be downloaded without cost (donations welcome). And you can subscribe of $7.00 a year. Uses PayPal, which is very convenient. No entering credit card or passing a vision test to read a scrunched up series of random letters.

Invisible Scarlet O’Neil was written and drawn by Russell Stamm, who had previously worked on Dick Tracy. She first appeared in the pages of the Chicago Times, June 3, 1940. Scarlet O’Neil has the claim to fame of being one of the very first super heroines. As her name suggests Scarlet has the power of invisibility. This power was created when Scarlet put her finger in an experimental ray created by her scientist father. She suddenly disappeared, but luckily figured out that touching a nerve in her wrist acted as a switch, so she could turn her invisibility off and on at will.Over time Scarlet O’Neil’s special talent was slowly dropped from the strip until in 1950 it was renamed to just ‘Scarlet O’Neil’. A year later a new character named Stainless Steel was introduced. In 1955 the strip was retitled Stainless Steel, promptly folding the next year. As for Scarlet O’Neil she has yet to switch her off her invisibility and no one knows where she is.

It was hard to find an image of a woman without her skirt half way up to her waist or an obvious  accessory for a male character. Such were the comics. And they still are. But now they are heroines.

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.

The Art of Hand Lettering

Handlettered word "Bravo" by Neil Secretario
By Neil Secretario

The Art of Hand Lettering is a fabulous archive of hand lettering for logos, signs, murals, stationery, etc. A new site so the examples are only from 2013-2014. A wide range of styles in black and white and full color, all beautiful and mesmerizing. This “Bravo” example is by Neil Secretario and was done  using a Pentel Pigment Ink Brush Pen, which I am ready to run out and buy.

Neil is a freelance designer and letterer in California who specializes in custom lettering, graphic design, and branding. HIs site is a bit of a tease since he includes only sections of nine examples of his work. They are still worth a look.

The newsletter is sometimes a single image but often shows a series of photographs of a work in progress. One series of nine photos from August 2013 shows Bryan Patrick Todd in a cherry picker preparing and painting a very big mural on a very big wall in Louisville, “Our City, Our Home”. A more extensive series of photos is on Bryan’s website.

The branding exercise by Tobias Hall is a mind-boggling example of precision and complexity. There are similar examples on his website.

Tobias Hall Handlettered Branding TobiasHall-2 TobiasHall-3 TobiasHall-4 TobiasHall-5 TobiasHall-6 TobiasHall-7

 

 

Esther Honig: A Beautiful Woman?

Esther Honig sent her photo to photographers in 25 countries and asked them to make her beautiful. The amazing photos are on her website. They span the full range of what is considered beautiful internationally and individually.

For those who don’t know Photoshop it will be a lesson on how little you can believe a photograph once it’s met a computer. I am not a Photoshop expert or even advanced user, but if I wanted to be, I would start by studying these photographs.

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.

Public Domain Books

Cover of Sparrow and Cock Robin, a public domain eBook

Not exactly a website resource but public domain books are something to consider if your site has anything to do with literature or book selling, or you just like to read: Public Domain Books—25 sources.

An amazing array of sites described in an article at Ebook Friendly. Many are archives that include photographs and other materials—good resources for copyright free illustrations.

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.

 

 

WordCount

Another 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. Perfectly simple. The design itself is worth the effort. You can also use it to analyze the vocabulary on your site—are the words you are using common, if understanding is your goal, or rare if sounding obtuse is  your goal.

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. Note: A screenshot of those words would be R-rated.

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.

Typography: Modular Scale

Typecast Logo

Modular Scale sponsored by Typecast is a handy tool for converting type sizes from pixels to ems and beyond. Enter the size of your text in pixels and translate it using one of almost a dozen perfect ratios and the pixels will be translated into ems, ems@16 and %of 13. If you are using rems, this makes it a lot easier.

If you don’t understand any of this, you probably don’t need to. If you want an explanation, please don’t ask me. I have to look up the reasons every time I scale fonts. It’s complicated, arcane, and only of value if you code CSS.

Modular Scale by Tim Brown, Type Manager for TypeKit.

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.

Infographics from Visual.ly

The graphic design company Visual.ly specializes in  “visual content,” information conveyed using a combination of images and language—infographics, videos, interactives, presentations. They pull together storytellers, number crunchers, designers, and animators.

Their Infographics start at $999 and are worth every penny. They are delightful and elegant and effective—the magic word.

Their front page is a continuous scroll of their work, which is amazing: Visual.ly. I classified this as fabulously beautiful, partly because it is and partly because it is so unexpected and well-done. An inspiration.

The blog entries explain data visualization: Visual.ly Blog.

Three examples   of staff picks:

English Grammar Verbs

Grammar: Verbs at Visually.
A Beginner

The Beginner’s Guide to Wine from  Visual.ly.
All Sci-Fi Spaceships Known to Man

All Sci-Fi Spaceships Known to Man at Visually.

 

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

Building a Successful Product

Rachel Andrew
Rachel Andrew

Start Small and Listen is web developer, speaker, and writer Rachel Andrew‘s advice in Smashing Magazine. No matter how many articles I have read on business, I find one more that protects me from another bad idea. This one is on building successful products. She means moneymaking products, and that I haven’t mastered but I still want people to read what I write. A nice article.

Building a Successful Product: Start Small and Listen

John Radoff
John Radoff

“The goal of a startup is to find the sweet-spot where minimum product and viable product meet — get people to fall in love with you. Over time, you listen to your customers, make improvements and raise the bar on what viable means — making it more expensive for competitors to jump in.”

– John Radoff, Entrepreneur, author, and game designer

If You Don’t Have a Million Dollars

Paul Hawkin
Paul Hawkin

Environmentalist, entrepreneur, journalist, and author, Paul Hawkin author of Growing a Business has similar advice: “If  you don’t have a million dollars, you can lose a million dollars.”

 

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.

Just Delete Me

A very useful site for everyone who has tried to close an account and can’t find the link or tires of the 15 questions and clicks required to do it. There are, as of today, 280 links to get out of the soup easily: Just Delete Me.

The ability to get off each site is categorized from easy ( Artsy, Blue Apron, Dropbox) to impossible (Evernote, Gawker, GoDaddy).

Also includes a Chrome extension so you can use Chrome directly.