In-Browser Design: Introduction to Designing for Web 2.0+

Jul 24, 2012 11:06:00 AM Nate

I have been spending some time learning more about various in-browser design techniques, tools and approaches, and I hope to have a chance to talk more about this at tomorrow's Phoenix Drupal meet-up! In any case, I wanted to introduce the wide variety of tools, articles, people and resources that I've come across in this world of designing for the browser.

A long while back, when I was getting my start in doing web design and development, there weren't a ton of options for building sites. From what I could tell, most people (at the time) were following the same basic workflow: design in Photoshop or another graphic tool, code in your IDE of choice, and debug by... well, often I don't think debugging was usually much more complicated than just making sure that your site worked as you expected in Internet Explorer.

Boy, times have dramatically changed! Now that the design world as a whole is up to speed with the web, the tooling for creative professionals (and those that aren't as strong on the creative side of the web alike) has grown along with it. At a minimum, any web professional should have *at least* the most popular browsers installed in their development environment, and ideally they should have access to the most frequently used versions of those browsers across their user base to test how their work renders across these varied platforms.

If you're supporting an existing site, check with your server admins about installing one of the various web analytics engines on your site to know as much as possible what your actual user base looks like. Google Analytics is a quick and easy engine to integrate, and as you (individually or as an organization) probably already utilize some of the Google suite of services it's often a very approachable solution for most organizations. I suggest this right up front since it's never fun to spend hours pouring over details that may never be seen by your actual target audience, and this kind of information will help you categorize the relative importance of the variety of iterations of browsers and operation systems around which you should focus your testing.

Images nowadays seem to be largely focused on bringing a pop of interest into a page, and are much less about putting a design together as a whole. For instance, using CSS tools like SASS, it's possible to change the entire color scheme of a site in a single line of code, that is compiled down into style definitions that could dramatically alter your whole site's color scheme. You can't accomplish that by using static images! Advancements in CSS now allow many of the tasks that previously had to be done in a graphic tool to be created in code and rendered in the browser as the user loads the page. Some great examples of this are now all over the web - CSS-based gradients, buttons, and text-stylings and effects are commonplace among some of the web's biggest sites. Depending on your needs, most design elements can be created in CSS using code that translates to quicker and more browser-compatible websites that have more style and visual interest (read: cooler-looking) than previously possible, often even with large downloads of many images and image slices.

With so much of the web in code now, and no longer just Lego'd together in stacks of nested tables of images, a new world is now open to the developer/designer... but along with this power comes a lot of responsibility - for debugging. Sites built in Drupal are generally div-based layouts, and any site that follows the latest web development/design trends also utilizes the benefits gained through this approach - style inheritance, easier selection of elements in your CSS, etc. Unfortunately, this can also quickly become difficult to figure out which element, style, definition, or rule might be misbehaving in any given situation, so using developer tools is a must.

Personally, I currently prefer browsing the web in Google's Chrome browser, which comes built in with a fantastic set of developer tools and the ability to right-click on anything in the page and select "Inspect Element" to drill down to the exact piece of code that controls whatever you clicked on. Style definitions are iterated in the right-hand panel and pretty much anything and everything can be modified with the results of your changes updated to the page in real time.

After going through my research on this topic, I'm going to try switching to Firefox again and see how I like Firebug again. I say "again" here, because before Chrome came out, which was quite a while ago now, I used Firefox exclusively when I didn't absolutely have to be in Internet Explorer. In 2008, I ditched Firefox completely as my primary browser because comparatively it was a slow and painful experience when Chrome let me do what I needed to do, with much fewer resources on my computer and had a much snappier and more pleasant UI experience. The last few versions of Firefox have really brought it back into the upper echelon of web browsers, with speeding it up considerably so it seems to perform more like Chrome and allowing it to do pretty much whatever you want it to do by way of a huge number of easy-to-install browser add-ons.

I would like to extend MANY, MANY GRACIOUS THANKS to my friend JuggoPop for providing me with most of the following resources related to doing in-browser design. He's one of the rockstars of web design that I met at DrupalCon in Denver!

Articles about in-browser design

Tools to help facilitate in-browser design

People and Places to know in the world of In-Browser design

Additional Links

Also, just for fun, I thought I'd put these interesting articles in here related to using CSS preprocessors and which one seems to make the most sense:

Some SASS vs. LESS comparison links (this is more-or-less specifically here for John Nguyen!)

Topics: Drupal, Phoenix, SASS