Another Informative Tech Video

Bookmark and Share
posted by thewebutante at 0 Comments



New Tech Word Alert!

Watch out google: a new word has hit cyberspace for tech trendspotters: Facebookalicious! I admit, I definitely stole it from a great website called Where's Cool?, an online network for sharing 'independent, cheap, underground and seriously authentic things to do around the world.' But how can anyone ignore such an endearing term referring to our classic social networking site, Facebook?

So check out the site, and be sure to start dropping the term to score some points with your geekalicious pals.

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


The Creative Workplace

Combined Ideals

About a year and a half ago my current fiance and I were on our annual holiday vaca in Northern California, when we had the bright idea to head down to San Jose and explore the technology world a little bit. Of course our first stop, being the obsessive designers we are, was Adobe's headquarters. It was only a day or two before Christmas so most of the staff was out, but we managed to see a bit of how life functioned at the creative headquarters... that was before we were kicked out by security for being potential competition (we took a LOT of pictures)! So discreet, lol.

After our exploratory trip to Adobe and following an awesome Smashing Magazine article profiling the most Creative Workplaces, I had to come up with what I consider the 'ideal' work environment. I tried to be eclectic, modern and inspirational while maintaining functionality and structure. Check out the features of my creative utopia:

  • Color
  • Dimension
  • Space
  • Postmodernism
  • Technology
  • Comfort
  • Inspiration
  • Power
  • Fun

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Down With IE6

Solving the Big Problems by Boycott

No offense to anyone who is reading this on the Internet Explorer 6 Browser, but IE6 truly characterizes all that is wrong with the web. But don't worry, it's not your fault - It's society's... Or Microsoft's... one or the other.

As one of the many means Bill Gates has used to torture web developer's souls (as we tend to lean towards Macs rather than bulky PC's), Internet Explorer 6 has become a time consuming distraction to the web development community. Which was why I was so stoked to see .net magazine's new website: Bring Down IE6 with the headline 'It's time to Unite' directly below it.

Chuckle as you may, IE6 is a catch 22 for developers, and something like this has been needed for quite some time. As a resource bank with tools to discourage the use of the dated browser, Bring Down IE6 can also be followed on Twitter or added to your groups on Facebook.

So, please support the cause, and Bring Down IE6 with us today!

Other Resources: (UPDATES!)

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Creating a Design Concept

Customizing your Project's Design Direction

