12 Killer Tips for Designing in the Browser

by on 8th January 2010 with 76 Comments

screenshot

How do you mockup a website?

The typical workflow starts in Photoshop and then transitions over to HTML and CSS to mimic the original PSD as best as possible. However, there is a growing trend in web design to scrap the Photoshop step in favor of creating the initial comp right in the browser with your favorite editor. I’m sure right about now your head is buzzing with reasons why this approach would limit your design, but there’s actually a lot more you can do right in the browser than you might think. This article will provide you with the tools and tricks you need to create brilliant, working mockups as your very first step in the design process.

The Argument

Meagan Fisher of 24ways.org makes a compelling argument for designing in the browser. While I don’t share her disdain for Photoshop (I love Photoshop more than any other piece of software on the planet), I do agree with some of her other points. Fisher argues that a static image doesn’t really give you the true feel of a website like a live page does and that designing in the browser forces you to focus on content organization before design which can help ensure better accessibility and appropriate hierarchy of information.

We’ll use Fisher’s article as a diving board for our tips on how to become a pro at creating fantastic in-browser mock ups that are nearly ready to go when (and if) the client gives you the green light.

Tip 1: Start Basic & Use a Grid

screenshot

As I stated above, throwing in and organizing all the content unstyled allows you to create a design that fits your content rather than vice versa. Using a grid-based framework can radically reduce development time and helps ensure your layout is rock solid.

Resources:
For more information on grid-based web design, check out our article on CSS frameworks.

Tip 2: Get a Good Editor

screenshot

If you’re coding sites by hand, a professional web editor is the cornerstone of your workflow. I personally use (and absolutely love) Espresso from MacRabbit. It has all the little features I want like snippets and auto-complete as well as the big features I need like being able to see live changes to a browser preview as I type code. You should shop around and find the application that suits your needs best. Here’s a quick list of editors to get you started:

Tip 3: Placing a Shadow on an Element

screenshot

Photoshop is no longer the only way to get a decent shadow on the web. Many (but not all) major browsers now support CSS3 and with that support comes several new features for creating advanced designs. One of the most useful features is box-shadow, which allows you to add shadows to certain items using only CSS. The format of box-shadow is box-shadow:5px 5px 20px #000000. These values allow you to adjust the width and length of the shadow as well as its blur radius and color.

Resources:
Check out CSS.flepstudio’s article on the box-shadow effect for more on how to use this feature.

Tip 4: Shadowing Text

screenshot

If you want to place a shadow on text, use the text-shadow function as demonstrated on this Kremalicious tutorial. The format for text-shadow is text-shadow: 1px 1px 1px #000. The first two values determine the offset of the shadow (x and y respectively), the third value determines the blur radius and the final value allows you to change the color of the shadow.

This function can be applied to create more than just shadows. The tutorial above will show you how to use text-shadow to create a letterpress effect, a glow effect, and even a fiery text effect.

Tip 5: Rounding Corners

screenshot

Rounded corners are another feature that has finally been adopted into modern CSS. You can accomplish CSS rounded corners in both Safari and Firefox using the border-radius function. Simply set the -moz-border-radius and/or -webkit-border-radius to a given value in pixels to adjust the roundness of the border on a given item.

Resources:
For more rounded corner tutorials than you can shake a stick at, check out CSS Juice’s roundup of 25 Rounded Corners Techniques with CSS.

Tip 6: Building a Color Scheme

screenshot

Photoshop provides a nice way to visualize and experiment with different colors, but there are also a plethora of free color scheme resources on the web. In my opinion, the best of these is Adobe Kuler. Kuler not only provides the best interface around for creating beautiful color schemes on the fly, it also gives you access to a huge library of pre-made, searchable color schemes. Want to give your website an autumn look? Just type in “fall” and you’ve got over 2,600 schemes to choose from. Kuler makes it super easy to create an amazing color scheme that you can drop right into your CSS (which in turn makes it simple to change and experiment with on the fly).

