Make Sure the Header is Legible

Below is the top of the home page for http://www.mobile-festival-stores.co.uk/ – you can click on the image to see the entire home page.

My first reaction is that I cannot read his header. He acknowledged in a comment that it is hard to read. I would suggest even the simplest of headers instead of something that one can’t read. I decided to do a basic header with a fancy font that I thought might work a little better for him:

I used Illustrator, and I created two shapes to contain the text. The word mobile is done with the type path tool, so you can get all sorts of interesting displays of text. The font is called rosewood std – seems like one that is fun for a festival atmosphere. One could certainly put some color into this as well as define the shapes in some way, but too much color often ruins a design. Simple is the easiest and usually does the trick!

State What Your Business About – Clearly and Concisely

I am not quite sure how Dr. Ed’s business operates – does he sell these? rent them? offer them as a franchise? Or offer himself with the mobile unit at a festival? Whatever it is, I would like that stated in big, bold words very concisely on the home page.

Here’s an example of my own home page, in which I advertise my web building skills:

I believe I make it clear that I am offering website help – I state some of my most important web skills offered right there on the home page.

He would also do well to eliminate the extraneous stuff on the home page; for example, there is no need for the date/time on the home page. Also, if he has no Latest Events, he might as well eliminate that plugin from the right side of his home page. He is using Joomla!, and usually it is one click to un-publish a plugin, but one has to know where in the back end to click. If he were starting from scratch, I would suggest using WordPress – less clutter.

Study Social Media for Your Niche

Dr. Ed made it clear that his market is exclusively in the UK. He should be concentrating his social media skills on building connections in those networks. I did some investigating, and I found these links might be useful:

• http://www.ukbusinessforums.co.uk/forums/ – UK Business Forums
• @socialmbossuk
• About Barry Wells – Barry Wells writes in general about internet traffic, but since he is in the UK, I bet he would be a good resource!

I found the top two links by using the Twitter search service Tweepz.com – I just typed in “social media UK” and “small business UK” to find some accounts that are active on Twitter. Twitter accounts list websites, so there is plenty to explore.

Your Turn, Please

Do you have any suggestions for Dr. Ed and his business? If you have a business background, perhaps you can suggest ways he can market his business. If you know design, how would you design his page? Maybe you know someone who knows someone who knows the business market in the UK…

Found a great example of why you should choose responsive web design over mobile theme. I’m working for a client converting their site to a responsive theme. I looked at the test page I created in WordPress on my droid. Here’s the page with the mobile theme:

You are blue and ugly! I say to the screen. The mobile theme is paying no attention to the fact that I told WordPress to use a different template. I’m just getting the back end test page. Not even one link to the blog.

When I turn off the mobile switcher theme, here’s part of the page with responsive web design:

blog page on droid phone

For those of you that want to dive into responsive web design yourselves, a wonderful framework for a responsive website is lessframework.css. For the rest of you, you may want to use a professional to achieve this effect. Feel free to ask questions! I love hearing from you.

Error 404 Page for New Jersey Space Grant Consortium - NJSGC

What is an Error 404 page?

The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested (Wikipedia definition). In simple English, the server was found, but not the specific page. Maybe it was moved or deleted?

Do you need an Error 404 page?

It’s a good idea to have a basic “Sorry, page not found.” Do you need something fancier? Keep reading.

How is a Cool Error 404 Page Good for Your Brand?

So, you may ask, if all my business needs is a simple “sorry, page not found” – why go to the effort of creating a fun, appealing, unique 404 page?

Think about the overall purpose of your website or blog. Is it just to disseminate information about your services or products? Do you think you will win over a customer by being dry and boring? Here’s one more chance to say something about the friendly, appealing nature of your brand and perhaps capture the emotions of your potential customer, even if only for a moment.

Analysis of Creative Error 404 Pages

Although it’s sort of like analyzing a good joke, let’s take a look at why some 404 pages succeed in capturing the reader’s attention.

