Call Now:

Graphic Design Articles

Posted on

Get the Best Website Layout: SEO Friendly, Easy to Update

When you and your company are ready to build a website, you will benefit from understanding enough about the web page development to:

  • get what you want,
  • make the website easy to update,
  • understand what the web designer/developer is talking about, and
  • make it search engine friendly (i.e. make money).

Web page technology has changed a lot in a very short amount of time. As web designers, we have to maintain our education and adapt as graphics programs and internet browsers get better, and bandwidth grows faster. To help you understand web design and development, here’s a brief history of web design, and where we are today with modern web building technology.

First Web Pages
When most people first designed webpages, they often had one header (sometimes purple), and one very wide paragraph in the center, usually center justified. There were often flashing things all over and animations. Backgrounds were loud repeating affairs that often competed with the text, obscuring it. Screens were 800 pixels wide or less, and 600 pixels tall. A large bandwidth was 56K – whoa. Load times were S-L-O-W.

Tables in Web Page Design
Next, people started using tables to design web pages. Text started to have space around it (good) and not be center justified. Unfortunately, the table layout shifted in different browsers (Netscape and Internet Explorer mostly), even with the right table cell settings in place. Designers put in “spacer GIFs” to maintain the cell widths: an uncolored GIF that starts 1 pixel tall and wide, and is stretched to the shim size you need. Internet browsers were less standard than today. People started talking about and using web safe colors to compensate for different platforms (Mac and PC), screens, video cards and internet browsers.

This expanded to the use of many tables set within each other. This can become a nightmare if the navigation or other layout parts need to be changed. I saw one page recently that had about 5 or 6 tables just to get the header navigation all in place. The entire page probably had 15 or more tables. Yikes!

Images Used for Navigation
Sometimes the “live text” navigation was changed to a picture of text: a text image. If it was the right size it could serve as its own shim in the table layout. Of course, search engines can’t discern any meaning to images, so ALT (alternative text) tags were added to compensate.

Web Page Frames
Some webpage designers started using “frames” for their web designs: each webpage contained several different HTML pages within it: one for the header, one for the left-side navigation, one for the body text area. These could show their frames, have scroll bars, or have their frames invisible. A fourth file acted as the “picture frame” to hold it all together, and was uploaded with the others.

Designing with web page frames makes it easy to change the header information for a website with hundreds pages. The web designer only has to change the one “header” HTML file that all the other web pages use. The same ease of modification applies to the navigation HTML file. (In some ways its similar to the PHP designs today, with the use of components that are turned on or off to make a web page.) Downsides: when someone bookmarks a web page made with frames, only the header HTML file is bookmarked. So the user returns to the website expecting to find the perfect gift, book, or article, but ends up on the home page, instead. They had to search again for the website’s information.

Web page styles like fonts and colors were mostly embedded into each HTML page. This made it difficult to make site-wide changes.

Web Page “Slicing”
Then web pages were developed using “page slicing.” Web pages left the grid-like designs behind. Web pages were designed using Adobe Photoshop, and later Illustrator. The web page designs were

  1. sliced into small rectangles of content,
  2. optimized based on the content (placeholder letters for text, low-resolution GIF for black and white images, or JPEG or GIF for a complicated image/photo),
  3. numbered by the software, and
  4. saved as an HTML file.

Then the file was opened in a web editor like Dreamweaver or others and HTML links and roll-over behaviors were added. Text was pasted into a pre-set space and formatted. One background color was added to the whole page to fill-in the spaces around the exported design. Some designers used background images that were only a few pixels tall, but the full web page width. The internet browses repeat the background down the full page height. This created a web page with fast loading times, but a better design.

The advantages of these were that they looked fantastic! Finally the grid designs were left behind. Cool rollovers and colors were used. More images were integrated into the design. The designs were relatively stable over most browsers (hear a sigh of relief from designers here).

But now, the disadvantages of web page slicing: these web page designs were hard to update and modify. If you wanted to change one slice, and it fit the old spot, then the web page change was easy. You could replace that slice only and re-code it. But if the company wanted to add one more choice to the top navigation, the entire page had to be changed in Photoshop, the web page slices modified, and exported to a web page editor. The roll-over images (those pictures that change when the mouse hovers over a navigation) had to be saved as new slices, too. Then the text, HTML links and roll-over behaviors were added again to the HTML page. If the text box on the webpage was a pre-set size and your text was too long or wide, the page split apart in the internet browser.

