Advertisement
Articles

Designing In-Browser: A Manifesto

by

These are exciting times to be a web designer. CSS is finally starting to catch up to the visions of the beautiful websites we have in our heads. No longer do we have to rely on hacks and images to create wonderfully engaging interfaces! But we can’t just rely on browsers to usher in this new era. As creators we have to be flexible and adapt our workflow to encourage these new best practicees. It’s time to rethink how we make websites.

What I will be discussing today is not new or groundbreaking, but rather an extension of what you already may have suspected deep in the back of your mind for quite some time now. This article is going to serve as a counter-point to a lot of the other articles on this website that focus on Photoshop and Fireworks, but they are just the opinions of a single designer, so you can take them or leave them.


Meet Your New Design Tool

The new canvas
Our new blank canvas.

Rethinking Web Design Workflow


The new streamlined workflow.

If you’re anything like me, when you start a new website, you break out the sketchbook and start scribbling down ideas. You then open up Photoshop (or Fireworks) and hammer out the design. Code doesn’t even factor into it until the very last stage.

This is a fundamentally flawed idea, for many reasons. For one, a website is not an image. A finished website is a flexible, moving thing, built with HTML or CSS. Photoshop gives us (and our clients) unrealistic expectations for how a website will look and behave. You should be thinking about how the design will translate into code all the way through the design process.

Secondly, the whole concept of one “finished” design for a website is wrong. Building a Photoshop mockup and then saying “all right, now on to the code” gives a permanent feel to a web design, as if you were proofing a print before sending it off. One of the huge advantages of the internet is that it is ever-changing. Stamping a mockup as done says that this is the final version of the design that will exist. As designers, we should embrace the ever-changing nature of our medium and recognize that a design is never actually finished.

The advantage of designing with code is that you are forced to think about the content and the styles as two different things. The content will lead the design, rather than the other way around.

The Tools

Obviously, you’ll need a browser. In fact, you should really have a few of browsers for testing. (Aside: I recommend Wine for IE testing on the Mac). At the very least you should have a Webkit-based browser like Safari or Chrome, as well as a Gecko-powered one like Firefox. If you’ve done any sort of web design before, you’ll doubtlessly have this area covered.

The tools

The web designer’s pyramid.

You should also have a decent code editor as well. Preferably something with a live-update feature like Espresso or Coda. I personally am a huge fan of TextMate, although it does not have a live-update mode. Again, as a web guy/gal you probably already have a favorite, but I might as well mention it for any newcomers.

Sketching

Sketching is arguably the most important part of the design process. That shouldn’t change even if you design inside the browser.

You should still have a solid idea of what the design should look like before starting on the computer. At the end of the day, this is still design, and you should still use a sketchbook. I won’t go into detail about this part of the process, seeing as you, as a designer, should already be familiar with it. Just know that the same rules apply. You wouldn’t open Photoshop with no idea how your site will look, that would be crazy!

Actually, it doesn’t have to be sketching. Just do what works for you to create the concept. Whatever that may be, the important thing to consider is getting a solid idea in your mind before starting on the computer.

A designer's best friend

Image credit: Sean McGrath.

Layout

Layout is without a doubt the most important part of this process. You could have the most beautifully selected fonts, perfect colors, and delicious little details, but without a solid layout, the whole design will fall flat. Fortunately, building a solid, float-based layout with CSS is one of the easiest things you can do as a web designer. A List Apart has a Great Article on the subject that I highly recommend for the technical details of building a CSS-based layout.

If there’s one thing you should already know before going into your code editor, it’s the layout of your design. If you have a specific layout in mind, it’s a simple matter to code it up. However, if you go in without a layout in mind, I think you’ll be disappointed at the results. Layout isn’t a thing you can just experiment and switch out on the fly, it’s a matter that requires careful consideration on the designer’s part.

Even if you don’t know exactly where every element is going to live on the page, you should at least have a general idea of placement of main elements, as well as the proportions between those elements.

One of the great things about this new movement of “Responsive Web Design” is how it encourages designers to think in proportions, rather than pixels. For instance, you could say that this element needs to be 30% of the main container, as opposed to 200px or a similar measurement. This especially comes in handy for in-browser web design when one has to structure a page. You could start off with a main container element that is, say, 70% of the browser window, and then design the rest of the page inside that container in proportion to that element’s width. No more messing about with exact pixel measurements and that stupid Ruler Tool in Photoshop!