CSS-Tricks: a hole in the paper reveals some CSS code. Holes seem to be popular 404 themes.

Pattern Tap: such a sad guy. Twice. Sad looking or surprised people seem to be common on 404 pages. Talk about stirring of emotions.

Leora’s Arts and Photo Blog: on the topic of surprise, see the surprised girl on my Arts and Photos blog.

But what about brand? Didn’t I say the 404 page could be good for reinforcing brand?

BrightKite: of course, a bright kite makes you think of the BrightKite app, right?

Product Planner uses a concept related to their product on their chalkboard 404 page.

We Follow employs humor in their simple 404 page.

I did notice that some of the 404 pages listed on posts were no longer in use, and the companies had reverted to simpler designs. Was this part of an overall streamlining of the design of the site, or an oversight by the company?

On this blog, Websites for Small Biz, my aim was to make the 404 page informative by adding a tag cloud.

• • •

More on Error 404 pages:

• Creative 404 Error Pages Around for Inspiration: in addition to a fun list of 404 pages, this post includes explanations of 404 pages, why a business should have a 404 page, and links to more creative 404 lists.
• 49 Nice And Creative Error 404 Pages
• Creative 404 Error Page Designs – 30 Interesting Examples

Your turn: What error 404 pages do you enjoy? What do you think would make a good error 404 page? Any ideas of your own that you are unsure of how to execute?

Feel free to leave a comment about either of the keyword images. Both were concocted using Adobe Illustrator. Poll will close on Aug. 29th.

Responsive web design is setting up one’s website so it will look good on any platform, whether it is a desktop browser, a mobile phone, or a tablet like the iPad. Well-designed responsive web design allows for a subtle transition from one platform to the next, so the user has smooth experience and doesn’t lose good and attractive design just because the platform is smaller than a large browser.

Learn more:

• A List Apart: Responsive Web Design
• Six Revisions: Understanding the Elements of Responsive Web Design
• Adaptive Web Design (book review)

What is an Example of Responsive Web Design?

As an example, I will talk about how I converted http://www.leoraw.com/blog/ to responsive web design. About half a year ago, I switched the theme of that blog to the Twenty Ten theme, thinking, oh, this is now the default theme for WordPress, that would be a good way to go for many platforms, right? Wrong. One of my friends reported that my blog on her iPhone looked like a lot of white with a bit of imagery in it. Sigh. So I took a theme that was responsive to mobile platforms, changed it, added parts of another theme that was responsive to mobile platforms, tweaked a few settings here and there, combined it with some jQuery for older browsers and the media queries CSS, and here is the resulting recipe page on my friend’s iPhone:

And the home page on her iPad:

Success!

Warning: this isn’t the easiest thing to do. It did take a fair amount of time, and I’ve been designing websites for over ten years. So if you want your site to be responsive, find a designer that knows how to implement responsive web design and plan that you may have to adjust your web layout so it will work with the adjustment changes. Your images will probably have to be re-sized, and you may find the easiest way to get your site to look good on mobile is to use display: none for parts of your layout – meaning, don’t show it on mobile.

Can I See How Responsive Design is Responsive?

If you want to get a taste of how a good responsive design works, take a site such as http://www.leoraw.com/blog/ and view it in the latest Firefox browser. Re-size the browser slowly so you can see the changes as the size of the screen gets smaller. It’s rather fun to view.

What are Alternative Solutions for Mobile?

For this blog, Websites for Small Biz, I have an alternate theme for mobile, the WordPress Mobile Pack. That is still the easiest way to go with setting up your browser for mobile platforms. But it’s boring and takes out the images. Moreover, I love the way responsive web design looks, so I hope to convert this blog to responsive, too.

Can I Afford Responsive Web Design?

An alternative way to ask that question: Can I afford not to have my website show up in a clear, beautifully-designed and usable fashion on platforms besides basic browsers? Would I lose customers? One can also specifically choose a WordPress theme that has already been set up for responsive web, such as these 10 Free Responsive WordPress Themes.

