Tag Archives: web design

Mobile Web is No Longer Optional

It’s essential that every company has a gas station or a roadside have a gas station on the mobile web superhighway. Consumers are leaning hard on smartphones for critical information about brands during the buying process. You might be skeptical, or dragging your heels about making an investment in mobile, which may mean a responsive web design for your site or a mobile-only web presence. But you can’t wait.

  • 91% use the mobile web for inspiration during the middle of a task
  • 82% consult their smartphones while shopping
  • 66% use mobile to learn more about something they saw in a TV commercial
  • 55% have switched from a brand they intended to buy, because of information on search.

Mobile Web Marketing Basics

Smartphone trickery knows no bounds. Geo-fencing, for example, allows restaurants to alert hungry customers within a certain radius of the eatery about the soup of the day.  Fortunately, you can be effective without getting fancy. Scoot the Geo-fence, and get started with these basic steps:

  1. Your site must work on mobile devices. Many sites today are built on mobile responsive or compatible platforms. If you have an older site that doesn’t render well on mobile, build a new one. Gulp. We understand. But take a moment to calculate the value of the business you could be losing because you’re AWOL on their phones.
  2. Make sure that your site looks sharp on mobile and that it’s easy to operate.  Start with an analytical tool like Google’s “Mobile-Friendly Test,”  and test the mobile site’s usability by watching actual humans perform tasks on it.
  3. Create mobile-only search engine marketing (SEM) that’s sensitive to where and what your customers are using their phones. Buying needs change as the buying experience unfolds. For example, imagine this typical string of information needs about dog house.  what do dogs desire in a dog house? What brands incorporate the features I just learned about?  Which dog houses get the best reviews from pooches? What stores sell those brands? Help me compare prices. What is the closest store to my home? How do I get there?
  4. Have your site optimized for mobile. Speed up pokey page download times. Test design for use by chubby fingers. And tailor search copy to localize your business.

Stake your claim on the mobile web by making your site mobile responsive.

 

 

 

Comments Off on Mobile Web is No Longer Optional Back to Top

Earth to Creatives: Where are Your Websites?

Web education for students isn't happening.

Student website are missing in action.

This  became painfully apparent over the past month as reviewed more than a dozen portfolios from senior art directors and entry-level. The process was exhilarating, discouraging and, at times, enraging.

Of the 21 portfolios I reviewed, only one showed any digital work of consequence. And now that person works for us.

Maybe we give the younger people a pass on creating for the web, because they’re the victims of their school’s curriculum. But why? Hasn’t the younger generation grown up with all things web and mobile? Why don’t they have the curiosity to explore digital even if it isn’t in the course description?

Working in a web of denial.

One probable explanation: The old fogies are designing the curriculum, and they themselves have not adapted to the new secret ways of the web. Like many students they’ve convinced themselves that digital design is just an extension of print, and thus not worthy of much attention.

Of course that’s not true. And poor slobs like me will spend countless hours explaining why a web page can’t weigh-in at 20mb, how web visitors scan pages, that our pages foldup responsively for mobile devices, and that meaning and accessibility trumps artifice. Even if they can’t execute the basics, they should understand them.

The old salt art directors are another story. They don’t exactly act like the Internet is a fad, but neither do they embrace it. What I saw their work were hobbyist websites that looked OK, but t wouldn’t pass a basic usability or technical test. Their M.O. is to design a pretty interface and hand it off too a developer to make their mess work.

I can’t understand why any creative person wouldn’t dive into digital, poke around, learn, and bring new ideas to the party. We can’t kid ourselves any longer. Knowing the basics of print design and the joys of type ligatures prepares you better for a job in food service than web design.

Hip teachers and students are already embracing digital. If you’re not seriously into web, mobile, app, games and responsive design, get there. Maybe you’ll get a job at a cool, progressive shop instead of serving happy meals.

Comments Off on Earth to Creatives: Where are Your Websites? Back to Top

How your Awesome Looking Web Site is Tricking You

When it comes to web design and development, what you see is most definitely not what you get.

Before writing any code, the client reviews design layouts to show what the website will look like. Unfortunately people tend to treat these the same way they treat print proofs. They think once they sign off on the web design comps, that is EXACTLY what the website will look like. The problem is that not everyone is looking at your website with the same operating system, web browser, screen size, or pixel density.