Styles Become External to the Webpage (CSS)
Web page font and color styling had been embedded into each HTML page. But now external style files called Cascading Style Sheets (CSS) were used. These CSS files were uploaded with the HTML pages at the top level. Changing the font, color, and font size of an entire website with hundreds of pages could be done much more easily: in a matter of minutes now, not days to modify web pages individually.

In styling, web designers started modifying the styles of existing HTML style codes. Italic could be modified to always be dark blue, bold, and a different font, for instance.

Flash Intros Become Prevalent
Around 1999, many companies started making animated introductions to their websites in Flash. Some of these were so creative that I visited their website just to watch them. Sometimes the Flash intros had annoying sound, and no “skip” button to go past the intro (tsk! tsk!). Then entire web sites were created with Flash. They can look amazing, and have great designs. Finally people were free to have menus and text scrolling, or have information pop out from one side to the middle of the screen.

Unfortunately, search engines cannot optimize Flash websites. They cannot read the body text, headers, and other information that tells them what the website is really about, and rank the website. For a company that wants “natural” web site visitors, instead of having to pay for them with search marketing, this can be a huge problem. (See my other post for more: Flashers-on) The Flash file is laid into an HTML file that acts as the picture frame. An entire Flash website, with many pages, could expand out from this one HTML file.

Second, they can be slow or expensive to update. Not always, but they can be. Animation is more complicated than putting in text into an HTML file.

Floating Content with External CSS Controlling Web Page Layout
And now today: modern CSS can control the entire layout of websites. The Cascading Style Sheet (CSS) is still an external file that is uploaded with the HTML pages. But now it modifies a lot more than just the font style, color and size. The content resembles a list along one side of the page, without the styles applied. When the external CSS file is applied to the page, the content is shifted to wherever the design tells it to go. So if you want to change the position of the sidebar from left to right, the change can be made site-wide in ten minutes or less. The style is changed on the sidebar and body-text paragraph’s positions. The CSS file only is updated on the server (no HTML files), and the change is read site-wide. CSS can control header styling, create color areas, and create live text navigation that looks like a button but is still SEO-readable. Paragraphs can be indented to any position. The platform can be sniffed out, so different CSS is used for mobile platforms like phones, than a laptop. Pages can float centered in the window, and still have a defined width; but they can also expand and contract a bit to fill a larger screen.

Designers talk about separating the form of the page from the content. This layout is also much better for screen readers that assist the blind and other people. There is less formatting information before the bodytext for screen readers to wade through. Designers can even put a hidden link at the top that says “Jump to Main Content.” And bold text is not “read” by screen readers, which is important if its only being used as a formatting tool. Now “strong” is the code for important text.

