Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Tips for Designing in the Browser

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

It's often thought that designing in the browser is a modern approach to web design. In fact, before the advent of tools such as Photoshop, there was little other choice. Only in the last few years, since the dawn of responsive design, have designers gone back to their roots and started designing in the browser.


Introduction

I'm not saying that every website should begin life in the browser, but as websites now need to be more adaptable than ever, it seems to make more sense to take this route. Designing in Photoshop (or a similar application) can have benefits, which I'll look at later, but it can also have its drawbacks. Let's take a look at some of these.

  • Designs in Photoshop are fixed width. When designing in Photoshop you are designing using a fixed width canvas size. Although a fixed width Photoshop design might work as a desktop layout, it doesn't give any indication as to how it might look on other devices.
  • User experience can't be demonstrated. Photoshop might give a good indication to the aesthetics of a design, but it doesn't demonstrate transitions, states or any other interactions that a user might make.
  • Work gets repeated. By designing in Photoshop first and then coding it up afterwards, you are effectively repeating the work load and creating more work for yourself.
  • Can be time consuming. When working on amendments to a design, it can be rather time consuming to change something such as an anchor tag. For example if the anchor tag color needs changing, then you would have to go through every instance of it in Photoshop and change the color. Not as quick or easy as just changing one line of code in your CSS to have the same effect.
  • Not an exact representation of how the final design will look. A good example of this is fonts and the way that they render. In Photoshop they can appear quite different to how they are finally rendered in various browsers. As capable as Photoshop is, it is not the medium that websites are supposed to be viewed in. Therefore by viewing them in the medium that they are intended for (the browser) we are able to get an immediate representation of how they will actually look on a live site.

R.I.P. Static Design

A question that I get asked a lot by UI designers at work is "What's the maximum width that the design needs to be?". The answer that I used to always give to this questions was "Create the design at around 960px". Nowadays whenever I'm asked this, I tell them that there isn't a fixed width and that they should imagine that the design should work at any width.

With responsiveness being in such hot demand, it's important that when websites are being designed that this is taken into consideration from the beginning, not just brought in as an afterthought. When smart phones first came onto the scene many designers would create a fixed width design in Photoshop for desktop and then another one for smart phones (usually around the 960px width for desktop and 320px for mobile). Whilst this approach may have worked for a while, it's no longer plausible due to the vast array of device widths which access the web. The only way to get a true feel for how responsive websites will work, look and function is by designing them in the browser.


Sites Conceived in the Browser

CSS Tricks



Chris Coyier's CSS Tricks took a design-in-the-browser approach when he screencasted the entire redesign of the site.

Consistency will be big too. I hope to think in terms of reusable parts to keep things simple and consistent - Chris Coyier on the redesign of CSS-tricks

Microsoft



Microsoft's latest website utilizes responsiveness to the max and went through a stage of being designed in the browser.

Prioritizing Content and Layout

Whilst it may be true that visitors (in most cases) don't visit a website for its design, but instead visit it for its content, by designing in the browser we are able to focus on a website's content and build the design around that.

When designing in Photoshop it is often the case that the design is considered first and the content second. In some cases the content doesn't even get considered at all. How many times have you created a design in Photoshop and just filled the content with a load of Lorem Ipsum? We've all done it, however it does seem a strange approach to take when the content should be one of the highest considerations. Designing in the browser allows for this.


Plan Your Web Design Approach

When opting for this approach, before jumping straight into your favourite code editor it's important to have a strong idea of which elements and components your website is going to comprise. By doing this you will be able to make reusable components, using the same HTML markup and CSS. Any changes that you make can easily be altered by just changing a few lines of code.

One of the main reasons you might want to design in the browser is so that you can see how a responsive design might look in real time. Before setting out with this it might be a good idea to set out some predefined media query breakpoints and then everything in between those breakpoints should be fluid.



Be sure to plan your design approach before beginning any design. The wireframe above demonstrates at what breakpoints the layout will change on different devices.

