I have learned one solid truth on my life journey - that nothing ever ever EVER stays the same, and given the changes in technology just over the last couple of years, this couldn't be a more profound truism for business owners as well. No longer can businesses solely rely on developing a website for desktop computers because the Internet isn't something you only browse on your desktop computer anymore. It's also on your phone, your tablet, your laptop and who knows what other gadget from the future. 

Adapt or Perish

According to research firm IDC:

By 2015, more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices. As smartphones begin to outsell simpler feature phones, and as media tablet sales explode, the number of mobile Internet users will grow by a compound annual growth rate (CAGR) of 16.6% between 2010 and 2015.

Websites currently using flash for instance, are missing out because Flash is not compatible with platforms such as the iPhone and iPad, and Adobe is no longer pushing its Flash software format for use in browser programs that come with smartphones and tablet computers. 

So... What's the Answer? Responsive Design.

When you visit a website today using your iPhone, desktop computer, Blackberry, iPad etc, its design needs to take into account the platform you are viewing it on, and ideally it should match the size and shape of the screen you're viewing it from. This is called "Responsive Design". 

Responsive Design is a relatively new trend that's moved from the fringes into the mainstream. In a nutshell, it uses fluid widths in percentages and ems, scalable images and adjustable layouts. There are 3 very important elements in responsive web design:

• Flexible Layouts
• Flexible Images
• Media Queries

Take a look at an example below which illustrates Responsive Design across multiple platforms:
 (image by Shadow Song Designs)

Here's another example of a responsive website we recently completed:

Why Should Responsive Web Design Matter to You?

The bottom line is this... business owners can't ignore the issue of multiple viewing platforms. Your website needs to accommodate multiple viewing platforms so your customers can access your products and/or services no matter what device they're using.

Call us. We can help.

P.S. Yes we know our website isn't responsive. We're working on it!

Testing for compatibility issues is easy with Adobe Browserlab. I probably sound like a commercial for Adobe, but I've tried several versions and Adobe Browserlab wins hands down. With Adobe Browserlab:

• Preview your web pages in multiple versions of Internet Explorer (Windows®), Firefox (Windows and Mac OS X), Safari (Mac OS X), and Chrome (Windows).
• Customize your test settings:
  
  • Speed up testing by choosing only the browsers you care about.
  • Create and configure up to ten Browser Sets to customize tests to your individual project needs.
• For browsers that align differently, you can easily and accurately align screenshots to a specific point with Smart Align.
• Test web content quickly and accurately
• Test using multiple viewing modes:
  
  • Get a full screen shot, even beneath the fold
  • Compare in two browsers side by side
  • With onion skin view, you can overlay 2 screenshots on top of the other
  • Focus on specific areas with custom positioning (manual or automatic) of the screenshots for comparison
• With the integration of Dreamweaver CS5 or Firebug, you can give BrowserLab permission to preview web pages that are behind a firewall

When we first started out as web designers we recognized how critical it was to develop and implement systems and processes when building or redesigning websites - not just to help us track our projects, but also to engage and inform our clients.

If you are looking for a workflow that really works and is dead-easy to follow, I can't recommend Web ReDesign 2.0 by Kelly Goto and Emily Cotler enough.

The book lays out a specific five step method called the Core Process to help you organise your web projects. It's not based on theory but actual hands-on experience. Topics covered are:

Step 1--Defining the Core Process: discovery, planning, and clarification;
Step 2--Developing site structure: content-view, site-view, and page-view;
Step 3--Visual design and testing: creating, confirming, and handing off;
Step 4--Production and QA: prepping, building, and testing;
Step 5--Launch and beyond: delivery, launch, and maintenance.

What the book doesn't cover is back-end, server-side programming. Instead it focuses primarily on the visual, conventional components of a website. If you can recommend another workflow I would love to hear from you!