Resources:
For more neat color tools, check out our article on 25 Awesome Tools for Choosing a Website Color Scheme.

Tip 7: Text Gradients

screenshot

If you’re crafty, you can actually apply a gradient to live text in the browser. What strange voodoo is this you ask? Cruise over to WebDesignerWall to check out their tutorial on the subject. Essentially, you put a span around the text you want to apply the gradient to and then set the background of the span to a repeated PNG of the gradient. Of course, to make the PNG, you’ll have to use an image editor (yep, you knew you’d have to resort to good old Photoshop every now and then).

Tip 8: Using RGBA to Screen Colors

screenshot

CSS3 implements a new feature called RGBA (“A” meaning alpha). Using the “A” value, you can set the opacity of a fill. This handy feature not only allows you to easily create color schemes using a single color with different alpha values, but also allows you to actually create transparent items that reveal the artwork behind them similar to reducing the opacity of a layer in Photoshop.

Resources:
Check out Oncemade’s article on The Right Way to Declare RGBA Colors.

Tip 9: Know Your Web Fonts

screenshot

Don’t fall into the trap of using the same two fonts on every single site you design. Change things up by taking advantage of the full range of web safe fonts. Typetester is a great tool for doing just that. It lets you preview blocks of text in various fonts and settings (size, alignment, tracking, etc) right in your browser. The best part is that when you find the settings that you like, Typetester will export the CSS for you.

Tip 10: Get Even Better Fonts

screenshot

Creating text as an image in Photoshop gives you the freedom to use any font you wish without worrying about compatibility. Unfortunately, this method results in text that isn’t selectable or searchable. However, it’s not that difficult to get around this problem. These days, there are several solutions for installing custom fonts with live, selectable text on your site using the @font-face command.

Resources:
Get amazing fonts on your site in minutes with our step-by-step TypeKit tutorial.

Tip 11: Stock Art is Your Friend

screenshot

It is often the case, especially with initial mockups, that you need a quick button, icon or other graphic that you don’t necessarily want to build from scratch. Stock art sites like GraphicRiver are bursting with web elements that are ready to drop into a site, many with no Photoshop changes required! Even if you can easily build the items yourself in an hour, dropping a buck on a great piece of art and having it ready to go in 2-3 minutes is pretty enticing.

Tip 12: Use Browser Testing Tools

screenshot

I know so many of you simply can’t wait to write a scathing comment about how several of the techniques above (shadows, rounded corners, etc) only work in certain browsers and are therefore unusable. Which is exactly why I always seek to present both sides of an argument. The folks in favor of developing in the browser present these techniques as evidence that you can accomplish a lot outside of Photoshop but are perhaps a little too eager to dismiss the fact that several browsers will receive a drastically different experience due to lack of support.

The point is, no matter how you go about developing a website, you should always know exactly how major browsers will render your site. Then you can make an informed decision about which browsers, if any, are acceptable to leave behind. To accomplish this feat, check out Adobe Browserlab. This amazingly useful utility allows you to preview a site on multiple browser an operating systems in real time. The only downside is that you might actually realize how bad your sites render in certain browsers, which inevitably leads to hours of cursing and head scratching.

Conclusion

Well what do you think? Are you ready to cross over and start creating comps armed only with a text editor and browser? Or are you like me, confident that a coroner will have to pry a Photoshop software box out of your cold dead fingers before you’ll let go? Obviously, there are no absolutes here. Few professional designers create mockups without any help whatsoever from an image editor. The question then becomes, on the initial draft, where do you think most of your time is best spent? We’d love to know. Feel free to use the comments to take a stand and defend your position to the death. As for me, this conclusion seems to be getting more and more macabre so I’d better stop here.

Comments & Discussion