When it comes to designing anything from a website to an advertisement, it is pretty easy to lose track of your concept along the way. You can start with a BMW Mini and all the sudden find yourself in the midst of a project resembling more of a Daewoo than the quality German Engineered vehicle you were trying to portray. Often times it can be pretty easy for a designer to lose focus of the foundational elements of a design project, which allows this sort of 'design sidetracking' to happen. If you are a professional/unprofessional designer who often finds themselves in this circumstance, today's post should serve as a constructive tool for you. Today I will be discussing an in-depth design process to assist designers in maintaining a consistent project direction and concept while staying aligned with the goals and substance of the project.

  1. Color Scheme - If you are designing for a company, you will probably want to use the colors the company has already used to brand themselves. If the company does not have distinct colors yet, or their colors are somewhat felxible, I recommend checking out Adobe Kuler, an excellent color scheme resource, to pick your appropriate color scheme.
  2. Typography & Fonts - Usability is often a function of (among other things) legibility - a direct function of typographic styling. The importance of typography simply can not be ignored on a website or advertisement. Several of the most important aspects: Font, size, weight, line spacing, paragraph spacing, color, and hierarchy. These aspects can be varied somewhat throughout a project, but varying too many and/or too much can make the project lose consistency and redundancy - two pretty important design principles. Usually I don't use more than two fonts per project (potentially 3 if the logo is a typographic logo). Also, don't forget to evaluate your content when working with typography for a website or advertisements. If you have a ton of info, stick with a more simplistic, legible font, with fairly consistent styling throughout. If your content is lacking, often times you will want to dress it up a bit- widen your spectrum of fonts, and maybe throw in a few fun fonts and styling. For more information check out the Periodic Table of Fonts, or Six Revision's article on Typography Tools. You can also check out my previous resource post which features several more Typography Resources.
  3. Theme - Whether you realize it or not, pretty much every design project has a overriding theme present in its elements. A popular theme on the web is the Web 2.0 look, which tends to be identified with usability, legibility, icons, gradients, and reflections: see image. Other sample themes include Grunge: see Von Dutch; Retro/rounded: see Moose or Tutorial 9; Authentic: see Glocal Ventures; Class Act: see Live at Sandstone; and Bubbly/Animated: see Brian Handley Design.
  4. Supplements to the theme - Theme upplements include background images, textures, fabrics, patterns, whitespace, etc. Included in this is establishing your primary aesthetic direction: for example, will you be using straight lines with sharp points or circles, bubbles and rounded edges? Will your page feature drop shadows, reflections, gradients, etc? See Digital Web's Principles and Elements of Design for more ideas and suggestions for supplementing your project theme.
  5. Images - Your next step is to choose your image style. Will you be posting photographs on your page? If you are going for a classy portfolio look, photos are often a good way to supplement your theme. If you have a Retro theme, or a bubbly/cartoon theme, you probably will skip the photos and stick with Animations/Cartoons. Another big portion of this step is icons. If you are using a grunge theme, icons can be pretty hard to incorporate (although Smashing Magazine shows us some great grunge icons). If you are using a web 2.0 theme, icons are practically a no-fail.
  6. The Hierarchy - Establishing your hierarchy will not only help you establish your design, but it will also clearly define the most important aspects of the page/ad. Your hierarchy will be used to establish dominance for the most important aspects of your design, and emphasis to the key features. A company logo usually tends to be at the top of any design hierarchy. The logo is often (but not always) followed by the navigation. After the navigation tends to be the purpose. This can seem like it would be at the top of the hierarchy, yet if you are advertising car sales and the consumer can not remember who the company was in the advertisement - instead they simply remember some dealership that sold cars, you are not going to be the dominant thought in their head when they go out car shopping. The hierarchy goes into every detail of the design, and should be aligned with each element. The hierarchy is also very important in establishing a 'Call to Action,' which you can read more about in Boagworld's 10 Techniques for an Effective Call to Action article
  7. One of the most important steps in designing a website (designers can skip this step unless dealing with annual reports or books) is to characterize the navigation. When we characterize the navigation we are evaluating the amount of content we have, the number of sections in each category, and primary versus secondary navigations. At this point the designer needs to begin thinking more about his/her layout. Will there just be one primary navigation? This is good for a company who wants just a simple brochure presence with 'home' 'about' 'portfolio' and 'contact,' but once you step into territory above 5 -8 pages, categorization is pretty much a necessity. Possible navigations scenarios include drop downs, top navigation, side navigation, tabs, subnavs, page specific navs and more.
  8. Design Inspiration Resources - Based on what sorts of details you chose in the last steps, you can use design inspiration resources to see how other people have used these elements successfully in their designs. Remember never to use a resource as a template. To produce quality work, elements of uniqueness are incredibly important. But sometimes the work of others can serve to inspire and guide our design by generating ideas for the use of particular elements. For some great design resources, be sure to visit my post on the Top Design Galleries
  9. Template Resources - If you are still not quite there, template resources may help you better define places for specific elements on a page. Using the information you now know about your navigation, fonts, color scheme, you can begin constructing page layouts, and templates will often offer ideas on how to perfect them. Although I don't recommend you use an exact provided template (that kind of ruins the whole 'custom project' concept), you can use various templates as inspirtation to create your own unique wireframe layout. For CSS based web design templates, be sure to check out 101 Quality CSS & XHTML Free Templates from 1st Web Designer.
  10. Mock Up - Now you are prepared to use all the elements you have so carefully established to create a unified artistic vision for your project.

Elements to keep in mind:

  • KISS - Keep it Simple, Stupid!
  • Never ignore the concept of Usability

Be sure to let me know if you have any additional suggestions by Contacting me.

Labels: , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


Cross-Browser Testing Methods

Hassle Free Website Browser Testing

