//
you're reading...
IT Stuff

960 Grid System – PSD to HTML Solution

To web developers, perhaps 960 gs framework is nothing new in their world. The demands of gorgeous website interface with stunning graphical design are sky-rocketing, moreover with web 2.0 and HTML5 trend.

The initiate design process is expected as eye catching as possible. Relatively, those demands still felt a little bit tedious job even with widely used WYSIWYG tools. On the other hand, graphic designers (whom working side-by-side with web developer during web development) has built deep relationship with several well-known image processing software like Photoshop or Gimp and by default desiring their web interface output product is perfectly the same as what they have drafted in the image processing software.

The aforementioned demand then created a new market in web design service. Try google up PSD to HTML service and you will find several websites that offer such service, of course with price which seldom affordable for mid-low level web designers. With such service, the business owner could easily hire a graphic designer for designing a web interface, and after long and painful period of revision-improvisation, he could then transform that design into accessible web page using the aforementioned third-party service. The cost involved here is debatable as in which one is better; hiring a graphic designer and a web developer or just hire one graphic designer then use the paid-service (you could contact me for a better solution; hire me as both graphic designer and web developer with relatively cheaper price. See my portfolio in http://projects.encinia.com oh, and by the way, sorry for the commercial break :D ).

Challenge arises for mid-low level business users and/or web developers who could not afford such service. The challenge can be easily overcome with two ways. First, and the most common way, is by manipulating CSS. At this point the web developer is required to put back the pieces that have been designed in Photoshop using CSS. The usually met challenge is the cross-browser compatibility. By default, using this way requires sufficient HTML – CSS skills.
The next way is using 960 Grid System (960gs) CSS framework. This framework helps developers in designing (for simplicity let’s assume that they are all using Photoshop) PSD based design for a web interface then transform it into exactly (really close to) similar web page with less painful way.

This process is relatively way much easier than the previous one. Developers first off will choose how much column they want to use for the interface layout. There are several available options, 12, 16, and 24. Personally the writer likes 12 columns better. Those columns later on will be the guide for developers to put their pieces of design so that when implementing the CSS tag, the location will be just like what we have designed before.

After having the design beautifully placed, we can then slice it up item by item so that we can later on call it again with CSS div tags.

Before using this framework you need to download it here. There are a lot of websites that already using this framework. You could also find step-by-step tutorial in UGC (User-Generated Content) website like youtube.

Advertisement

About galihpermadi

rain-lover

Discussion

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.