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.
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 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.
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
Adobe Edge Reflow Preview
Edge Reflow, in development by Adobe, uses a grid (or box) system that scales with your design.
When you reduce the size of your layout, the interface can adjust the positioning of site element and the boxes of the design can move one below the other as the layout changes.
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 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 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 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.
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.
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.
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.
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 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.
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 Mofuse interface allows you to quickly enter information into the CMS that you can then add to the interface, making it easy for a designer to quickly build a mobile site.
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.