Since the early days of the web when Bill Gates made Internet Explorer the default browser for PC purchasers throwing Netscape for a loop, web developers have had to test their creations on multiple browsers to ensure cross-browser compatibility. Although most developers reserve a sacred spot in their hearts for the Mozilla Firefox browser, a browser sponsored by anon-profit organization that devotes its resources to promoting openness, innovation and opportunity on the Internet, the general public has yet to completely catch on. Therefore we are left with the largely ungratifying and often times tedious task of correcting our website creations in those other browsers... Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 (just forget about 5 and lower- too much hassle for such a small audience), early versions of Mozilla (for the slackers that refuse to update), Opera, Safari, and optionally Google Chrome (...and sometimes others). Whoever actually 'won' the browser wars is debatable. What we can say, however, is that we do know who lost... Web Developers.

The Webutante - Cross Browser Testing Methods - Browser Image

Because of the inconvenience testing a website in all of these browsers can be, I have compiled a couple of methods for cross browser testing that increase developers efficiency and quality when conducting cross-browser tests. Check them out and be sure to Contact me if you have any additions, modifications, or even just commentary.

The Webutante - graphic design and web development resources - browser statistics
  1. Browser Shots offers both a free service and a paid service for testing an awesome selection of browsers on PC's, Mac's, Linux and more. So why pay? Buying Browser Shot's service gives you priority, meaning if you don't pay, you are essentially last in line to be provided with your request. So, needless to say, the main drawback on the free browser shots service is rendering time. I put in a request for one of my personal websites to test it out a little bit for myself, and...well I am still waiting with my queue estimate being somewhere between 3 minutes and 1 hour and 30 minutes (!).
  2. IE NetRenderer offers a convenient method of testing the Internet Explorer browser, encompassing IE5.5 all the way through IE8. This is one of my faves because of its straightforward utility, and no hassle service. There is no charge for the service and your screenshot shows up fairly rapidly. Drawback: NetRenderer only gives you a screenshot of the browser, so interactivity and usability testing is pretty much out of the question.
  3. For testing a website in Mac browsers be sure to check out Browsr Camp, which tests with with the latest versions of 12 different Mac OS X browsers. Drawbacks: this baby costs money, even if it is only $3 for a two day pass or a $99 year long pass - and although you can test Safari 3.1.2 for free, the website I chose to test showed up flawed in the screenshot for some reason... It also only entails the most recent versions of the Mac OSX browsers, leaving out the previous versions that many people still have. Either way, however, Browsr Camp's rendering speed still makes this program pretty sweet.
  4. Xenocode Browser Sandox could be considered the free alternative to Browsr Camp. Despite being less browser inclusive (Xenocode only tests for Internet Explorer 8, 7, and 6, Mozilla Firefox, Apple Safari, Opera, and Google Chrome), it still covers the primary browsers necessary for testing and even features multiple versions of IE. The main drawback with Xenocode is its incompatibility with Mac users.
  5. Another good PC freebie is IE Tester which allows PC users to download the program to test all relevant versions of the IE browser on both Windows and XP. Again, the drawback with this program is its incompatibility with Macs.
  6. For more browser testing programs that cost money, check out Web Worker Daily's recommendations.

Until the day comes that all browsers unite their standards principles, functional capabilities, and visual interpretations, we must cope by utilizing the cross-browser testing methods listed above. Oh- and if you are viewing this on IE, please do me a solid and download Mozilla. Trust me, it's for your own good.

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


The Microsoft iPod?

Keep it Simple, Stupid!

Recently I read an article about Bill Gates banning Apple products like the iPod, iPhone, etc. in his house. This is probably why I found the following video to be so humorous. Check it out for yourself to see what the iPod packaging would look like if Microsoft had thought of it first.

Do you really think the iPod would be looked at the same way it is today if this were the case?

Labels: , , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


The Latest Design/Developer Resource Collection

March's First Collection of Faves

