Category Archives: Web Design

What the April 21st Google Update Means to Your Business

Google has been rolling out lots of changes to apps, Google Play and the presentation of mobile search engine results all in preparation for a larger algorithm release that is scheduled to be released on or around April 21st.  As we learned from past Google algorithm changes (Penguin and Panda), these updates can greatly impact where your site ranks in the search engine results pages (SERPs).

The update set to be released on April 21st is focused on providing a better search experience for mobile users. To accomplish this, Google will be “expanding its use of mobile-friendliness as a ranking signal.” So what does that mean to business owners? If your website isn’t mobile-friendly, your mobile search engine rankings could take a hit.

In an email sent to Webmasters, Google has indicated that they are looking at the following factors when determining if your website is mobile friendly or not.

  1. Content not sized to viewport – This means that the content of your website is not resizing to match the width of the viewer’s screen. This will result in text that is challenging for user to read and may cause a horizontal scroll bar making site navigation a challenge for the user.
  2. Touch elements too close – links and buttons that are clickable on a mobile device need to be approximately 12-20 pixels apart to make for easy touching on a smaller screen. Having your buttons, links or other touch elements too close together will cause a usability issue and will  make your site not mobile friendly in Google’s algorithm.
  3. Flash usage – Most mobile browsers do not render Flash-based content. Therefore, mobile visitors will not be able to use a page that relies on Flash in order to display content, animations, or navigation.