Want more about responsive web design?

• 30 Creative Examples of Responsive Web Design
• Responsive Web Design Articles, Tutorials & Guides
• Look Good on Mobile with Responsive Web Design

Show an Enticing Slideshow

Slideshow of Students Presenting at NJSGC Poster Session in April 2011

Display a Friendly Photo with a Short Paragraph

If you have friendly faces in a photo, it certainly can make a block of text more inviting than if you all you have is straight text! This particular photo was used to talk about networking, but it also might have been useful for a post about the limits of Skype.

Set up a Gallery with Photos and Short Explanations

Gallery of Photos for NJSGC Poster Session 2011

Combine Quotes with a Slideshow

Quotes from Past Participants in Master Teacher Institute at Rutgers Holocaust Resource Center

Interview a Key Person – Add Human Interest Aspects

You can interview a person with text or with video. Wilkin & Guttenplan presented 6 of their employees with video to show the human-side of their mid-sized accounting firm:

6 videos on Wilkin & Guttenplan site

Below is an example of a text interview. One asks a few questions via email, and with a simple photo, an inviting post is created.

Interview with Raritan Air Water Power Service

Use Infographics – Charts and Colorful Diagrams

Infographics are visual representations of information, data or knowledge. They can be lovely and informative designs. Here’s a detail from an infographic by Randy Krum called Caffeine Poster:

Detail from Caffeine Poster, infographic by Randy Krum

You can read more about infographics by visiting Randy’s site: Cool Infographics.

Click on any of the images in this post to see the original web page.

If you liked this post, visit Add a Slideshow on Your Website?

Should you add a slideshow to your website?

Yes, Add a Slideshow

• Slideshows provide many images in one space.
• Slideshows attract attention. One stops and notices.
• Slideshows can teach readers visually about the business or organization.

No, Skip the Slideshow

• Do you have a limited budget for your website? If you are a small business or organization, you may want to think about search engine optimization, utilizing social media to market your products, or developing more enticing content before you invest in a slideshow.
• The movement of a slideshow may not be a priority for your business message. Will it help you convert more readers into customers? And not everyone likes movement on a website.
• Be careful of load time – if your slideshow takes time to load, you may be penalized by a search engine.

Slideshow Examples

Lustig Dance Theatre features two slideshows on the home page. The site is built in WordPress with the Church WordPress theme.

Little Black Dress Society is built in Drupal. I love the pale gray swirly background image and the rounded shape of the slideshow.

Rutgers New Jersey Jewish Film Festival website is built in Joomla, using a Flash component for the slideshow. There are several slideshows elsewhere on the site, such as the one for the Graduate Program. Films for 2011 will be announced in September.

The site for New Jersey Space Grant Consortium is built with Drupal and features a slideshow of NASA photos.

Gregory Ruvinsky exhibits his charming woodwork creations with a Dynamic Drive gallery script built in Javascript.

Do you have any good reasons why a business should add a slideshow? Why they shouldn’t? Any great slideshow examples to share?

If you liked this post, see How to Display Information without being Overly Geeky.

Here are some ways a site might make a busy design “work”:
Element Schemes – the design might use only certain colors or might repeat small, intricate details over and over again.

Expectations – if you repetitively post the same information in the same spot on the page, readers will expect to find information in that spot. Changing around where information is placed can be a bit like when a supermarket rearranges the aisles – the customer may have a hard time finding what was once familiar.

Repeated Shapes – similar to element schemes like repeated colors and design details, one can have a lot of the same shape (rectangles, squares, circles).

One Large Element – even if there are lots of details on a page, often one large, emphasized element can draw the design together.

Page Divisions – simple page divisions, often into three, is another way to unify a design.

The examples:

Rutgers University Home Page