This week's resources are focused primarily on (although not strictly limited to) web developers and web designers. I decided to go this route due to the struggles I have been facing with some of my latest projects. I wanted to emphasize the details entailed in designing and structuring a website because of the struggle I, myself, have had in the past week working on just that - the details. When I say details, I am referring to icons, typography and layout structure...those little irritating features that can either make the website what it is, or if handled incorrectly, take away from what it is supposed to be. If you have any suggestions or anything you would like to add, please feel free to let me know.


  • iconPot is an awesome icon resource bank featuring a wide range of icons for web development projects. What I like about iconPot is its no limitations policy - all icons listed are free for BOTH commercial and personal projects without the obligation to provide back-links and/or credit to the author.
  • Always offering impressive resources and helpful file collections, Noupe does it again with their recent collection of the 50 Most Beautiful Icon Sets Created in 2008. What I liked most about this collection? The pragmatic utility of each set. There is sure to be something of use to everyone in this compilation.


  • Da Button Factory is a fun website that allows anyone to make shiny, web 2.0 style buttons online with the click of a button.
  • Smashing Magazine is always coming up with new tips and tricks for their tech-obsessed readers, but with their latest collection of Navigation Menus: Trends and Examples they seem to have outdone themselves. This article is both useful and surprisingly inspirational with their Web 2.0 navigation suggestions for a vast range of websites.


  • The Web Designer Depot examines 5 Simple Ways to Improve Web Typography in a recent article. Featuring very useful suggestions for accomplishing better legibility, this article is straightforward and to the point, and useful to anyone who even occasionally struggles with the art of typography.
  • For a great typeface reference guide, be sure to check out the Periodic Table of Typefaces created by the Behance Network. As a ranking system for the 100 most popular, influential and notorious typefaces today, this periodic table is a great tool to reference when deciding on the proper typeface for use in any design.


  • James Padolsey familiarizes his audience with the JQuery Auto-Resize capability that adds a touch of class to just about any form. Try it out for yourself to test out the coolness factor.
  • DesignM.ag never fails to offer useful tutorials and tips, and their latest jQuery feature, Easy Display Switch with CSS and jQuery proves to be another of my DesignM.ag faves. This feature doesn't just add to the 'neatness' factor of a website, but also adds an excellent form of customization that many people will appreciate.

Labels: , , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


The Designer's Dilemma

Redesigning the Stop Sign

This video is absolutely great for any designer who has ever dealt with a demanding client who thinks they know what they need, but really has no idea. This one will bring the LOL's!

I thought that was a pretty funny. I have a great follow up video coming soon so be sure to check it out!

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


The Relevance of Dreamweaver in the Web 2.0 Era

Out with the Old, In with the New?

For over three years now, I have been developing websites. In those three years I have gradually begun working less and less with the Adobe Creative Suite software Adobe Dreamweaver. This may come as a surprise to some people, as Dreamweaver has become the widely acknowledged website creation software. In fact it is one of the few softwares out there for developers to use for accurate HTML code creation and coding supplementation. Yet certain aspects of the software do seem to have been trumped by other more efficient software programs.

After reading a recent article posted on PC Pro's blog, I'm Sorry, but Dreamweaver is Dying, I decided to evaluate for myself, as unbiased as possible, the relevance of Adobe Dreamweaver in the Web 2.0 era. Feel free to let me know your own opinions on the issue by posting a comment or contacting me.

Adobe Dreamweaver - the Webutante - graphic design & web development resource blog

Problems with the Adobe Dreamweaver Software:

  • CSS Management. CSS Edit handles Cascading Style Sheets substantially better than Dreamweaver is able to. Although CSS Edit is only available to Mac users, a majority of web developers are Mac users, thus it does not usually present a problem. CSS Edit is efficiently organized, offers more prompts, better legibility, and ease of use. CSS Edit simply offers better CSS control than Adobe Dreamweaver is capable of at this point.
  • Computer Space and Functioning. Pretty much any Creative Suite software tends to take up quite a bit of space on a computer, and Dreamweaver is no exception. If you don't have a computer with abundant memory and ram, well...you probably don't have the Adobe Creative Suite on there.
  • Lowers Web Standards. Dreamweaver is often abused by what I like to call "semi-professionals" - people who know Dreamweaver and nothing else (mention 'W3C standards' to these people and you will get a blank stare). This is because Dreamweaver allows these "semi-professionals" to utilize, essentially, web cheats. I'm referring to all of those Dreamweaver functions that don't abide by standards or don't allow for cross-browser functionality - using tables for design elements, an overabundance of inline styling, a formidable use of JavaScript for rollover navigations, not to mention the dreadful 'Change all Tables to AP Divs' button (or the 'Change all AP Divs to Tables' Button).... shutter.
  • Updating Constraints. As mentioned in PC Pro's article, Dreamweaver does not offer a means to produce editability, excluding Adobe Contribute, a software (which would have to be bought separately for an additional $200.00) that offers a means of editing the website....and also a means of severely f***ing up a website!
  • Static Functionality. Along the same lines as the previous issue, Dreamweaver really only provides for static functionality. And let's face it, the web is transforming somewhat into an ever dynamic, omni-functional universe where people update their Twitter status twice an hour, and upload their pictures from the party last night the minute they get shake the hangover... dynamic functionality is pretty important in regards to the Internet. Static websites still have a role on the web, although it's pretty much limited to companies in need of an online 'brochure presence.'

