Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

7 tools to build websites using responsive design

Nathan Segal | March 26, 2013
These seven tools will help you build a fully functional site for phone, tablet and traditional desktop devices.

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.

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.

 

Previous Page  1  2  3  4  Next Page 

Sign up for MIS Asia eNewsletters.