The first thing you should do if you are concerned about this update, is run your website through Google’s Mobile-Friendly Test (https://www.google.com/webmasters/tools/mobile-friendly). If you get the following message, you are good to go.

awesome

 

 

 

However, if you get a message that looks something like the one below, then you’ll want to take immediate action.
notfriendly

 

 

 

 

 

 

 

 

The nice thing about this update, is that Google is giving webmasters exact tasks they can do to make sure their websites are not negatively affected. If your website turns up a not mobile-friendly message, here are the actions you can take to course correct and avoid a decrease in mobile ranking after April 21st.

  1. Check with your webmaster – it’s possible that your website just needs a few tweaks to make it mobile friendly.  Make sure to get a couple examples from your webmaster and run them through the Google Test above. If they pass, there is a good chance your provider can help make your website mobile friendly as well.
  2. Find a new provider – if your current provider cannot create a mobile or responsive site for you, it’s time to start seeking out a new vendor. If you are looking for a new provider, make sure you find one who is well versed in Search Engine Optimization. You don’t want to create a new site with a mobile solution only to jeopardize existing desktop rankings with non-optimized titles and a changing URL structure.
  3. Test and test again – once you have a mobile solution in place it’s important to check every page of your site to make sure all links work and that pages are loading properly.

Though it may seem reactive and hurried, website owners are going to have to adapt to the new mobile-centric digital marketing universe. Since Google is the industry leader, when they give a command, it behooves business owners to follow.

What is your plan for the Google Mobile-Friendly Update? Let us know in the comments below.

The C.R.A.P. Principles

C.R.A.P. (terrible name, infinitely useful) is an initialism which stands for contrast, repetition, alignment, and proximity. The term was coined by Robin Williams (author of The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice) and has become a basic principle of design. Utilizing the C.R.A.P. principles allows even the most inexperienced amateur designers to avoid the dreaded wall of text and instead create dynamic and attractive web content.

The basics of the C.R.A.P. principles are:

Contrast – Elements that aren’t supposed to be the same should be very different. Making the only slightly different confuses the eye and causes the reader to see a relationship that doesn’t exist. Using differing elements on a page draws the eyes to appropriately grouped elements and allows for proper scanning.

Repetition – Continuing formatting and styles for the entire document to create and maintain a cohesive feel.

Alignment – Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. Clean lines create peace.

Proximity – Proximity creates related meaning: elements that are related should be grouped together, whereas separate elements should have enough space in between to be easily distinguishable. Never underestimate the use of white space.

For more information and examples, visit:
http://www.webcredible.co.uk/blog/revive-the-crap-principles
http://thinkvitamin.com/design/how-crap-is-your-site-design/

“F” is for functionality

What do users see when they see your website?

According to a study conducted last year by the Nielsen Norman Group, they see a big F. The study, which used special eyetracking equipment to measure how much users looked as specific parts of a web page, showed users tended to view sites in a pattern that looks roughly like an “F,” scanning across the top and down the left-hand side. In addition, they spent almost no time looking at large images, banner ads, or other graphic content. In fact, they often skipped over meaningful content if it looked too much like an ad.

What does this mean for your site design?

Never forget that your customers come to your site looking to solve a problem. They want to buy a product, or find out information. It doesn’t mean that they are indifferent to design — a poorly designed site can look unprofessional, undermining confidence in the solutions you offer. However, design should never get in the way of the functionality of your site. It should never be difficult for your customers to find the solutions they are looking for.

Design enhances functionality. But functionality always comes first.

Ref: Eyetracking Study

Images: Print vs. Web : Understanding resolution

“But — it looked great on my monitor!”

These are words that every printer dreads hearing. Usually, it means a disappointed customer. If that disappointed customer has ever been you, with a little understanding of the differences between images on print and on screen, you can be a happy customer instead!

There are two major differences between images seen on a computer monitor, and images seen on a printed page. The first is resolution. The second is color. This time we’re going to talk about resolution.

Resolution is essentially a measure of how much information about the image is present. Continue reading

Images: Print vs. Web : Understanding color worlds

“But — it looked great on my monitor!” : the sequel

Last time, we talked about resolution as it relates to print vs. web image reproduction. This time, we’re going to talk about color world.

Your computer monitor creates color using light, like a television screen, using the RGB or red, green and blue model.

The print world creates color using pigment. Full color images are commonly rendered using the CMYK or cyan, magenta, yellow and black model, but some high-end print shops use the Pantone Hexachrome model which adds orange and green to the color mix. Items might also be printed using spot colors (such as those defined in the Pantone matching system), metallic or iridescent inks, or varnishes that give particular visual effects. In addition, the color and reflective quality of the paper affects how a printed image looks.

What this means, simply, is that the colors in your document do not look the same on the screen as they do on the printed page.

In fact, the colors in your document might not even look the same from one monitor to the next – equipment age and manufacturing differences can cause a great deal of color variation in individual monitors.

Similarly, if you print your document on your color office printer (which probably uses the CMYK model), you may not get the same results on a different office printer, or with a professional printer.

If your color requirements are not strict, you may never run into a problem. The sky looks blue on your monitor – it looks blue on your printout – no problem! But there are a couple of common pitfalls when moving an image from the monitor where you do your layout to the printed page.

1. Dot Gain
“Dot gain” refers to the tendency of printed dots to spread as the ink soaks into the paper. This is particularly noticeable on newsprint, which is uncoated and very absorbent (as anyone with a puppy can attest!). If you are preparing something to be printed on newsprint – such as an ad – for the image to look right on the paper, it will probably have to look too light on your monitor.

2. Luminosity
Images on your monitor are luminous – lit up. Images on paper are not. This can make printed images look too flat and dark if you are expecting them to look like the image on your monitor. Again, making the image appear too light on the monitor can give better results on the printed image. Using a coated paper stock or a varnish can increase the apparent luminosity of a printed image. Sometimes shifting the color mix toward yellow or green can make the image seem more luminous.

When going from screen to print, if you are having the image professionally printed, your printer may have some good ideas about how to improve your results.

When going from print to screen — for example, if you want your website to look like your business card — you will want to talk to your web designer about how to get the best results.

Websites are not like Field of Dreams

If your website is not producing it is not your fault. Blame Kevin Costner. Websites are not like “Field of Dreams”. Just because you built it does not mean “they will come”. A website is the single most powerful arrow in a quiver full of marketing weapons, but it will not do any good – no matter how creative or informative it is – if it cannot be found.

As a marketer, I often have the opportunity to discuss promotion ideas with clients. It still amazes me at how many otherwise intelligent business people do not see much value in their websites.

They promote their business in various ways sometimes spending serious money to purchase ads in traditional media but do not give a second thought to sending prospective customers to their website for more information. There are many effective and inexpensive ways to promote your website without ever being connected to the Internet.

A website can only be effective if the “webmaster” not only places relevant content on it, but also promotes it. I have compiled a quick list of things and places that a website should be listed offline, there are dozens if not hundreds more, feel free to post ideas of your own.

The first place your website should be promoted prominently is on any printed marketing material you have. i.e. your letterhead, business cards, flyers, brochures, catalogs, yellow page ads, etc. If you have company vehicles with marks on the vehicles, place your website URL proudly and boldly so it is easy to see. Get and use domain based email. Email from name@companyname.com is more powerful in building consumer confidence that your company is legitimate.

Don’t forget to place a link on your email address even if you have domain based email. Why? Many times your email correspondence will be forwarded to someone who is not familiar with you or your company. Placing a link to your website allows that person to visit your website even if your email address is not displayed when forwarded.

If you attend trade shows, make sure your booth has your URL listed and any handouts including promotional give-a-ways include your URL.
Mention that more information can be found on your website on any Radio advertising and include the URL in television marketing as well.

Magazines typically have a longer shelf life than many other forms of advertising. If you use magazine to advertise your company and you are not including the URL you have lost a great opportunity to speak to a prospective buyer in a much broader and effective way than to demand that they pick up the phone can call you.

If your website is not producing the results you expected, it is time to take a look at what is being communicated on and by your website and what you are doing to help drive traffic to your website. If you are not promoting your website every chance you get including at the end of an “elevator speech” you are missing opportunities to allow others to help you promote your business.

Design pitfalls: Design by Committee

We’ve all marveled at spectacularly ugly logos, or unbelievably stupid movies, or completely inexplicable web sites. And when we see these things, we wonder – who came up with that? Who thought that was a good idea?

Often, the answer is: nobody.

It was a committee.

It might seem odd that a group of people working together should be able to come up with something that not one of them actually likes, yet, in my experience as a designer, it happens all the time. A company rebrands, only to revert to the previous branding a few months later. A company goes through an absurdly lengthy logo design process, and in the end nobody is happy with the result. Or maybe everyone in the company is fairly happy with the result, but they discover that their customers find the new logo, or slogan, or name, to be baffling and unpleasant.

No group is immune to the pitfalls of a committee design. It seems difficult to avoid – after all, you can’t have a logo or a web site that some members of your organization just hate, can you? And some compromises are inevitable in a cooperative business environment.

Why do committee designs tend to turn out so badly? There are three major reasons.

1. The design nobody hates is also the design nobody likes

Consensus is good, right? You want everyone to be happy with the results of your design. But not everyone is made happy by the same things. We don’t always like the same music, or the same TV shows, or the same clothes — we don’t decorate our houses the same way – is it any surprise that we don’t always like the same designs?

The bolder the design choice, the higher the chance that someone on the committee will actively dislike it.

Eventually, a consensus will be reached – usually on a design that nobody actually hates, but everyone finds kind of boring. Over time this boredom deepens into profound dissatisfaction, somebody decides to spruce up the company image, and the cycle begins again.

2. You really can’t have everything

A common complaint about web site, logo, and package designs is that they are too busy and visually cluttered. They have too much going on, and none of it is very clear. Visual clutter is usually the result of trying to include too much — and one way that happens is committee design. Everyone on the committee has their own personal thing that just has to be there.

3. Warning! Egos ahead!

Committee design projects often become a playing ground for every other dynamic going on in the organization — status conflicts, ego conflicts, personal vendettas, pet projects. Sometimes, deep conflicts about the direction of the organization as a whole manifest themselves as conflicts over design.

Sometimes ugly designs are even the result of passive-aggressive lashing out, either by frustrated committee members, or perhaps by the designers themselves, after one too many contradictory design iterations.

In general, the best way to avoid the worst pitfalls of committee design is to give one person — hopefully, one person with some design sense — final approval on the project.

How to talk to your designer about color

One of the challenges of graphic design is that it can be very difficult to express visual concepts precisely in words. It’s hard enough for designers to talk to each other, when they already have a shared background of terminology and concepts – for designers and non-designers, trying to communicate can be incredibly frustrating.

Number one tip: Use a standard color reference Continue reading

I hate it — what now?

"I hate it."

The words every designer dreads hearing.

When you hate your first (or second or third) website design, it’s easy to assume that somebody must have done something wrong. Maybe the designer was lazy, or your sales representative is an idiot, or maybe it’s you, maybe you didn’t "ask right." But there’s really no "right" and "wrong" when it comes to designs. You probably didn’t do anything "wrong" and your sales rep and designer probably didn’t either. You just don’t like your first design. The question is not, "what went wrong?", the question is "where do we go from here?"

The first thing is, try to figure out why you hate the design. Review the specifications and example sites you supplied to the designer. Sometimes it will be because the designer actually did miss one of your specifications, sometimes it will be because the designer didn’t understand your requirements, and sometimes it will be because your requirements didn’t include something crucial. If that is the case, it should be fairly simple to add or clarify the missed specifications.

Of course, sometimes you will hate the design simply because it doesn’t look like how you imagined it would. Or, really, because your reaction when looking at it is not the reaction you hoped you would have. Maybe you didn’t even know your requirements included "no green" until you saw a site that used a lot of green and hated it. Or you didn’t know that you wanted soft edges, or a curve in the header, or a background that’s not white, or an extra-glossy wet look throughout. Well, now you do know. So, even if you hate the first design, you’re now that much closer to a design you’ll love.

All that assumes you can pinpoint what you don’t like. But sometimes you can’t. Sometimes you just don’t like it and that’s all there is to it. In that case, it might be a good idea to supply your sales rep with a longer list of sites liked and sites disliked. Be sure to explain why. If the designer sees a list of six sites that you like, he or she might observe something they all have in common — such as rounded edges, or a textured background or a smaller than usual header image — that you never consciously noticed.

Finally, if you really, really dislike a design, it is important to let the designer know that you want to see something completely different next time. Otherwise the designer might produce a second draft that addresses your individual problem points (wrong logo, different colors, etc.) but still give you a design that looks very much like the one you already know you hate.

Web 2.0 Design : more than shiny buttons?

Type the phrase "Web 2.0 design" into Google. What do you get? A bunch of tutorials on how to use Photoshop to create shiny, shiny buttons.

Does that mean that you can enter the land of Web 2.0 by taking your existing website and adding glossy buttons, rounded corners, gradient backgrounds, and graphics that look like they are reflecting on a wet surface?

Not exactly.

The term "Web 2.0" was coined for a conference in 2005 as a catch-all to describe post-2001 trends in web development.

It is easy for people to latch onto surface texture – like shiny buttons – but the reality is that many web design trends of the past few years are the result of underlying changes in how the web works and how it is used. Greater browser support for CSS design standards has expanded what kinds of designs can be implemented. The trend toward dynamic and interactive websites has pushed designs to be more flexible and to have clearly defined sections. And, as people increasingly use the web as a platform for social connections, business collaboration, and research, websites that are functional and easy to use become more important.

Shiny buttons aside, here are some design concepts that might be considered Web 2.0:

1. Simplicity

Minimalistic Google sets the tone for this concept, but many other sites have followed suit. Simplicity doesn’t mean bare-bones, although it can. It means that site elements are organized logically and obviously, so that it is easy for a casual visitor to instantly grasp what the site is about.

Modern websites have a lot more going on than websites of the past, and it’s crucial to corral all that visual activity in such a way that it doesn’t turn into a big mess.

2. Personality

For a while back in 1997, web designers seemed to have the idea that being cold and a little dull was the best way for a small company to communicate professionalism. (Don’t forget the stock photographs of serious-looking people in business attire!)

The best modern websites have a strong design personality and communicate a sense of fun. Bold icons, humor, splashes of bright color, cartoons, distinctive visual textures or illustrations — all of these have a place.

3. Attractive calls to action

A "call to action" is a marketing concept: essentially it means telling people in no uncertain terms what exactly it is that you want them to do. In marketing, of course, the thing that you want people to do is something that directly gets you money. "Buy now!" or "Call us today!"

Calls to action on the web include not only standard marketing, but also how to use elements that are free to the user — "Watch kittens frolic" or "Download our free software" are both calls to action.

The best calls to action feature both a visual iconic element, and a text element. These two aspects work together for instant recognition.

And yes, calls to action can include shiny buttons.