76 Comments

  • http://fwebde.com/ Eric B.

    I’ve recently started designing from my browser, and these are some great things to remember!

  • Grant

    I always design in the browser, as I find it highlights any weaknesses in your design straight away, and lets you make quick and easy changes to element sizes with css, quicker than you can edit in photoshop. What looked good in photoshop may look bad on screen, so you may as well just start in the browser.

  • http://www.richardsdavies.com Richard S

    Yeah, I can see the benefits, but it just looks like too much time/coding to me.

    Photoshop – blank canvas, time to be creative, and not worry about CSS3, rounded edges, web fonts, blah blah. Just get a great looking design without confinds of all that jazz.

    It also seems as if there is no real mockup stage, you are building it anyway, I always feel better getting a design signed off first.

  • Dilipkumar Jadhav

    It is any given day easier for me to design in a browser (since I have to do the web designing + progg coding myself). It saves me time and I don’t have to worry about the minor nuances of another software Photoshop.
    However, I was at a disadvantage sometimes when some of the clients (especially people who have never been exposed to software development) mistake the browser thing for the real thing. To them, the website mockup that they see in the browser is a final product. I’ve often been told – so the website is all done, probably the code at the back should get completed in a day or two. But then again, I might be the only one who has had this difficulty.

  • http://www.vunkyblog.net Vunky

    I always design in a mock-up in Photohop with a browser frame around it. It helps you to keep the visual in perspective.

  • http://typefasterjoel.com Joel

    While it does sound like a neat idea to just work directly in the browser, there are still to many things that from this article that aren’t just there to that level for me. CSS3 is amazing, however until CSS3 has cross-browser support in all areas (not just FF, Safari or Chrome) these thing will make your site inconsistent and sometimes even ugly. Designing in Photoshop is fairly simple and with the proper tools for HTML and CSS with a sprinkle of Javascript to get those extra elements to give it spice, you can still achieve great results without worrying much about browser compatibility. I think this could be great in the future… but not now.

  • http://www.zorinweb.com Kingston Web Design

    Richard S is absolutely correct. For a very simple design, it might be feasible, but for something remotely intricate, it won’t. Moreover, you’re not likely to have an HTML logo.

    I know a great designer who prides himself on being non-technical as it enhances his creative horizon. I can understand that. With all the advances in CSS, it’s becoming easier to mark up tricky designs.

    Don’t get me wrong, in an ideal world I’ve love to mark up the mock before presenting it to the client in ‘IE’, however that’s not a practical course of action. If designing in the browser takes hold (which I can’t envisage), what will become of stand out creative designers? They need the freedom afforded by a blank Photoshop.GIMP canvas.

  • http://soyludico.de Marian Rick

    smart system!

  • Joseph Rooks

    Even if it did take hold, I doubt it would affect the people who do design in Photoshop much. These are all just tools, not rules— creativity is about how we fit them into our own processes.

  • steve

    great article!, thanks for the info.

  • http://www.imagomedia.be Tom Hermans

    I find it easy and fast to design in the browser. You can get a decent working mockup up and running without losing yourself in fine graphics and gradients. That can be done afterward when filling in the blank(divs). This way I’m more focused on ‘layouting’ the page with its containers and functions instead of adjusting 1 pixel here and another there, or making that tint 1% lighter etc..

    That’s stuff for round 2. Also, edits in these “wireframe”-like designs are much more easily implemented, because you just change some numbers in the HMTL or CSS.

    ToM.

  • http://www.datamouse.biz/ DataMouse

    I tend to do both: mock-up in Photoshop and code a design too.

    Things that can be done in the browser (such as boxes, shadows, rounded corners et al), I leave out of the Photoshop design, and concentrate only on the graphical elements.

    Saves me loads of time.

  • http://karinlindstrom.com Karin Lindstrom

    I can’t draw. Photoshop is my equivalent to sketching :)

    I also have to make 3-infinite designs each time before I get approval. My coding skills are good but the time spent isn’t worth it.

    Love the tools for when I’m finally putting it all together! Thanks!

  • http://www.web4half.com Jaisa….I LOVE WEB DESIGN

    Thanks a lot for all these great tutorials !
    I very much enjoyed and learning from it.
    I am definitely bookmarking this page and sharing it with my friends.

    My personal favorite is “Tip 8: Using RGBA to Screen Colors ”

    Muchas gracias!

  • http://www.glendelmdesign.co.uk/blog/ Matt

    Thanks for these tops. Very helpful, thank you :)

  • miekun

    I agreed with Joseph Rooks

  • David

    Thanks for the great list, Adobe BrowserLab looks very interesting.

    For browser testing I would add IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) and Browser Shots (http://browsershots.org/)

  • http://www.travisberry.com Travis Berry

    I’ve started using a method similar to this for a while now. Most of my designs still start with a very rough photoshop mockup, but they move to html and css as soon as possible.

  • http://www.insidethewebb.com/ Inside the Webb

    These are some of the best tips I’ve seen. Starting basic is really important, I have to second that strongly as it does mean a lot

  • Pingback: [WEB SERVISE] 12 Killer Tips for Designing in the Browser – ラフデザインにおける脱フォトショップのためのウェブサービス - mBlog()

  • Pingback: Internet Briefing Blog / Wochenendsurf-Tour()

  • http://www.thedesignloft.co.uk SEO Sheffield

    That is a fantastic resource, I’ve never considered designing from the web, even though I’ve used the grid CSS frameworks you’ve mentioned before.

    The best part of this for me are the resources on fonts, what a relief to find so many ways to test your fonts out on one post – god send!

  • http://www.thedesignloft.co.uk SEO in Sheffield

    That is a fantastic resource, I’ve never considered designing from the web, even though I’ve used the grid CSS frameworks you’ve mentioned before. The best part of this for me are the resources on fonts, what a relief to find so many ways to test your fonts out on one post – god send!

  • http://www.thedesignloft.co.uk SEO Sheffield

    Sorry for the duplicate comment, my browser died and refreshed!

    Please remove one if you like :0)

  • DRoss

    Tip 13: Don’t do it unless maybe it’s for a blog or you’re content with a bland website.

    Tip 14: GO ahead, do it, you’ll be less competition for me.

  • http://bit.ly/5RQv0e Dumm

    thanks for the tips.

  • Marco

    @Dumm – Don’t write a useless comment just so you can add a link. I def won’t be using your site now.

  • http://www.screenpresence.net Jeremy

    Designing in the browser is definitely the way to go; if you haven’t yet learned the css box model, then you probably don’t understand the basis for a lot of current design trends. (like dashed borders) This is a great way to start.

    I’m also a big fan of Parallels for Mac, worth every $. Install an old copy of Windows (I’m using XP Home), go download IE 6,7, and 8, and suddenly you can test on every browser on Mac and PC.

    I’ve been re-creating clients’ Flash sites in jQuery, and saved days of time designing in the browser and switching back and forth between IE 6 and IE 8 in Parallels, and Firefox and Chrome on MacOSX. I love Photoshop as much as anyone, but starting in the browser really gives you narrower guidelines, and you spend less time revising designs.

    Good article and comments!

  • http://bit.ly/5RQv0e Dumm

    thanks for the tips. regards

  • Pingback: links for 2010-01-10 « random thoughts and casual ruminations()

  • Pingback: links for 2010-01-10 « Köszönjük, Emese!()

  • Pingback: links for 2010-01-10 « 個人的な雑記()

  • http://swbates.squarespace.com Steve

    The idea of designing in the browser makes me a bit uncomfortable I have to admit. I do want to try to transition to doing it, because the allure of cutting down on development time is pretty strong. I’ve also been chewing on Zeldman’s ‘content informs design’ quote in tandem, and it’s starting to make more sense.

    I also think DataMouse’s suggestion is a good one, not only as a transitional method but as a standard practice. Even more time will be saved if you have some sort of draft wireframe to work off of rather than coding it up as you go along. Some people may be able to do it, but personally my mind works best in a structured framework, and I need to have some sort of semi-complete vision of something in order to implement it.

    Great article!

  • http://www.designr.in Ramesh

    Very Excellent!! I’ve never seen an article like this.

  • Pingback: Daily tech links for .net and related technologies « .Net Knowledge Base()

  • http://www.jordanwalker.net Jordan Walker

    Great article, helps to have a fundamental argument on designing and building websites.

  • Adam

    I used to design via browser and take the time to code everything by hand before I sent it to the client. I’ve found it much easier to build a working .psd of the page, crop out the content and grab the background, set it in a div centered on the page and it’s done.

    This way, if I don’t get approval on the particular desig… I didn’t waste too much of my time and can move on to a new design/project.

    Adobe Browserlab was unknown to me… Thanks!

  • http://chelevra.deviantart.com Jonas

    Interesting that so many guys here only do one of both…

    For me it depends on what kind of style is used for the website (minimalism, illustrational, etc.), because you definitly don’t need Photoshop for a minimalistic page in my opinion.

    Anyway… great article!

  • http://acfconsulting.blogspot.com Barbara

    I have never designed in a browser before, but with these tips, I may actually give it a try.

  • http://nijikokun.com Nijiko Yonskai

    I think colour scheme would be the most important out of all of this. Utilize color to the fullest. Go overboard but make sure it matches if you wish.

  • Pingback: CSS Brigit | 12 Killer Tips for Designing in the Browser()

  • Pingback: The Best Web Design Links From The Week | D-Lists()

  • http://www.designbytrident.com Yuriy Zaremba

    great tips, especially browserlab!

  • http://desaindigital.com jeprie

    nice tips, works perfect for photoshop user like me

  • http://designlovr.com DesignLovr

    I don’t think this method of designing a web site is suitable for every project, simple web sites: yes, complex, beautiful sites full with design elements: no.

    It limits your creativity to what the browser (and html/css) can do.
    I like to design a site without worrying too much about how to code it later on and once I’m done I’ll find a way to make it work (or can still compromise) – this definitely encourages innovation, instead of working with the html/css you know you have to push the boundaries.

    I agree that it might be useful in so far as that you could show a client an already interactive web site (working links, hover states, etc.) from the beginning.

  • http://cheekymonkeymedia.ca Rick

    I really want this technique to work, but until we are no longer supporting IE6&7, this is going to be put on the backburner for me

  • http://psdxhtmlycss.com Charly

    Nice tips. I design on browser and with the Gimp. It is more fast for me.

  • http://www.ateljedigital.se Ateljé Digital

    Great post!
    I think of myself as pretty experienced in designing web pages. But I found a couple of news in your post, especially the CSS3 tips. Nice!

  • http://www.empfehlenswert-wien.at wien

    great article, thanks

  • Pingback: » 李安:永远做个“局外人” T·Web()

  • http://creativitybloc.blogspot.com David

    I just have to say, content organisation IS design. Or at least part of it. I know that in the Web vocabulary, design = Photoshop, but in my mind Design = planning.

  • http://www.loveincolor.com/ Andrew Chrisetensen

    I think this is an unrealistic way of providing clients with a clear and concise overview of what the web site will _look_ like. Sure, content is king and organization is just as important.

    But now-a-days, with the capabilities of Adobe’s Photoshop and the given technologies/advancements in CSS3/html5, I think this new method of creating a mock-up is only dampening the visual appeal that branding and marketing present.

    I cannot remember the last time my design consisted of nothing but text-shadows/text-gradients nor rounded corners, I think this is a very lazy way of going about it. Hell, if it did, I don’t know a single one of my clients who would approve of it. Obviously this isn’t an end-all answer to providing mock-ups to clients, but a cheap and quick way to get a sign-off.

    It saves time and resources for us designers, but I think it’s giving the client the shitty end of the stick. Relying on stock photography and text-shadows honestly reminds me of making web sites on GeoCities for my friend’s parents.

    It doesn’t necessarily shock me to read this type of article on a lot of web developers sites, as most sites preaching this methodology are rather (visually)boring and very run of the mill (like I said, content IS king). I understand that most developers don’t know the difference between the alpha channel and a layer mask, I just think they should stick to php/ruby and let the experts handle Photoshop (not saying this is I, I’m not specifically talking about myself, I just don’t want to see the same rounded-corners and text-shadows for the next 10 years).

    Obviously this isn’t for everyone, I just think it could hurt as a whole. Creating laziness and lack of attention to detail… Might as well start asking if they want fries with that. My .02.

  • http://www.yummygum.nl Vince

    I agree with Andrew Chrisetensen. I can’t imagine a website where text-shadows/text-gradients and rounded corners are all there is to it.

    How about the dozens of light effects in dozens of weird shapes? It feels more like a developer-like approach than a designer’ one.

    Besides, browsers will always be behind on the latest inventions/trends on webdesign.

  • http://www.nbatdigital.co.uk web design kent

    many thanks for that great article! some intereting points made!

  • Pingback: Typetester()

  • Pingback: Cairns Web Developer » Blog Archive » 198. jQuery goodness()

  • Pingback: Link Collection #2()

  • http://www.wingnutart.com nick_silva

    If you are more comfortable developing comps in the browser and your worried your customer will mistake it for the real thing, why not just use a handy screengrab plugin and then you can have all a tricked out comp for your client and a practically finished product in one smooth step?

  • Pingback: Link Collection January 2010()

  • Pingback: Maquettes interactives : le design dans le navigateur | Soluo, mise en place de plateformes de blogs WordPress MU et intranets métier()

  • http://www.surferm.ag Justin

    We’re moving towards this now, however the biggest challenge is getting the designer to start coding.

    This is a great step in my opinion, and a poor one in his.

    He complains that he doesn’t have the freedom to do the designs he wants if it’s done within the browser while I enjoy the fact he has overlooked the job of trying to get his designs to *look* the same in the browser.

    Nice intro article.

  • http://www.infoways.in amole

    That’s Coool

  • Pingback: 12 советов по созданию макетов в браузере « Pico()

  • http://hubpages.com/t/1254d9 upvc windows

    Hmm it seems like your blog ate my first comment (it was extremely long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any recommendations for rookie blog writers? I’d genuinely appreciate it.

  • Pingback: buttah design Design In The Browser For Real World Sites - buttah design()

  • Pingback: This week’s best blogs « miroblog()

  • http://www.browsedesign.com Browse Design

    helpful tips!

  • Pingback: Introducing kabbin – a home for your mockups | This is Lab.SixtyFive()

  • http://tobstudios.com Cory

    Like others have said, seems good for simple websites. and ultimately could be useful for more complex ones.

    But to me the browser support issue is the biggest issue.

  • Michael “Spell” Spellacy

    For those who are concerned about browser support – embrace progressive enhancement! Then get your clients to embrace it! While it may seem like a daunting task to educate clients, I have found that most of them are open to it (and I work in advertising). This old school thinking of pixel perfect design on older browsers has to end! Soon, most browsers will have nearly identical support for CSS3 so hopefully issues like this one won’t matter as much in the future.

    Great article!

  • http://boompah.com Ryan Bollenbach

    Awesome article!

    I recently wrote about designing in a browser:

    Designing in a Browser for Designers and Developers:
    http://boompah.com/2012/04/02/designing-in-a-browser-for-designers-and-developers/

    Please check it out :).

  • http://somewifi.com/ wifi sd card

    Hello, this is a great blog!

  • http://www.grahamrobertsonmiller.co.uk/ Graham Miller

    Still starting in photoshop? Here are fifteen reasons to design in a browser: http://www.grahamrobertsonmiller.co.uk/mockup-in-markup/n1

  • Pingback: Web制作フローの再考とDesigning in the browser │ Design Spice()

  • http://www.lemieux-design.net Al Lemieux

    I thought you meant by ‘Designing in the Browser’ that all HTML/CSS was done literally in the browser – with Google’s Development tools, for example. But it sounds like it’s still done in a dedicated editor outside the browser. Correct me if I’m wrong.

  • Pingback: Les générateurs d’éléments HTML et CSS()

Subscribe
Membership
About the Author