Have a think about your site layout and adapt the best solution for its needs. For example, if you have a 4x4 photo grid system, plan at what breakpoint the 4x4 grid will become ineligible for smaller resolutions and change the grid to something more appropriate such as a 2x8 grid system.


Photoshop Can Still be Useful

Ok, so you might think Photoshop has taken quite a bit of a battering in this article, but Photoshop does still have its time to shine even when designing in the browser. There are times when CSS just won't cut the styling and for more decorative elements you will have to resort back to Photoshop. You should use Photoshop alongside your code editor.

Websites like the one above would prove difficult to design in the browser as it has a heavily illustrated style. Designing in the browser would not be the best approach for sites like this.

It's not uncommon these days for UI designers to present a mood board of a websites design rather than an actual representation of it. These mood boards can include things such as

  • General color palette
  • Reusable components
  • Form and button styles
  • Textures
  • Typography
  • Decorative repeatable elements

By doing this, the design is still being well considered, but is not as restrictive as a traditional Photoshop mockup design.


Tools to Help You Get Started

If you haven't yet tried designing in the browser and you want to get stuck in, here are some useful tools that will assist you in opting for this approach.

Cloud9 IDE

There are many IDEs available, but here is one online, which takes designing in the browser to a whole new level. The advantages of using a cloud based IDE is that you are able to share files with colleagues or other people working on a project, all with great ease.

Style Tiles

Styles tiles can be described as

a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They let you create a brand identity for a website that can give it some style without being too restrictive to how the finished design should look. If you haven't used these before then you can find a great introduction to it here.

Live Reload

Live Reload automatically refreshes the browser page as soon as you save a HTML/CSS/javascript or any other file. This can save you time and removes the need to constantly press the F5 refresh button.

TypeCast

Type cast is great for designing typography in the browser. It allows you to quickly style type in the browser and check for readability and rendering as you work.

Adobe Edge Reflow

At the time of writing Adobe have a little tool in the pipeline that looks quite promising. It's called 'Edge Reflow' and it allows you to design simultaneously for all screen sizes without sacrificing quality or capability. It's penned as a really useful tool for designing responsive web sites as, unlike Photoshop, it doesn't utilize a fixed width canvas. There's no news as to when it is due to be released, but you can sign up to be notified of its release.


Don't Neglect the Design

Unfortunately there can be a negative side effect to designing in the browser. As web designers and developers we're always looking for ways to speed up our web design workflow. When designing in the browser we can become so caught up in the functionality, making sure that it works at every resolution that we can sometimes forget to give the design the love and attention that it deserves. We'll take shortcuts and try and make life easy for ourselves, all of which can contribute to neglect.

Don't just sit back and take the 'easy way out'. There've been many times when I've received a file for a design, given it one look and thought 'yikes, not much of this can be created in CSS, it's gonna be an image heavy site just for the layout'. We all know that images cause bloat and so try to use them as little as possible. Sometimes, though, this can be unavoidable for example when working on heavily designed branded content. It's the same with a lot of disciplines; you need to make a sensible compromise between form and function. Too much form and too little function will result in a poor website and vice-versa.


Conclusion

It's never been more important to be able to design fluid, responsive websites which adapt to various resolutions. The need for these requirements makes tools such as Photoshop less useful than they once were for web design.

As responsive design is here to stay, we may start to see some shift in how web sites are aesthetically designed and with this will come new tools and solutions to some of today's problems. Of course, if a website is more focussed on branding and design, then Photoshop will always be your number one tool to head to; some sites are more design led than content led.

As with all methods of designing websites it is best to establish from the outset the needs and requirements for that particular site and use the best approach for that case. It's not just about changing the tools or methods you use with this approach. It's about having a larger understanding of some of the considerations that need to go into designing a website for today's modern web. Once you have this understanding, it is then your call on how you approach the design of your next website.

Advertisement