7 Tools to Build Websites Using Responsive Design

As consumers access websites from a growing variety of devices, responsive Web design becomes increasingly important. Responsive web design is about building a Web presence that scales and functions well on desktop, tablet and mobile devices. The viewing size of each device is different, which creates challenges for Web designers, not only because of the designs themselves but also due to the need to manage website components as they scale from one device to another.

One example is how to display images. What looks good on a desktop probably won't work on a mobile device, so Web developers must consider issues such as proportions, text, image sizes and compression. Another factor is how various components of a Web page will be organized on a smaller screen with different dimensions.

Tips: How to Build an Online Business From Scratch

To help you address these and other responsive Web design challenges, here are several tools and online services that will help you meet your objectives.

Adobe Dreamweaver

Adobe Dreamweaver CS6 has the capability to build fluid layouts. This lets you create three layouts-for the Web, tablets and mobile devices-all at the same time. Add Media Queries to these fluid layouts and you can easily control the appearance of your pages. Media queries let designers target different styles to different devices; one example would be a group of styles that only take effect when the screen size is larger than 800 pixels.

Dreamweaver lets you build both mobile apps and websites. The chief difference is that some mobile sites can be designed to display on all mobile devices. In contrast, mobile apps can offer more functionality, but they have to be custom built one each device. This can quickly get expensive. You can learn more about the differences and costs involved with each approach from the New Media Campaigns blog.

Recent Dreamweaver updates include enhancements to Fluid Grid layouts and Web font integration.

[Related: 6 Ways to Add Social Media to Your Web Design]

All Fluid Grid elements have been placed within the Structure category under the Insert menu. New options include Ordered, Unordered and List. Options for DIV elements such as duplicate, lock and swap now appear when you select an element. You can nest fluid elements as well. Fluid Grid elements will work with Web apps as well as mobile sites.