Type

Typography

Image credit: Jennifer Chong.

At this point, you should all have at least heard of @font-face, even if you haven’t used it in a project yet. For all, i don’t know, one of you that hasn’t heard of it, here’s the one sentence version. @font-face is a way of embedding and using any typeface for use on a website, even if it is not installed on your users’ computers.

This simple idea has brought a whole new era of web typography in a matter of a few years. Entire businesses like Typekit and Fontdeck have cropped up for the sole purpose of serving up beautiful typefaces for your website. In the past we’ve been forced to rely on hacky methods like Cufon or just regular images to display our type how we want it, but all that is changing. Type foundry’s have largely embraced the new format, modifying their licenses to allow embedding, or even allowing their fonts to be hosted by Typekit.

So this is great, but what does it have to do with designing in-browser? Well, my good sir, I’ll tell you.

It’s a lot easier to manage typefaces when they are managed by CSS rules, not Photoshop...

Mucking about in Photoshop to change every single bit of text to a selected typeface becomes a little ridiculous after a while. In code, you can preview changes and test out different typefaces, weights, and sizes just by changing a few lines of text. This allows you to iterate your designs more quickly, and let’s you adapt a design for client requests with a few simple keystrokes.

All that power gets a little bit ridiculous when you consider that we now have an infinite number of typefaces to work with. As long as the foundries keep doing their thing, and Typekit keeps doing theirs, designers will never lack an appropriate font.

I highly recommend using Typekit, as many more fonts are available there than with a standard @font-face license. You can always manage the code yourself, but dealing with licences and having to purchase each font individually gets pretty ridiculous pretty fast. This is the option I’ve chosen on a few projects, and while it’s still infinitely better than what we had before, the experience wasn’t the best.

When it comes to chosing fonts, have fun with it! Experiment, try something crazy. If you’ll excuse the blatant self-promotion, I’d like to point you towards another article of mine.

Color

In a “traditional” web design process, often the designer starts by constructing a grayscale mockup of their design in Photoshop, before adding the colors and details needed to make the design pop. This process is integral to the layout and overall feel of the design. Even if you don’t use black and white, constructing your design in sets of boxes and simple shapes really lets you see how your design will work from a higher perspective. The building of a design using simple boxes is really easily converted to our in-browser workflow. Just use <div>’s with basic CSS applied to them!

Once you have your layout and typography marked up and styled properly, introducing color becomes a trivial matter with a few lines of code. This isn’t to say that choosing the colors is an easy and simple technique (although there is a great article for that too), just that coloring the objects on a technical level is very simple. Even displaying beautiful gradients is easy with CSS3.

When I’m coding in color to a design, I often have Photoshop open (gasp!) to choose the colors. I’m sure there’s some great tools available online that provide a color picker for generating hex codes and rgb values, but for whatever reason I still use Photoshop’s. This is out of convenience, because usually I already have Photoshop open, but I’ll get to that later.

As with typography, the best color schemes come from experimentation, so have fun! Here you can see the power of an in-browser design process when you can change the backgrounds and text-colors of many elements on your page with a few keystrokes. With a Photoshop mockup, changing the colors of multiple elements was an arduous task, involving precisely selecting layers and clicking through far too many buttons a windows, but no more!


Details: Know When to Use Photoshop

Remember how I said that I usually have Photoshop open when coding a website? Well it’s time to break something to you, young padawan. Very few sites can be developed with no use of Photoshop. I mean think about it, even if you use an entirely browser-based workflow, there’ll still be at least one or two custom images on there somewhere, say, a background or an icon of some sort. Unless you know of a way of making images without an image editor like Photoshop, you, or someone else will have to bring up Photoshop or similar software to make those textures, icons, and what have you.

Photoshop isn’t all bad. My main argument in this post has beeen that it isn’t at all good for designing websites, but as an icon designing tool, it’s actually kind of great (if you ignore how maddeningly often it crashes, which I try to). In any case, at some point during the creation of a web design, you’ll no doubt have to generate some sort of custom graphics. I have no problems with PS being used for simple things like a repeating background, texture, or icon that will ultimately be part of a larger web design.

Likewise, Fireworks isn't bad either. In fact, Fireworks has lots of great features (like batch processing and advanced "save for web" tools that actually make it the perfect companion for the in-browser workflow... you've just gotta know when to use it.