PC Pro severely confines the direction of the web by declaring the 'Death of Dreamweaver.' I agree with PC Pro that PHP is an excellent tool to know and learn, and I do build my websites using the basics of PHP functionality. I also agree that Drupal and Joomla are, too, excellent tools to understand as well as know how to set up and use. But there are two main issues with the 'programming takeover' argument suggested by PC Pro that I have:

  • The notion that the web developer's role diminishes with the onset of Web 2.0 (and the 'Death of Dreamweaver') and that all developers need to rush out and learn programming is, in my opinion, fairly naive as it completely ignores the fundamental basis of web development. Behind every Facebook and Twitter, there was a talented designer constructing a clean website to entertain its functionality, and there was also a few brilliant web developers carefully constructing the website (probably in Dreamweaver) using proper coding and W3C compliant HTML and CSS. This all occured before the website was handed to the pear shaped guys drinking 3 Jolts a day who came up with the programming. To minimize the role of the web developer in a website projects is as misguided as curtailing the role of Steve Jobs in regards to Apple. Not smart. Not accurate.
  • There are many other ways to achieve client editability or dynamic functionality on the web other than programming. Dreamweaver allows one, Adobe Contribute (whether you like it or not, it is still an option; even I have used it several times). Another example is Cushy CMS (which can be implemented by using styles in Dreamweaver). In fact, for more examples, just visit my recent post: 10 Client-Side Editability Options. I discuss the most efficient methods to achieve dynamism, including (and expanding upon) Contribute, Drupal and Joomla.

Along with those issues I have with PC Pro's 'Death of Dreamweaver' declaration, I also have another, very powerful, problem: Dreamweaver is the most useful and all-around efficient web development tool that exists on the market right now. Dreamweaver can still be appreciated for its expediency in coding and noteworthy tag prompts. Automatic tag finishes - for instance: you start with the p (for paragraph) tag, when you are done with your tag, dreamweaver you put your bracket and a slash (to indicate closing) and dreamweaver will automatically place the p after the slash and close the bracket for you- save a substantial amount of time for web developers. I actually have built entire websites in notepad (or Text Edit for Mac users) before. But I have to say, it is NO FUN and an unrewarding experience all in all. It can be tedious and frustrating and downright time consuming. Not to mention, if you do build a website in PHP, the automatic echo and array button are pretty convenient compared to finding another file with similar functioning and copying and pasting or simply memorizing the PHP format and typing it all out by hand (What do we look like, programmers?).

Maybe PC Pro is trying to tell Adobe to kick it up a notch with the Dreamweaver software..? It wasn't but a few years ago that Adobe valiantly bought out Macromedia and quickly bundled both Flash and Dreamweaver into their Creative Suite with CS2.3. I don't really believe anyone should underestimate Adobe's potential plans. That is not to say that Dreamweaver's role in the web world has not and will not be in the future much smaller than it once was; but, in my opinion, PC Pro should not have been nearly so quick to mock the importance of a once worshiped software and announce the 'Death of Dreamweaver.' To do so seems almost misguided and ignorant. I tend to believe that Dreamweaver will not be null and void in the web community until the day comes when it is replaced with a lighter, more concentrated version of itself.

Labels: , , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments


A March Featured Website

Speak Visual

As a big fan of the Web 2.0 movement, big buttons and simplistic (yet pure) web design, I almost found it difficult to announce NVIDIA as my pick for this months featured website. Yet their flash layout and movie-style functionality simply can't be ignored (no matter how boxy!).

The thing that really makes this website pop is it's character emphasis and clean color scheme. It's subtle pop effects and unique loading techniques also add a classy touch. So be sure to check it out for yourself. And congratulations NVIDIA.

Labels: , ,

> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments