Graphics to HTML & CSS
It's what Delia does...
For many years I have specialized in graphics to css. Why is that a secret? Simply, because I work as a subcontractor on most of those jobs. I'm not allowed to post links to those sites or show the images. I'm a silent partner!
What I do is take the psd or png file from the graphic designer and create the xhtml/html and css for the website. Most of the time I also integrate that design into an existing website and/or code such as open source scripts like Zen Cart, WordPress, Joomla, etc., but I also work with proprietary software as well.
I'm accustomed to reproducing that design to pixel perfect detail and, depending on your wants, make that design cross-browser compliant (though sometimes cross-browser cannot mean pixel perfect in all browsers).
This is my primary speciality and my passion!
The Technical Details
Following the KISS rule, I do try to produce straightforward CSS without going to complicated lengths to make it work. Because I always strive for cross-browser compliant design, I use mainly CSS1 with some CSS2 elements. I do not use CSS3 except on request and that is assumed not to be cross-browser compliant.
I use as few images as possible - relying on CSS to give the look desired but I may ask to deviate from the original graphics where I think the effect is not so necessary and will require intensive graphic work to make it happen (and therefore increase the cost).
Unfortunately, most of the designs I get are graphic intensive and can really increase the load time for the website. I do the best I can with what I'm given! Since I rarely get to talk directly to the customer, I don't get to do that discussion with them. I'm including some recommendations here to address those issues
Graphic Design Recommendations
- Use standard fonts such as Arial, Helvetica, Times, or Times New Roman. Verdana is acceptable as well most of the time. Anything else might not be duplicable on the web. I sometimes can add css parameters to increase the likeness but I cannot guarantee matching other fonts. Fonts are dependent on your or your visitor's computer and what fonts are installed on those computers.. If you are on a Mac, the PC font may be very different than you expect. Cross browser compliant websites require a limited use of fonts because the same font on a PC does not normally have the same spacing or size on a Mac - very hard to work with.
- Keep the shadow effects low. This is the hardest part of design to render on the web and doesn't add enough to the design to make the extra effort / cost worth it. The only way that shadow can be replicated is through images; shadows frequently surround images and cannot be make transparent.
- Remember that in reality, web design is all about squares and rectangles. In order to get that offset look sometimes the only thing that can be done is to use a very large background image. Bad practice. See the image below. Note the red lines and how they cross through elements. The interior pages had a graphic instead of the flash and the logo was supposed to be a link to the home page. I had to resort to enormous backgrounds for each section and sometimes each page depending on that main graphic. It may look good but it was the devil to implement and required large images (that they wanted to be crisp in detail!)
- If you do the design at 300dpi resolution and then show that resolution to your customer, they probably won't be happy with the online images. The max resolution online is 72dpi. Those images cannot be as crisp and pretty as what the customer thinks they are supposed to get.
- Don't use tiny fonts: consider all your users. The over 40 crowd needs larger fonts!
- Last but not least, knowing the limitations and the features of the program the design will be integrated with is paramount. Just because you can conceive of it, does not mean it's possible. On the other, it's not uncommon for designers to leave out details that may be default with the program. Ecommerce with Zen Cart is a very good example of that. Leaving out those details can either mean a surprise for a customer or leaves out recommended features the customer should be using on their website.
You can also read my blog post on ten rules for webdesign.
Contact us to get started on your project!