Home / Blog / Technical / Design in browser, a sneak peak into my development process.

Design in browser, a sneak peak into my development process.

25.09.2013

You may be wondering why I have an article that contains mostly latin text (see below). I normally remove this content before launching a website but I thought I’d leave it here to explain a very brief part of my development process.

Website development.

WordPress is the most commonly used online publishing platform on the planet. WordPress is becoming a more and more sophisticated tool and, with more complex demands, developers are bringing some of the most up-to-date development techniques to WordPress sites.

When developing a website with WordPress I always fill one page with the basic elements that may be required by the end user when writing an article. This is to design and style each of them, something I do ‘in browser’ as various browsers will render these elements differently. I begin with a rough draft of how elements may look in Fireworks or Photoshop, but quickly move into HTML5 and CSS3 to finalise the look and feel. By working this way, there are no surprises for the end-user when publishing the article.

Design in browser.

Designing directly in the browser is an integral part of my workflow when developing a website. The above example uses cross-browser variation as the reason to use this technique, but there’s a lot more to it that that.

As I discuss in another article, some agencies still opt for what I believe to be an outdated workflow. Essentially, visuals are produced and signed off before development moves into the browser. But visuals are static, there’s no way to know that a layout produced in Photoshop is going to translate into a good end-user experience. A heavily debated solution is to begin developing in the browser at an earlier stage. This allows for the layout, interaction and user journey to be tested before resolving the finer details of the design. Time is saved on creating visuals and this process generates a more effective end product.

Side note: “design in browser”

There’s a lot more that can and should be discussed on this subject, but that’s for another article. I wanted to demonstrate a small part of my workflow that helps me finalise some of the details of a design.

Chris Thelwell has written a very good article on design-in-browser which resonates with me. Chris also talks about adapting the design process, something that I firmly believe needs to happen.

Below are the typographic elements I style in browser to tie in with the overall look and feel of a design.

I’ll build and broaden your brand; design and develop your website; compile campaigns in print and online. You’ll get a strong, consistent end product and see a return on your investment.
Working in the creative industry since 2000, I’ve seen business models change entirely. I’ve helped companies shift from predominantly paper-based marketing strategies to fully integrated customer engagement, both online and in print.