UX Magazine

Defining and Informing the Complex Field of User Experience (UX)

Make PSD to HTML Conversion Mobile-Ready with These Frameworks

May 13, 2013
Mike Swan

What’s the synonym of web design?

 

Responsive!

True! In the au courant era of mobile browsing, responsiveness has become synonymous to web design. It is no more a feature which designers are running after; it is an integral part of their design settings now. This has prompted designers as well as developers to use responsive tools and frameworks, even while performing basic actions like PSD to HTML conversion. There are innumerable mobile-ready frameworks available in the marketplace which facilitates the conversion of PSD into HTML. Some of them are listed below. Have a look.

1. Responsive Grid System (http://responsive.gs/): This is a simple yet functional CSS framework which facilitates easy and quick development of responsive sites. Designed keeping in mid the ‘mobile-first’ approach, this framework comes in three versions- 12 columns, 16 columns and 24 columns grid. Some enticing features incorporated in Responsive Grid System are border-box, which lets developers render additional padding to elements, and clear-fix, which facilitates box-sizing and clearing floats. With all this and a lot more to offer, this light-weight framework is merely 1 KB is size when compressed. Responsive.gs makes responsiveness seem easier than ever before.

2. Titan Framework (http://titanthemes.com/titan-framework-a-css-framework-for-responsive-we...): If you are looking for frameworks which adapts well with every given screen and lets you create layouts which are responsive and can adjust on any screen resolution set to maximum width, then Titan Framework is the choicest option. It lets you develop a responsive design in a matter of few minutes. Titan is available in two versions, 16 and 12 columns and its file structure includes the following:

  • text.css: This style sheet caters to basic headings, font style and spacing.

  • reset.css: This Reset style sheet reduces the inconsistencies faced while working with web browsers.

  • 12.css: As the name suggests, this style sheet incorporates styles which are required for a 12 column grid.

  • 16.css: This style sheet includes styles for 16 column grid.

3. Gumby (http://gumbyframework.com/): The team behind Gumby aimed at making it the most stable framework which users have ever come across. But, at the same time they ensured that the ease-of-use and familiarity of the grid system remain intact. The latest version of the framework, Gumby 2, is built on Sass- a powerful CSS preprocessor which gives Gumby 2 the gift of its speed. Some other features included in this mobile-ready framework are Forms, Grids, Buttons, Entypo Icons, Enhanced Navigation, Toggle & Switches, Labels, Drawers, Improved Tabs, PSD and HTML templates and Dropdowns. All these features let developers customize easily and quickly on this framework.

4. Ingrid (http://piira.se/projects/ingrid/): If you are fed up of the reflow process for responsive layouts, then its time you start using Ingrid. This fluid and light-weight CSS framework has been devised to reflow for responsive sites more fun and less obtrusive. It aims at reducing the use of classes in the individual units, thus simplifying the entire process. The best part is- this framework is extendable, which means you can easily customize it as per your requisites. With Ingrid, you have the freedom of being creative!

Are you clients bugging you for responsiveness? Try the aforementioned frameworks and aim for satisfied clients and better PSD to HTML conversion services. Get ready to be mobile-ready!

Add new comment

Comments

I think you forgot to mention Boostrap and Foundation.