Readers who are vision-impaired, and need larger text, can change the font size often to a larger default (this depends on the CSS settings. If a pixel size is set for the font, they won’t be able to change it. If an “em” size (the size of a capital letter M or current font size) or a percent of the current font size is set, then the font size will be changable by the viewer.

Coded Component Webpages
Some web pages are now built with parts that are turned on and off depending on the web site visitor or the website designer. These components can be controlled with PHP code and others. E-commerce, blogs, and shopping carts are often in PHP or another code (including this blog). The code retrieves the header file information, then the blog-post file, the sidebar file, then the product database, and so on. Each component is modified individually. For example, on The Haunted Game Cafe website, there are components for board game categories, top-sellers, news, blog posts, Twitter articles, etc. The styles can be changed site-wide for headers, body text, header size, etc., or modified individually. An external CSS file is still used.

I hope this article has given you a better understanding of how websites may be built, and the advantages and disadvantages of each. Most importantly, you can choose the website design that works best for search engines to find, which will get you more traffic in the long term. And isn’t your website there to get you noticed?

Posted on

New Adobe Illustrator User Group in Los Angeles, California

There’s a new user group for Illustrator software users in Los Angeles, California. The group was founded by Chana Messer and others in June 2009. (I had the good fortune to study Illustrator under Chana at UCLA’s Graphic Design Program.) If you are interested in joining, you can read more about it on Adobe’s website.

Posted on

How to Save Server Traffic and Design-Time Changes Using External CSS

How can your company save time and money just by the way a website is designed? Very easily: Use external CSS files. This will save your company money, of which we could all use more these days.

Embedded Website Styles
Website pages used to be designed with internal styles. The font size, color, font family (i.e. Arial), and attributes like bold or italic all used to be listed embedded in part of the HTML code. Changes to the main body font, size or link style meant that each page had to be opened in software, edited, saved, and re-uploaded to the server. This took a lot of time (=money).

External Style Files (CSS)
Today websites are designed with a link to one or two external style files that end in the suffix “.css”. The second CSS file could be or mobile use, for instance, or to change the look of the website just for fun.

CSS stands for “Cascading Style Sheet.” It means that some styles are inherited from overarching ones above them. The main font family in the “body” style can modify the whole website except for certain specified areas, for instance. Areas like “main body” or “footer” can be designated with certain attributes: placement, background color, etc.

Now imagine designing all of your web pages with links to an external CSS file: changing a sidebar from the left to the right, the font for the entire website, or the background color could take less than twenty minutes, regardless of the number of website pages. Ahh… a smaller website bill, happy boss. Gooood.

Lower Server Time
External CSS files also cut down server time for loading web pages. The CSS file is loaded one time when the visitor first arrives at your company’s website. When they visit the next fifty web pages, the CSS file is already there. It doesn’t load again. This cuts down server time (=money). Again: happy boss (probably you). Gooood.

Dirty HTML Code vs. Clean Code
When using internal styles embedded in the web page, the font family and size, color and alignment used to be repeated over and over again for each different paragraph or section. Even on one webpage this can add up to a lot more code, which translates into memory and server time. Now consider having hundreds of company web pages.

Old Code:
(Note the repeat of the font face, left alignment, font size twice. ( ) used instead of < >.)

(p class=”MsoNormal” align=”left”)(b)(font face=”Verdana” size=”2″)
(br)
Welcome! (/font)(/b)(/p)
(p class=”MsoNormal” align=”left”)(font face=”Verdana” size=”2″)
New from Frontiera: A better way to organize… (/p)

New Code:
(class=”bodytext_area”)
(h1)Rutgers Industries Offers More(/h1)
(p)Worldwide distribution of your products requires more than… (/p)

In the new code, the font family, size and aligment don’t have to be repeated again and again for each paragraph (p) nor header (h1) code on every web page. The section is designated “bodytext_area” style: all of the styling info sits in the external CSS file, and is loaded once, regardless of how many webpages there are on the website.

Tabs Necessary in HTML Code?
It is very helpful when the web page code (HTML) is organized using tabs. It makes it very easy to see the sections. Sometimes, though, the sections can involve so many tabs that the code is literally one screen width off the to the right. Some people are even questioning this pracice, since it can lead to hundreds or even thousands of extra, useless formatting. This formatting is behind the scenes of how your web page looks, and has no affect on it. It adds to the web pages’ loading times, and so server time.

Screen Readers:
Exernal CSS and less cluttered HTML code can greatly help anyone using a screen reader: disabled, blind, hard of sight, etc. Apparently the screen reader voices all of that code, and makes the visitor wade through header, body and table HTML code before even getting to the main content. This is especially a problem with nested tables: tables within tables just to format the web page. Andrew and Shafer write in their book HTML Utopia: Designing Without Tables Using CSS that it can take thirty seconds for a screen reader to wade through all of that extra information. Imagine the frustration of waiting that long for every web page!

Mobile Use with CSS
Instead of having a separate website for your mobile phone customers, it is possible to just adapt the CSS. Code (on the server, I believe) can detect whether the visitor is using a mobile device, and automatically switch to a mobile-version style sheet. The mobile CSS file could arrange the body text to a narrower width, insert photos under the text, instead of to the side, for instance. It could change the links to show up better in sunshine, possible changing from gray body text to larger, black underlined text. The code could also detect what type of mobile device: iPhones seem to work fine on normal webpages, so you wouldn’t switch that visitor’s CSS file. They could use the normal web page’s CSS.

Now I’m sure you can see the advantages of using external CSS for your company’s website. Site-wide changes are much easier and faster. Visitors using screen readers will arrive faster at your content. Your customers will be happy with faster-loading web pages. And this technology makes it easier to adapt content to mobile phones. All in all, it’s win-win-win.

Posted on

What Color Settings to Use: RBG or CYMK?

Many people are confused by the color space settings in graphic design programs. The final output usually determines the correct setting.

So when should you set up your file in CYMK? Well those four initials stand for cyan, yellow, magenta, and black. This is best used for four color printing by professional printers using ink or digital output. Remember to also change any linked files like photos to CYMK, as well. (Scanned files start as RGB.)

RBG is best for web use and printing at home.

Hopefully that will help clarify which color space to use and when.

Posted on

Stop Paying Too Much for Web Server Traffic: Guide for Placing Correctly-Sized Website Photos

Are you paying more money than you should be to load photos on your company’s website? Loading images larger than they appear on your website can increase your server traffic costs, not to mention your customers’ page loading time. This article will help you understand how to use website images the right way.

Keep Images the Correct Resolution:
Print resolution is usually 300 dpi or higher. You can sometimes print an image around 250 dpi and get away with it not looking too bad.

Images for use on the web should be 72 dpi; “dpi” means dots per inch, and is a measure of resolution. It might also be written as “ppi,” or pixels per inch. dpi is the most common phrase, and it usually is written lowercase.

Most screens read images at 72dpi, so using a larger image just uses more server memory and load time; it won’t show your images any better.

You can change your photos’ resolution using programs like Photoshop, ACDC (free from Download.com) and others.

Use Correctly Sized Web Images:
If your photo appears 400 px (pixels) wide on the web page, then you should really use a web image that’s the same size. If you used an image that was 2000 px wide, you would just be costing yourself money in server bandwidth, and increased loading time for your customers. (You might have seen these images: they load very slowly from top to bottom even with a great internet connection.)

To fix your image to the correct size, resize a copy of the original photo down to 400px, and 72 dpi. Then save it as a web image: JPEG, GIF, PNG.

JPEG’s are compressed, and great for photos. They don’t look good stretched larger than their original size, or will appear pixelated or blurry. They also aren’t good squished smaller than the original size, even if the length and width are shrunk together. They will appear blurry. JPEGs work well for gradients. If you have a transparent part of the image, it will be filled with a matt color (usually white, unless you specify another color during the “save for web” process). JPEGs are lossy, which means they degrade a bit with each new save. If you want to modify a JPEG image, its best to go back to the original, and not make a copy of a copy of a copy.

GIF’s are also OK for photos, depending on the complexity of the image. If you have transparent sections, they will preserve that. They don’t work well for gradients, as they look like lines. These are best for less complicated images like line drawings or black and white.

Portable Network Graphics or “PNGs” (pronounced p-n-gees) are bitmapped images that are larger than JPEGs, but can be enlarged to a larger size without losing quality. They use lossless data compression. Apparently they were invented to replace GIFs. (Here’s a great article on Wikipedia on PNGs and how they compare to other formats.)

If you have an e-commerce website with thumbnail-sized images and larger product images, its advisable to scale two versions of the image, instead of using the larger image squished down for the thumbnail size. Imagine the loading time with twenty large JPEG images squished down on the same page (500-700k each x 20 on the page = 10,000k or 10MB) when you only need a thumbnail (10-20k each x 20=200k). The text isn’t even included here.

I hope this article has helped you understand more about photo file sizes, and how to use the correct image size and resolution to help your company’s bottom line, as well as your customers.

Posted on

The Future of the Internet: Microsoft’s Project Natal

I’ve just seen the future of the internet: Microsoft Xbox 360’s Project Natal. A person uses their hands, controller-free, to surf the internet, play computer games, and shop, all in one machine. Project Natal has body scanning to “see” your hands and whole body as you use them for controlling the internet or video games. It has facial recognition to match the user (in this case a teenage daughter) to her own contacts and experience, and voice recognition to take commands. Their demo video shows the young woman being recognized and logged in (facial recognition), calling a friend through the Xbox and TV (voice recognition commands), looking at a dress a friend found (sharing files), and dressing her virtual model (body scanning and recognition), and turning from side to side in it. (I’d like to know if the shopping feature requires a 3D model of that dress, or is it taking the front and extrapolating what the sides would look like?) Watching the demo reminded me of the computer interface in the film the “Minority Report.”

While playing computer games, the machine scans the player’s whole body continuously (body tracking or motion capture). Project Natal then showed the player’s body in the game knocking down buildings as Godzilla or fighting martial arts-style with an opponent. Critics of “couch potato” video game players will have little to say as players engage their whole body to win.

Another view showed interfaces similar to the Apple iTunes’ album view interface: a left-to-right scrolling view of different items: game tools (i.e. skateboards for game play), dresses (in shopping), and movie covers. (The Xbox is also a media storage device.)

The live demo from tech conference E3 showed someone painting. I didn’t think that was so great, but the “stencil” function would be fun for kids to capture their shapes while jumping in mid-air.

I can’t help but think back to my first experience on PC computers navigating the list of menus across the top with arrow keys (pre-mouse, no less!), or the button-intensive video games of the last 15 years that lost many of the casual and younger players. The Nintendo Wii was a huge step forward for videogames, simplifying the gaming experience, and including multiple age groups, including young children and seniors. Now Project Natal has carried it a step further, into internet, communications, video games, and e-commerce.

Posted on

How to Educate Yourself in Graphics and Website Design

Learn it all.

There are many places to learn graphics and website design outside of the traditional college system. Although I liked college, its strictures can be too much in this age of on-demand media.

Looking into one Masters Program required that I apply a year or longer ahead of the start date. Why the long wait before you start? Why can’t you start the same semester, if you desire? So here are some alternative places to look:

::Graphic Design: Self Taught & Online Programs
I highly recommend the Lynda.com software tutorials. They have online video tutorials for so many different programs. The cost is a minimal $25 a month, and its month to month. For that money, you can watch as many videos as you want!

And remember that any training leading to a job or to keep up your career is tax deductible. I find their videos much easier than just reading a book without seeing the software being used. (Disclosure: I believe in them so much, that I became an affiliate recently.)

Grow your brain.

Robin Williams has written many great books, but especially Web Design Workshop. Her books are really great for thinking about the design and the visual experience of using a website, or the look of words in a printed piece, before you start to code or build something on the computer. Many years ago she railed against “mystery navigation,” links with no labels or ALT tags. Your local library might have this book.

The Visual Quickstart Guides are a wonderful series. I learned a lot in their tutorials, and it was easy to look up what you specifically wanted to do. Very well laid out and indexed. Check out these:

Online courses: UCLA Extension and Ed2go.com both have online courses for graphics and website design. (For UCLA try art or communications sections.) I’m sure there are others, as well. UCLA tends to be quite pricey, but again, it could be tax deducted under education expenses. You could also try Santa Monica College Academy.

AIGA.org,a professional design organization, has many articles online, as well. They are written by professionals in the field.

You might also check out the winners on CommArts.com. It’s a creative magazine focusing on design fields like websites, illustration and graphics.

::Website Design
CSS has radically changed in the last five years. Websites are much easier to update, and the use of CSS-styled live text allows search engines to index them better. (For more on this, see my articles on this site:

If you want to learn more about website design, I highly recommend HTML Utopia: Designing Without Tables Using CSS. Rachel Andrew really explains how to build the page using tutorials (easy). The book also includes a wonderful index in the back. She talks about coding the body first, so search engines will rank it more importantly than sidebars. Sidebar text is usually ancillary, so of course it can be coded further down the line of HTML. She explains how to float a three column layout on the page. Her tutorials will also explain how to create a page that floats in the center of the window. All of it is useful!

And here are a few more of my favorites:

Posted on

Website Design Search Engine Optimization (SEO) Tips


How to get top SEO rankings for your webpage with search engines like Google and Yahoo? It’s part art and science, and then lots of tweeking.

Search Engines are ranking web pages a lot more now based on each page’s readable content, instead of just meta tags like keywords and descriptions. Some designers on the Adobe.com forum advocate not filling anything in for meta tags, since they have been so misused. I think descriptions are still useful for search results, as long as they’re short.

All Content is Indexed:
Search engines look at the pages’ readable content. That means all the live text on the page: page titles (which appear at the top on the tab when you open the page), heading text, ALT tags for images, page names (financialplanning.html), image names (financial_planning_chart1.jpg), folder names, and last… domain names. Yup, even your domain name can help or hurt you. Having a domain name that is closest to your actual product AND descriptive is best. Canterbury.com tells me nothing about the business at all. This business happens to be an exterminator. (!) (Don’t quite see the medieval relationship… but oh, well!) So canterburykillsbugs.com or canterbury_exterminators.com would be better.

Site Maps!
Include a site map of your website using live text, not images for text. It’s a text-rich meal for search engines, and your visitors will thank you, too.

Use Live Text Navigation Instead of Images
Beware of using images like GIFs and JPEGs for navigation, especially without using alternate tags. Search engines can’t read any meaning into navigation images, and so you don’t benefit with page ranking. They are not “live text,” which is readable by the bot (robot) that is indexing your page.

Don’t Use Repeating Words
Repeating words in your meta description or meta keywords will get you a search engine wrist-slap. But repeating words with possible misspellings is a good idea.

Beware of Flash
Search engines can’t read Flash’s text. They also can only index live text on HTML pages. Some Flash websites with many pages may branch out from only three HTML pages.

Don’t Have Multiple Links to the Same Page Content
Having many different web pages with the exact same text will get your website penalized by the search engines. They will think that you are trying to weight your page down with keywords. Instead, use many links to the same one web page.

Incoming Links
Improve your web page rankings by getting links to your website from other web pages, including your own related websites. Pages with more incoming links are seen as more important, or worthy. If you sign up for the free two week trial at Wordtracker.com, you can read more about the person who started the KEI. He has another website that is designed to help businesses trade links in related fields. (I’ll try to find out the actual link and list it here.) I’m sure there are others online, as well. You could e-mail other companies to see if they are interested. A realtor could partner with these: a mortgage broker, insurance agent, local credit union, high-end light fixture store, and painters, for instance. These are related, but separate businesses.

Multiple Domain Pointers:
Remember that web domains are cheap – $10 or less for a year. And search engines know that important pages have more links to them. Just think how many links there must be to Amazon, the Smithsonian, and … probably many porn sites. So look at the popularity of web domains on a search-reporting site, buy several, and point them all to one main site using a redirect feature. This can be done from the domain host manager. Also consider testing domain names for better traffic results with the same content. A website with the name tarryii.com doesn’t tell us much; tarryinvestmentsinc.com would be better for search engines, even if you list the shorter one on your business cards and letterhead.

In the example above, Canterbury could have a domain called LA_exterminators.com that pointed to their main website.

Search Reporting Companies:
Companies like Wordtracker.com and Nichebot.com report about the number of searches for each key word, as well as its competition. Wordtracker comes up with a keyword effectiveness index (KEI): the ratio of the number of searches vs. the competition for those search terms. There are other companies that provide this info, as well.

Test your domain name and keywords (for use in headers, page titles, etc.) on the site, and then use the best ones. Include the same words into your webpages’ live text. Here’s a great article on Wordtracker.com, among many others.

It works like this: you can have a millimeter slice of a 6000 search pie, which means you will appear on page 4342 or later, OR you can have a decent slice of a 100-200 search word pie. Choosing the latter will get you top placement for those words, and possibly into the first 3 pages. (hopefully the first page!) If you can find several keywords in this lesser used category, especially with a combination of words, you maximize your page viewings, and hopefully then sales.

Use these keywords in your articles’ text for better “natural” search engine rankings. If you choose to write about how to paint murals in your home, you will know whether to call them murals, scenes, or vignettes, and whether more people are looking for nature murals or kids room designs. It’s market research.

Use these same keywords for advertising on search placement ads (those paid search results that appear on the side or first); companies include Google Ad Words and Yahoo Search Marketing.

Refine and Tweek
Keep refining it and updating your SEO plan, as well as your website, and it will pay off for your business in better natural search engine page rankings.

I hope that will help you improve your rankings. Best of luck with your Search Engine Optimization.

Posted on

Web Design Rant: Appliances & Poor User Interface

Good user experience can be applied to everything in our lives, including the lowly household appliance. We recently moved into a new home with a sparkling white microwave. It works well, but I have a problem with the user experience. It takes three button clicks minimum and a delay of five seconds to make that thing turn on! Why do you have to hit a button marked “cook time”, when this is the main thing the microwave does? Everyone who goes to the microwave wants it to cook something. (If you visit a European restaurant without being able to speak the language, the person who greets you knows why you’re there: to eat. It doesn’t matter if you can’t speak a word.) Back to the microwave: Then you enter the time, then hit “start.” Then it waits several seconds before beginning. It even has a scrolling message across the front to tell you to hit “start!”

Wouldn’t it make more sense to just enter the time alone? That thing could turn on after a delay of two to three seconds on its own, just to make sure you didn’t want to change the power settings. Instantly, we’ve cut down on the work we had to do to by two-thirds.

And does anyone ever use the buttons at the top for “popcorn,” “hot dog,” or “frozen pizza?” The popcorn usually says on it not to use the microwave’s pre-sets. I think that small interface would be better used for buttons from 1-6 in 1 minute increments, with the number pad as well, and perhaps three buttons for power levels: low, medium, and high.

What are your appliances like? What is your business website like? Does it also make the visitor take more than three clicks to find something important? Does it miss the most needed link? Does it include the all-important site map? My bank’s phone system failed to have a link for “locations” without going through the whole system and putting in your account number. A different bank has a disappearing log-in box that goes away after you move your mouse off it (to hit the enter button)! Who thought of that one?!

Something to think about the next time you use your microwave…

Posted on

Web Design Rant: Poor Form Designs

I have to take issue with the design of most online forms, hoping that these issues will stop. I am so tired of drop-down lists for the state. Why, you ask? When someone is typing in their city, they tab to the next field (should be the “state” field, but sometimes it jumps to the “zip code” field). If your hands are already typing on the keyboard, it is not helpful to have to stop and reach over to use the mouse to go back to the state field (from zip code) and choose the state from the list. Sometimes you can tab from the “city” field to “state”, and then hit the first letter of your state, and use arrows to move down the list from there. That’s acceptable. But when it tabs to the zip field, skipping the state, it makes me irate! It would be faster to just let me continue typing and add a two letter state code.

The Cure:
Filling out zip code should make the computer fill in the city and state, right? The example above is based on paper forms, not the website-driven internet reality of having the computer look up something on its own to make your life easier.

That’s my two cents on the design of forms.

Posted on

Flash-ers On: Search Engines Can’t Read Flash Text to Rank the Web Page

You’ve started you new biz, you’re polishing your new biz certificate and domain name, and now its time to make a web page. So many options – Fancy Flash animations, music, and things that jump, or something static, with less pizzazz?

Well, beware of Flash web pages, because search engines cannot analyze the text on each page of your site. That means it can only read the pages’ titles, and rank them from those. The main emphasis lately in search engine optimization has been on page content, or what each page actually says, and less on the (meta) keywords and descriptions, which can be put in by unscrupulous web people to say one thing, when the page content is about something else. Page content includes a web page’s titles, header text, and body text (we’re talking about live text, not a JPEG picture of your text).

Some people try to compensate by placing a Flash file into an HTML page, and put the same live text that’s seen on that page in the same color as the background. (I don’t know if search engines have clued into this trick. They keep SEO rules fairly hush-hush so its harder to trick them.) But this is a very messy business, and ill-advised. And this only works for the pages where there is one HTML web page for each Flash file. Some sites have one main HTML page (a home page, for instance), and from there the user can navigate to 30 more Flash pages from that same HTML web page container. This scenario is easy to upload for the user, but terrible for search engines trying to figure out what your website contains.

And when a user bookmarks the 15th page into a Flash web page, their bookmark is only for the “container” HTML page. When the visitor returns to the bookmark, they might get only the home page, or whatever HTML “container” holds those Flash files.

So when you’re reaching for the best tool box, it just might be that old hammer (HTML) that works better with SEOs rather than the shiny Flash tool kit. (You could still use Flash or other media files in sections of your website, instead of the whole web page or site.) Your business website will be ranked closer to your true message, and receive traffic from more relevant searches. Your business website will thank you for it!

Posted on

Write Your E-mail Address for Human Readers

I’ve seen far too many business cards with e-mails written like run on sentences: difficult to decipher where one word ends and another begins. And I just can’t take it anymore! Time to take a stand against pointless lowercase letters.

E-mail works just as well like this: Frank@BlueSkyPublishing.com
as this: frank@blueskypublishing.com

The first e-mail is much more readable on business cards, e-mail signatures, and letters, don’t you agree? And isn’t getting customers to remember your business what’s important?

On websites with live e-mail links, you can list the text that is shown as “Frank@BlueSkyPublishing.com” while the link still says this: “frank@blueskypublishing.com.”