Tag Archives: responsive 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

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.

Browser Shots

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.

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