Caveats

We’ve come a long way in this article, but before I finish up, there are a few caveats about this process that I’d like to mention.

Client Pushback: Some clients may not like you using this technique. They might be dead set on seeing a Photoshop mockup before you do any code work. If this is the case, then you should accommodate them. You can still use a lot of the tips I’ve given here, such as trying different typefaces with Typekit or another @font-face service, or quickly iterating a design with colors. The important part of this post is recognizing that even if you mockup with an image editor, the design should still be open to change and improvement.

Old Browser Blindspots: There are still are a lot of things that you cannot do in browser, and a lot of things that aren’t supported by older browsers. If full IE7 compatibility is a client requirement, then you shouldn’t use CSS gradients, and instead use images. There are ways of providing fallbacks, but sometimes a client will demand full support. That said, you should always be looking for ways to delegate design responsibility to CSS and to cut down of excessive image use. It produces cleaner and more maintainable markup and resources.

Be Comfortable! My third and most important caveat: you may not be comfortable with this workflow, and that’s okay! As I said before, even if you’re not ready or not able to completely follow these ideas, the important thing is that you recognize and at least try to consider some of the concepts, such as rapid iteration or focusing on layout first.


Conclusion

It’s that time again. Time to wrap up and really assess what you’ve learned today, which hopefully isn’t nothing. I’ve covered a lot of stuff, and with any luck, at least some of it has stuck in your brain. I’m not expecting you to all go and completely change your workflows, I just want you all to consider that there is another way to do things. It’s sometimes hard to realize that there are other ways of designing aside from the way that you do things now, but as a designer, it’s important that you are exposed to different schools of thought.

I firmly believe that this process is the future of web design, and I, for one, welcome it!

Related Posts
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Computer Skills
    Productivity
    Why a Finder Replacement is Still a Good IdeaFinder2x
    Until OS X Mavericks, a replacement Finder application was a must for most power users. Basic features like tabs were missing from OS X’s default application, so to get an improved Finder experience you had to turn to third parties. With Mavericks, however, Apple has finally brought tabs to Finder. In this tutorial I’ll show you what replacement Finder applications are out there, what they can still add to your workflow and why they're still worth getting.Read More…
  • Computer Skills
    Hardware
    How to Check and Enable TRIM on a Mac SSDTrim preview retina
    You probably know that solid state drives (SSD) differ from Hard Disk Drives (HDD) in how they store information, and you may have heard that something called TRIM can maintain their performance. In this tutorial, I’ll not only show you how you can enable TRIM support for your SSDs, but also understand what the term means and how it fits into the functionality of solid state storage.Read More…
  • Computer Skills
    App Training
    Quick Tip: Customize the TerminalCustomizeterminal preview retina
    It’s safe to say that many Mac users will only rarely be seeing the Terminal. In our age of gorgeous UI, or User Interface, design and there’s an app for that, the need to do things the old fashioned way is diminishing. Nevertheless, when you do find yourself at the command line, you can make it look less intimidating or more like it does in the movies. In this tutorial I'll show you how you can use Terminal’s deep customization tools to spruce up the look of the app to suit your preferences. Read More…
  • Computer Skills
    App Training
    Alfred Workflows for BeginnersAlfred400
    Ever since Alfred 2.0 was in beta, I have been making Alfred workflows for myself and for others. It is a lot of fun and very helpful to my daily workflow. I usually average using Alfred around 130 times a day, with my peak day of 768 times. I am going to show you the basic concepts of workflow design in this tutorial, all the way to the very advanced features that you can use in your own workflows in later tutorials. So, come join the fun!Read More…
  • Code
    Tools & Tips
    Using BrowserStack for Cross-Browser TestingBrowserstack retina preview
    Browser testing is the bane of our existence. Well, that's a bit of an exaggeration, but not by much. Multiple browser versions and browser fragmentation can make it difficult to get good test coverage for your sites especially when you factor in the different operating systems developers use to build with. Over the years, we've relied on a variety of tools to help us with this challenge including virtual machines, tools that simulate browsers and even having multiple devices on hand to work with. It'd be great if there were a way to have one viewport that allowed us to easily test across any major browser and their individual versions without jumping through hoops. BrowserStack.com aims to offer this via it's browser-based virtualization service and in this article we'll cover the service and how it helps tackle the cross-browser testing problem.Read More…