All browsers are not created equal.
Although browsers should conform to W3C standards, they are not required to. Complicating matters further, the W3C standards are always evolving and expanding. But the browser companies decide when and how they implement these changes. Each browser interprets the same set of code slightly differently. For instance, Internet Explorer will optimize it for Windows while Mobile Safari will optimize it for the iPhone. Sometimes these different interpretations are barely noticeable and other times they are very dramatic.

Complicating matters even further, there are always multiple versions of a browser being used at any given time. For instance, Internet Explorer 8, 9, and 10 are currently being used. Each version displays the same web page very differently.

Test. Test. And test some more.
It’s crucial to test your website in multiple browsers and versions of each browser. It can be a daunting task, but with a good strategy and some technology, any pain is totally worth it.


Step 1) Know yourself.

Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot. Now, water can flow or it can crash. Be water, my friend.”
― Bruce Lee

The first step is to change your perspective. Separate design and content. What happens to your precisely designed desktop website when it’s displayed on the small screen of a mobile phone? Does the content reflow to use the small space? What happens if the user has vision problems and increases the font size to 30pt? The design must be flexible. You can either create a website that flows like water to take on the shape and size available or you can demand a rigid, pixel perfect design that will “crash.” Don’t waste time making sure that a line break hits properly in all 20+ browser iterations. It might work for a while…until a new browser version comes along. But think of the time and money you wasted and what you could have invested in better marketing or content. This doesn’t mean compromising your design. But you will need to stop treating website design like print design. It’s a different medium with different challenges and requirements.

Step 2) Know your audience. Look at your current website analytics and see what browsers your customers are using. How much traffic comes from mobile devices? How many customers are using Internet Explorer?

You should also view global usage breakdowns per browser. It’s important to know the most popular browsers and what version of those browsers are used most. Compare those stats to your web analytics.

We’ve found that global trends don’t always match up to vertical market usage. For instance, Internet Explorer 8 usage is 5.5% globally. But you may find that in your vertical market that Internet Explorer 8 usage is over 30%. Armed with this information, you’ll be able to easily determine how much effort you need to put into dealing with browser quirks.

Step 3) Know thy enemy. Every browser has its quirks. As stated earlier, every browser translates and displays the same code differently. Know the differences or find someone who does.

Step 4) Know the tools of the trade. There are a number of tools (free and pay) available for testing your website on multiple operating systems and browsers. Some will provide a screenshot of your page in each browser.

Quirktools
Browser Shots
Browserling

Others diagnostic sites test your site live. You log in and select the operating system and the browser version to test the page. For instance, you could select Windows 7, Internet Explorer 9. This type of solution is great for testing customer processes like a shopping cart checkout.

Browsercam
Sauce Labs
Adobe Edge Inspect

It’s essential that your website looks great for all your customers, and with the amount of fragmentation in the browser market, browser testing is a must. It can be difficult and time consuming for the novice. If testing is not built into your development budget, it should be. The ROI is very high if you have an experienced developer.

See more of our web design posts on WavyBrainy; and leave comments below!

 

Comments Off on How your Awesome Looking Web Site is Tricking You Back to Top

Redesign Home Page without Tanking Search Rankings

It’s no secret that some websites that perform well on search engines will never win a beauty contest. Just look at Wikipedia. With solid analytics and research, it’s possible to have the beauty and the beast. Our approach, put simply, is to thoroughly understand why a site works and not break it. See our Case Study on Website Redesign to find out how we remade and rebranded the home page for a major manufacturer while maintaining the luster of its search engine rankings.

Comments Off on Redesign Home Page without Tanking Search Rankings Back to Top

Redesign Home Page without Tanking Search Rankings

It’s no secret that some websites that perform well on search engines will never win a beauty contest. Just look at Wikipedia. With solid analytics and research, it’s possible to have the beauty and the beast. Our approach, put simply, is to thoroughly understand why a site works and not break it. See our Case Study on Website Redesign to find out how we remade and rebranded the home page for a major manufacturer while maintaining the luster of its search engine rankings.

Comments Off on Redesign Home Page without Tanking Search Rankings Back to Top

Naked HTML: Designers Glorify Error 404 Pages

Sooner or later someone will visit your website, click on a link, and get the dreaded “Error 404 ‘your site was programmed by drunken monkeys’ Page Not Found” message. It turns out that designing friendly and funny Error 404 pages has become a cottage industry. Mepholio.com and 10steps.sg have cataloged some of the best and most beautiful. We think these pages are great PR, but most of them don’t include any additional tools, e.g. a search function that actually help users find the non Error 404 page they’re looking for.

Comments Off on Naked HTML: Designers Glorify Error 404 Pages Back to Top