Ditching Old Habits – Photoshop vs. CSS


In an age gone by, it was normal practice for web designers to fully draft their web concepts in Photoshop, arranging all of their elements within a single ‘.psd’ file. This included everything, from the navigation menu and page layout down to the footer.

All of the elements within the file would then, in most cases, by chopped up into separate images and inserted into tables in order to be rendered within a HTML document.

Out with the Old

Now, it is fair to say that anyone reading this would likely cringe at the thought of adopting this process in this day-and-age.

However, many examples of websites that have been produced using this process can still be seen today. When there are now so many new, innovative and better solutions available, why would web designers and developers continue to employ Photoshop at all?

And in with the New

Enter into the fray; Cascading Style Sheets (CSS).

CSS is a blessing to front-end web developers. It allows for greater control over presentation semantics through the medium of code. Originally designed by the World Wide Web Consortium (W3C) in 1996, the main function of CSS is to separate website content from website presentation. This includes the layout, style and basic control over elements contained within a documents markup.

Through the use of CSS and the separation of content and presentation, the accessibility, flexibility and complexity of a website can be greatly improved. Accessibility is improved through the application of device-identification (see; Responsive Design), flexibility is improved through greater control over page elements (using attributes and id/class selectors) and complexity is reduced by eliminating repetition (by allowing multiple pages to share the elements from a single style sheet).

This may all seem like basic knowledge – the fundamentals of website design – and that’s because it is. Yet still, many people persist in designing the layout and various elements of a website through the use of image editors such as Photoshop.

Adopting New Methods

A much better approach to updating the layout or style of a website isn’t to use Photoshop, re-cutting and re-uploading images and elements, but to use in-browser developer tools, such as Firebug.

Tools like this enable developers to change the appearance and layout of a website on-the-fly, all the while retaining current functionality and providing an in-browser, live representation of what the website in question would look like alongside the application of given CSS attributes.

Furthermore, in-browser developer tools allow web developers the opportunity to assess more than just the presentation of their website. Other features that can be assessed include things such as JavaScript functionality and network performance, giving developers a high-level overview of the major contributors to their website.

This is becoming increasingly important, as today most websites being developed are not just static websites; they are complex website applications that have far much more than just layout and presentation at their heart.

These are things that you just cannot do using older practices. Photoshop should only be used for its intended purpose; image processing. The presentation semantics of a website should be fulfilled and rendered through the use of CSS.

And, with the latest iteration of CSS – CSS3 – it has become easier to create a more interactive and immersive user experience with the inclusion of element transitions.

CrashFlash and Burn

A spectacular failure or fall from grace. Considered to have originated from losing an aerial dogfight.

Due to the development of element transitions in CSS3, and of the rapid adoption of HTML5, another technology that is fast becoming dormant is Flash.

Now seen as a cumbersome technology (when compared to those mentioned above), Flash has seen its user base decline over the past few years as people seek to adopt technologies that induce smaller development costs, largely due to the agility and transparency of new web-based standards.

Flash has never had the web at its core and, just like Photoshop, this is its largest downfall.

In Conclusion

There are still plenty of web agencies who adhere to old processes in some way or another. Websites and web applications built using out-of-date techniques are easy to identify, as they usually have an inferior user experience.

The moral of the story? Ditch the old. Embrace the new.

See Also: An Introduction to Responsive Design

Leave a Comment


TrackBack URL  |  RSS feed for comments on this post.