[Related: How and When to Build a Mobile Website

In addition, it's now possible to add from the library of Adobe Edge Web Fonts in your layouts. When you do, a script tag is added. This tag references a JavaScript file that downloads the font from the Creative Cloud server, where it's stored in the browser's cache. Edge Web Fonts are powered by Typekit by Adobe, so they can be integrated with Adobe Edge tools.

Adobe offers several pricing models based on its Creative Cloud package. This offers a range of software components for businesses that begins at $19.95 per month.

Adobe Edge Reflow Preview

Edge Reflow, in development by Adobe, uses a grid (or box) system that scales with your design.

Edge Reflow lets you build either a desktop or mobile site first. It also contains a toggle so you can easily switch between layouts, if necessary. Depending on whether you create pixel-based or percentage-based boxes, these elements will either scale with the layout or remain at a fixed size.

Let's say you have several horizontal boxes on the screen, each at a fixed size. As you decrease the width of the workspace, the box on the right will begin to move to the edge of the layout. If you keep reducing the width, the box will eventually drop below the box on the left. This is a time-saving feature when scaling a design.

Edge Reflow gives designers a way to test their ideas visually. The Edge Reflow interface makes it simple to toggle back and forth between the mobile and desktop layouts, so it's easy for a designer to see what's happening. Once the designer has a layout she likes, she can extract the CSS for further development.

Edge Reflow is part of the Adobe Cloud membership, which is free.

TopStyle 5

TopStyle 5 Pro is an HTML5 and CSS3 editor for Windows with several useful features, including gradient and text shadow creating tools and a framework for building websites and apps for Apple devices.

Because the CSS3 specification hasn't been finalized, you need to use CSS vendor prefixes to make sure there aren't any conflicts among browsers. It can be difficult to remember what settings to use, but Prefixr takes care of that for you by adding vendor prefixes to your code.

[Related: 12 Ways to (Not) Screw Up Your Website]

CSS3 also offers the capability to create gradients. However, this can be time-consuming when working with code. TopStyle has a created a tool that lets you quickly specify gradients for your layouts and edit those settings later.

Meanwhile, the Text Shadow Generator makes it easy to create text shadow effects without having to spend a lot of time editing code.

Finally, TopStyle 5 includes iWebKit 5, a framework designed to help you create your own iPhone, iPod Touch and iPad compatible website or Web application.

TopStyle 5 is available as a single user download for $79.95. Existing Topstyle 4 users can upgrade for $29.95.

WinkSite

WinkSite is a free mobile service that helps you monetize your site with Google AdSense and determine the best place to put ads. You can also create in-house ads for your sponsors. Winksite is free for up to five sites.

Winksite users can build a community and invite others to join. You can also create an ezine or guestbook and post surveys. You also have the capability to create custom ads from various sponsors, choose the pages they appear on and determine the frequency and placement of display. Supported file types include YouTube, DailyMotion, MetaCafe, Blip.TV video and FLV files.

Volusion

Volusion is an all-in-one ecommerce tool that lets you build a shopping cart and add it to your website. It will display on desktop, tablet and mobile versions of your site.

Volusion is an all-in-one shopping cart system with a Website integrated into the layout. If you were to use a different approach, you would have to first build your website and then obtain, customize and add a shopping cart to your site after the fact. You can also list thousands of products on both the desktop and mobile versions of your site.

Related: 6 Easy Ecommerce Shopping Carts for Small Business Websites

Volusion offers a free trial to get you up to speed, but you should know that the free trial goes only so far. If you want to test out the mobile aspect of the service, then you'll need to pay. When you sign up for an account, you can choose to build a site yourself or work with a sales representative on the design process. It's also worth noting that the service is proprietary-it runs on Volusion servers only and can't be used with your own hosting.

[ Related: Beyond Templates: Building a Better Business Website]

Volusion pricing models range from $15 per month to $195 per month; enterprise pricing is available as well. Factors in determining price include data transfer, number of products used, bandwidth, social media integration and rating services.

GoMobi

The GoMobi content management system lets you build mobile websites that can be viewed on more than 6,000 mobile devices. You can also add code to the desktop version of your site so that a user on a mobile device who visits the desktop site is seamlessly redirected to the mobile interface.

GoMobi offers an easy-to-use interface with the complex programming happening behind the scenes. For example, to add your GPS coordinates, just enter the address, add that section to the mobile site and save your changes; the GPS feature appears automatically on the mobile interface and is ready to use. For designers who want more options, the interface can be customized through the use of templates. In addition, you can add custom CSS, HTML and JavaScript programming by linking those pages to the GoMobi interface. You can upload your own icons as well.

Tips: How to Build a Hybrid Mobile Site With GoMobi

While GoMobi offers a numerous display options, it doesn't support tables or JavaScript. One way around this is to use Dreamweaver to create custom mobile pages that plug into the GoMobi interface; this way, you can use JavaScript, tables and custom CSS in your mobile website. You can also host these custom pages wherever you want; this is worth knowing because GoMobi, like Volution, is proprietary and runs only on GoMobi servers.

[Related: Beyond Templates: Building a Better Business Website]

To sign up for GoMobi, you must go through a reseller such as HostPapa. This option is inexpensive- $5.95 per month with HostPapa-but it also means you don't have full access to the interface. If you want to have full control over the domains, registration and the GoMobi sites, you need to become a reseller yourself. The fee for this will vary depending on the hosting provider, but it will give you full access to the GoMobi Site Builder, the option to regulate users on the interface and the ability to charge a hosting fee to your clients.

Mofuse

With Mofuse you can build a mobile version of your website yourself, hire Mofuse to do it or become a reseller of its services.

The look and feel of Mofuse resembles GoMobi and therefore makes it easy to understand and build a mobile site. Depending on the needs of your business, this could take as little as 20 minutes. Enter some basic information, launch a default template and start to build with it.

The next step is the Mobile Site Menu. Here you add elements to the site, then edit the order of appearance, the look and feel, CSS attributes, colors, monetization, analytics, social media integration and more.

As with other mobile programs, you can create code after the fact and insert it into the desktop site. If someone comes to your desktop site from a mobile device, the code detects that and seamlessly redirects the user to the mobile interface.

Mofuse offers a free 14-day trial. Its price points vary depending on the number of monthly views and the building blocks you need. (These range from RSS feeds to weather widgets.) The JumpStart package, for examples, offers 10 elements, allows for 1,500 views and costs $7.95 per month. In contrast, the Ultimate package gives you unlimited elements, covers 1,500,000 views and costs $199.00 per month. However, the Ultimate package, as well as the $89-a-month Small Business package, lets you edit CSS.

You can also choose to become a reseller of the Mofuse services. Unlike GoMobi, though, there are no setup fees, nor is there a contract.

Nathan Segal has been working as a freelance writer, photographer and artist for 14 years. He is based in British Columbia, Canada. Reach him via email or visit his website. Follow everything from CIO.com on Twitter @CIOonline, Facebook, Google + and LinkedIn.

Read more about developer in CIO's Developer Drilldown.