Responsive Web Design

Responsive Web Design allows web sites to be shown correctly and look great on mobile devices such as smart phones & tablets as well as, laptop & desktop computers..

Overview
How it Works
Demonstration
Why Worry About Mobile ? (You Better!)
What About Flash ?

Overview

Responsive web design involves a number of advanced techniques which allow a web site to automatically & dynamically adapt its layout and deliver the content that best suits the device being used to view it.

This design approach is the hottest thing and we have extensive experience using it to create informational, transactional or e-commerce web sites.

If you don't think your customers use mobile to view your site - that's just because they've gone to your competitors who have a responsive web design. CNN Money reports that mobile access to the Internet now exceeds PCs.

We've evaluated and have experience using several different responsive web design frameworks, including Bootstrap 3, Foundation 5, 320-And-Up, Golden Grid and Simple Grid. Although our primary choice is Bootstrap (developed by Twitter.com), we'll use the framework that works best for your specific requirements.

How it Works

Responsive web design works by placing the web site content in a transparent grid of rows and columns (you don't actually see this grid, it's just conceptual). The grid areas can then be stacked up differently depending on the maximum width of a given device.

Using this approach, a web site can be shown on any sized device (smart phone, tablet, monitor) without anything being lost off the screen, as shown below.

Responsive web design can perform even more powerful things such as delivering different resolution graphics (or hiding them entirely), transforming menu bars into drop-downs, displaying alternate sections of web content, and other things depending on a device's size and capabilities.

Demonstration

To see this in action, just drag the browser window edge while viewing our web site.

First click the window maximize button until you see the single rectangle and then drag the window edge to change the size of the browser:

For large screen devices: such as laptop/ desktop computers, our web site is displayed with a long menu bar, drop-drop menu groups, 2 sidebar areas and 3 sections in the footer.

For medium screen devices: one of the sidebars is automatically not shown. The information in the sidebars of our site is not critical but these areas could also be moved to the bottom of the page.

For smaller screen devices: such as tablets, both sidebars are now not shown and the menu bar has been shortened. Notice how some menu groups (such as Policies) have now been combined into other groups (Company). The footer area has also been rearranged so the sections appear centered above each other.

For small screen devices: used by smart phones, the menu bar is now completely collapsed and can be shown as a drop-down list by clicking the toggle button at the right. Notice how all the graphic images in the page now also automatically resize so they don't extend off the screen.

The examples above are only a sample of how a responsive web site could be designed, and your site can be done any way you desire.

Why Worry About Mobile ?

CNN Money reports that mobile access to the Internet now exceeds PCs. So if your site isn't mobile friendly - you're going to lose business! (if you haven't already).

NEW YORK (CNNMoney) February 28, 2014

Americans used smart phone and tablet apps more than PCs to access the Internet last month -- the first time that has ever happened.

Mobile devices accounted for 55% of Internet usage in the United States in January. Apps made up 47% of Internet traffic and 8% of traffic came from mobile browsers, according to data from comScore, cited Thursday by research firm Enders Analysis. PCs clocked in at 45%.

Although total Internet usage on mobile devices has previously exceeded that on PCs, this is the first time it's happened for app usage alone. The shift follows a freefall in PC sales, which suffered their worst decline in history last year.

Smart phone adoption, meanwhile, increased 39%, according to research firm IDC. This trend will likely continue thanks to improved user experience on mobile apps and the expansion of high-speed 4G access, said Andrew Lipsman, vice president of marketing and insights at comScore (SCOR).

As of January, 55% of American adults had smart phones, while 42% owned tablets, according to the Pew Research Center.

What About Flash ?

Flash® was a powerful web design system which allowed high quality, interactive animations & videos to be shown on any device that supported the Flash plug-in. This allowed web designers to focus on the content rather than having to struggle with all the deployment issues of different operating systems, browser versions and devices.

Over the years we created a number of sophisticated, mission critical Flash sites; however today it's rarely used since it's not supported on many mobile devices such as smart phones & tablets (including all Apple iPads & iPhones). For mobile devices that do support it, Flash animations can run painfully slow and they eat up mobile data allowances, bandwidth & battery life... and the only thing worse than not having a cell signal - is a dead battery!

Consequently most designers have abandoned Flash entirely, and converting a Flash web site (especially a Flash-only site) to a responsive web design, can be quite involved depending on its complexity. This is because even the newest HTML5 standards cannot play Flash animations or videos, so they need to be redesigned to several other formats for different browsers & devices.

Fortunately, we have extensive experience converting & enhancing Flash web sites. We can even preserve your Flash web site version so it's automatically displayed if a visitor's device supports it, and display the new mobile friendly version, if not. A link can also be added to the site so visitors can manually choose to switch between these versions themselves.