Large universities have much information to present, and Rutgers is no exception. Rutgers has the red of Rutgers in the banner and the emblem below. The top section under the banner presents Rutgers’ highlights, and the white section below has many details. To my eye, the page division is a simple three parts. The Rutgers site gets updated often; however, when one returns, the user sees what is going as expected: news is on the right, highlights in that block right below the banner. See Rutgers University.

Tate Kids

The funky design of this page makes it quite busy; however, in terms of finding information, I see three navigation bars at top and four consistent rectangular shapes in the center. Even as the designer allows you to change the background, those main elements remain. The color scheme matches the funky design; you won’t find earth tones on this site, for example. See Tate Kids.

Amazon.com

What a busy site! Amazon hopefully will keep its information in expected places, unlike some supermarkets. The color scheme and the repeated shapes of the books help tie the page together. See Amazon.com.

Via Rail Canada

Via Rail Canada, a new site done in Drupal, uses the photo of a woman serving the public in a railway car as a way to draw the viewer into the page. Repeated colors include the red of the Canadian flag, yellow of the logo, and the beige of the cushioned train seats. The page is divided into two, with one long banner at top and boxes with information below. See Via Rail Canada.

Bob Reasso Soccer School

When the Reassos asked me to put *all* of Bob’s biography on the home page, I was hesitant. Wouldn’t that make it too busy? But with the idea of highlighting one element (Bob Reasso) and using the red color of the logo along with the grassy green of a soccer field, the design ties together. See Bob Reasso Soccer School.

Do you have an example of a busy site that works? Or perhaps a busy site that could use a better design?

As with many links I find, I don’t have time immediately to implement the tutorial. So I save the links I like to Delicious, a social bookmarking site. See my Delicious bookmarks here. Another place you can save favorite links for later perusal is StumbleUpon.

One of the reasons why I liked the idea of switching from the previous way I had set up the page is the new version is much easier to edit. The original way I set up the page, way back in about 2001, was with separate HTML files for each page. That method, if you have ever tried it, is a real pain to edit. Every time you make changes to one page, you have to update all the others. Then about two years ago I redid the page in PHP; better, because now I only had one page to edit, but one had to remember where everything was on the page and search if one wanted to do edits. With Kevin’s jQuery plugin, I am editing simple unordered lists – here is a sample piece of the code:

And here is how the page looks now:

Just to be sure it looked OK in IE6, because despite web developers and designers disliking the rendering abilities of IE6 many people still use that browser, I checked the new Services page with IE NetRenderer. It looked just fine.

This is NOT a post on how to implement the new thumbnails code for WordPress 2.9 (latest is 2.9.1). If you want to implement the code, simply open functions.php and add the code as explained in these posts:

• Mark Jaquith: New in WordPress 2.9: Post Thumbnail Images
• WordPress Codex: Template Tags/the post thumbnail
• WP Engineer: About WordPress Post Thumbnail

This post is about how one can use thumbnails to enhance a site.

Why are thumbnails important to your site?

When you first come to a site, be it a blog or a website, what do you see? You might see a list or a menu of links and a header with an image reflecting the overall site. You might see one large image representative of the last item posted to the site. If all you see is lots of text or links, this may not entice to click further. But what if you are given choices, as in this library site:

Much more likely to click on one of these than on a plain link, right?

What if you want the posts organized differently on another page, say on a category page? How’s this:

Same thumbnails, but this page has tags, dates and category links as well. Same posts, but the layout has changed and more information added.

What has changed in WordPress 2.9 in regard to thumbnails?

Before WordPress 2.9, you could do thumbnails using a custom field. Now the thumbnail has its own spot on each post, and you can easily add the thumbnail (and change it) as well as descriptive text while working on the post. Also, thumbnail does not have to mean small; one can use a variety of sizes. See the links at the beginning of this post for detailed information.

Noteworthy Examples of Thumbnails

Lyza Danger’s projects page

News and Resources page of Connelly-Campion-Wright Insurance

Do you have an example that you like of a page with thumbnails? It doesn’t have to be done with WordPress – just good thumbnail design.