Graphics From Code

Leverage Modern Web Techniques to Save Time Building Your Site

Photoshop. A necessary tool in anyone’s arsenal trying to accomplish design. With the web, it is a wonderful way to knock out a dressy vision of the way your site should be structured. People like that. It is easy to imagine how things will work when a visitor lands on your site. But with the advancement of CSS into CSS3 and jQuery becoming so strong, often times the need for Photoshop ends after the design is approved.

MYTH: I have to be a Photoshop master to make good looking web sites.

While I do not fully ascribe to building and designing straight in the code, the use of actual graphics is becoming less of an issue. Yes, there are times and instances of needing to manipulate something in an image program. Photoshop will always be a good skill to have. But by and large, much of what takes place on a site can be created in code. This also keeps it easier to maintain as you can tweak your code from your mobile if you needed to.

Page Elements from Scratch

You can use CSS3 to create lovely elements on screen without having to drop back into an image editor. Everything from gradients to rounded corners are now possible. They do require some working through as not all browsers use the same code, but it is still possible. Before it was jumping from your editor to export to ftp to preview. Now it is just edit refresh. Much more efficient.

Iconic Additions

There are now libraries of icons to use within your site. These are code generated and behave like any HTML element. What this means is you can drop in your social media buttons and have them be as accessible to manipulation as a block of HTML text. Change their color or size on the fly. Add that rollover state if you want. No need to jump out of the code for resizing or brand color changes. Everything now can be handled in your CSS!

You Do Talk Fancy

Online fonts are a huge addition to the current web space. In the past, anything outside the limited font-space was hard to implement. There was a Flash solution, but even that was spotty and definitely did not translate to mobile. Graphics provided all the font you could want, but it was not searchable and often times simply does not scale well. Today, you can access hundreds of fonts to give that unique touch to your content.

ROOKIE MISTAKE: Forgetting that your lovely sized background might not work well across devices.

The big bonus to these technologies is they are responsive. You can implement them on your site and they handle gracefully across devices. You do not have to worry about resize or legibility issues, which gives your site freedom to express itself where ever your audience might be.

If you are not already looking into these ideas, now is a good time to start. They are not too hard to put in play and the benefits are massive. The time they can save you during development or updating does add up. Granted, there will always be a time where you need to get into an image editor. But if you can save that for only the times you are fiddling with a photograph and not re-rounding a text box corner, your speed and efficiency will benefit.

For a few more suggestions on what you might want to consider, check out this article from Ionut Bondoc.

What do you think? Let us know what libraries and techniques you are implementing to get away from using so many images on your site.

IMAGE: ionutbondoc