Once you dig through a thousand icons for the ten or so that you need for a project, you need to fiddle with the sizing of them, and then clutter up your HTML with a bunch of <img> elements. While there’s nothing hard, or really time consuming about this, I’ve always found it a bit more involved than it needed to be, and things only get worse when you need to resize the icons. Maybe half way into a project you realize those icons all need to be bigger, or smaller, or you need them at multiple sizes. Do we really need three separate files just for three sizes of an icon? What if after all that, the client wants to change the color scheme of the site, and the icons no longer match? Suddenly you can find yourself recreating dozens, if not hundreds, of assets for something that seems like a simple change.

Whether you’re a designer, a developer, or even a client getting a website made, what you really want are assets that are scalable, so they can be as flexible as the website is, and adapt based on user or client feedback. What we need is a single icon that can grow and change size at a moment’s notice, and ideally, change color as well.

Scalable Vector Graphics (SVG) are one approach to this problem, but for all the buzz worthiness, the pitfalls out weigh the awesomeness. Vector graphics are infinitely scalable (yay!), but there’s nothing magical we can do to change the color on the fly, and browser support is iffy at best.

There is another solution that’s rapidly been gaining in popularity that addresses all of these issues, and it’s called Icon Fonts. With an Icon Font, you have a single file where instead of a bunch of letters making up the font, you have icons instead. You might type the letter “B” but you’ll get a bicycle instead. After all, as far as the computer’s concerned, a B is just as hard to draw as a bicycle.

Once we treat icons as letters, the advantages and possibilities start to become apparent. Just like letters, they can be any size you need them to be, or any color, or accept any fancy CSS3 text effect property so you can even add back some of the pizzaz if you don’t want a flat color, or be positioned in any way. Because all the icons are in one file, it can be compressed more and load faster, which is especially great on mobile devices. And of course, just like text, these Icon Fonts work in every browser, even ol’ Internet Explorer.

As awesome as all that is, my favorite aspect of Icon Fonts is the scalability. In the desktop computing world, despite the growing size of screens, screen resolution has been roughly the same for well over a decade. But in the mobile world, screen sizes and their resolutions are all over the place. When using non-scalable images, this can be a headache as one phone might display something nice and crisp, yet another phone has to scale it up, so it looks blurry. This is especially important on high resolution screens, such as the Retina Display found in the iPhone 4/4S and the new iPad 3. Traditionally, you’d need to make higher resolution files to compensate for this, but with Icon Fonts, they’ll just scale up to be as big and sharp as they need to be.

All that said, there are some drawbacks of course. Just like with text, Internet Explorer isn’t great at how smoothly it shows Icon Fonts, so you need a little more consideration to get it looking great, and if you need it really small, there might not be anything you can do to make it look good. Screen readers for the visually-impaired also have trouble looking at an Icon Font and seeing the icon instead of its base letter — we see a bicycle, but the screen reader sees a B. There are ways around that, but hey, that’s another show blog post.

With all these new mobile devices, and their bespoke screens and resolutions, we need everything to be scalable, so they can adapt for their displays. Text has always been scalable, and now Icon Fonts let our fonts become scalable as well. The more scalable, the fewer assets we have, so development is faster, updating is faster, performance is better, and appearance is sharper and prettier across hundreds of devices.

• Presenting Organization, especially for side by side comparisons (think of a spreadsheet)
• Quick and Easy to Read Data – Humans are always inclined to find balance and organization in what they see. Why not help everyone along and make things easier?

Sample Table 1

Some of the more challenging projects Mudbug has helmed, such as About Stryker, require a lot of thought, process and planning. Mudbug has developed many useful online forms and applications where mounds of information have to be presented in a concise and quick-to-process manner.

There are instances where web designers can use a div element to present the information like a spreadsheet. However, relying on your stylesheet to lay out actual content can become problematic, especially if there is a large amount of data to display. In this case scenario, it’s just more practical to use tables. Tables are semantically proper if they are used for the purpose of presenting data and exist to lay out actual content while style sheets do the styling.

Tables can also be styled to make data more presentable, as well as look nice. When you create a table that has many styles, the markup can get quite messy with added classes and id’s. CSS3 can help clean up some of the code with the use of new pseudo-selectors, where the designer can assign specific styles to specific rows or cells just by targeting where they are, rather than what data they contain. With these new pseudo-selectors, you can, for example, target a corner of a table without having to add classes to your markup that explicitly define what and where a corner is.

Sample Table 2 with Pricing Example

Sample Table 3 with Scrollable Data

As with any type of design markup choices, there are pros and cons to using tables:

Pros:

• Can help provide structure to copious amounts of data information
• Can be styled to enhance data presentation beyond its default organized structure
• Screen readers can scan the information better than if the content was ordered in divs
• Can help organize form fields because of the inherent alignment of cells

Cons:

• Rigid structure
• Tables, commonly used in email newsletters, can prove to be quite problematic to style and structure across email clients

We knew we didn’t want to completely change the look and feel, since our branding is fairly new and something that our audience is familiar with. But adding a few subtle textures, gradients and cross-hatchy bubbles [thanks, Amy!] gave more depth to our site and helped liven up our 3 year old design.

We added a newer, better slider [thanks, nivo slider!] with images, captions and links that can be easily updated so we stay current.

The bottom portion of our site was reworked so that more dynamic content could be showcased. Our latest tweets and most recent work are featured, as well as the new Employee Spotlight section (which is constantly rotating to give you an idea of who Mudbug actually is). And in case you were wondering that very question, our team page has improved exponentially, as we all have new pictures. [thanks, Vasu!]

But the biggest change we made to our site, and definitely the most time consuming, was the widening of the entire site by about 200px. Our original site was about 950px wide, which is pretty standard for 2007, but for a company that specializes in web sites, 950px seems a little limited. Keeping in mind that our audience has various sized monitors and not everyone may appreciate having to scroll to reach the entirety of our site, we began searching for options. Our search led us to dynamic grid systems, allowing the website to flow along a grid, adjusting to any sized monitor or handheld device.  1140 grid boasts a 12 column layout which ‘will adapt itself to work on just about any monitor, even mobile.’

As we began implementing this grid, we noticed more than a few hiccups. While the 1140 grid is in fact fluid down to 320px, there is a pretty hefty amount of set up. Since the grid not only flows, but resizes images if need be, all pixel widths had to be stripped from images. We also had to tediously wrap the contents of our site in divs denoting which column width should be used. Even after all this, there were still more issues with the flow of the grid at certain ‘breaking points’.

Luckily, a little research into media queries allowed us to bypass the glitches in those ‘breaking points’ and customize user experience every step of the way.

As we have gotten more and more requests for mobile, ipad and various monitor size compatibility, 1140 grid has increasingly become part of our set up for new sites, and thanks to media queries, we can offer audiences an optimized experience regardless of screen size.

Beyond the content, the most important part of any message is the signature. What looks like little more than a mere valediction might be considered a boring component, but with a little careful planning, design, and a heaping spoonful of testing, the signature can play a vital role in professional communication.

Being concise is key. Besides your name, you can include contact information, a reminder of who you are and what you do, provide links to social media, and remind your client what your company is all about. Go further than that, and you risk overwhelming anyone reading the message, creating clutter through the reply chain, and risk the viewer ignoring the content all together. However, while you’re not limited to just plain text, (with each bit of relevant information on one line), there are some best practices to keep in mind.

For starters, forget about images. There’s temptation to throw all your branding into the  signature, show off a fancy new logo, and leverage existing branding from social media services to captivate the eye. But images in emails are wrought with peril. In most email clients (like email programs and webmail services), images don’t load by default and the viewer needs to manually allow them to be shown. Go overboard, and maybe nothing will be seen in your signature other than a box with a big red X in it. Even if they do work, they often fail to come along for the ride in subsequent replies, leaving a long chain of responses littered with the carcasses of what was once your fancy new logo.

So images won’t do, just text I’m afraid; but that doesn’t mean it has to be boring. With careful and judicious use of web-safe fonts, varying font sizes, custom coloring and accents (like borders), you can create a signature that will work in every email client, look clean and non-distracting, and convey a bevy of information.

But before you go HTML & CSS crazy and make something that’s elegant but requires a lot of engineering work, don’t forget about what you have to support. As far as email programs, you need to ensure that everything looks proper in four different flavors of Microsoft Outlook (2003/Express, 2007, 2010, Windows Live Mail), Apple Mail, iPhone, iPad, Android, Blackberry OS5, and Blackberry OS6. Things get trickier when you consider webmail services like Yahoo Mail, Hotmail, and Gmail. Not only do you need to test there, but you need to test each in all the popularly used browsers: IE8, IE9, Firefox 3.6, Firefox 4, Safari, and Chrome. Add it all up, and a simple signature with little more than lightly styled text and accents needs to checked in no less than 30 different email clients! Before you go overboard with what you’re planning, keep in mind, you won’t have your entire web development arsenal at your side (css wizardry, conditional stylesheets, etc), you need to ensure it works everywhere, and every-time you make the slightest change, it resets the counter on the 30 tests you have to look forward to.

So don’t let lack of image support, limited CSS support, and proliferation of email clients be a deterrent when creating an email signature. With a little planning, concise and effective design, and patience for compatibility testing, you can create an engaging finale to whatever it is you’re saying.

Spreading joy is contagious this time of year, and rightly so. As the year draws to a close, it gives us the opportunity to reflect upon our journeys, express gratitude, and celebrate life, via an assortment of customs and traditions, spanning across the globe. It’s a season steeped in nostalgia, dusting off customs that have habitually become less conventional. It’s a time of sending cards instead of shooting emails.

This year, we abandoned our mice and grabbed pencils instead, deciding to capture the holiday spirit with warm wishes and a calendar for the new year. Our calendar highlights each season with illustrations of traditions we anticipate and relish every year. These events are only a taste of what makes New Orleans unique. We hope it makes our local clients grin and encourages our clients nationwide to come sample the many things we love about our home. As a starting point, we’ve offered our personal favorites for each season. Beyond that, we celebrate virtually everything from andouille to zydeco, so there’s rarely a dull time to drop in for a bite.

We hope you have a joyous holiday season. Once you’ve hugged your last guest farewell and packed away your holiday decorations, resolve to continue to celebrate life, prosperity and friendship into the next year. We will likewise await the new year, and a fresh slice of king cake soon thereafter.

When building websites, there are two popular approaches to problem-solving: graceful degradation and progressive enhancement. In short, graceful degradation follows the idea that websites will “degrade gracefully” on platforms that do not support newer web enhancements and makes use of the best available web semantics to aide its degradation. Progressive enhancement, on the other hand, begins its approach with very basic information (HTML) and works its way up in user experience by adding layers of complexity to “enhance” the usability of a website. Users who do not have browsers that support these enhancements, however, can still access the website’s information with the compromise of a less unique user experience. As new solutions are introduced to meet the needs and standards of both the users and web developers, progressive enhancement becomes more important to delivering the best websites and results.

What is the difference between the two?

Graceful Degradation

With graceful degradation, websites are built with a reactive process. Once a website is built and gets tested, web developers often find that it may not work properly in mobile devices or older browsers. Presentation can often degrade in less capable browsers. At times, by adding a “fix,” new problems can be created. Moreover, finding ways to support the same features can become very time consuming and costly, and most developers end up dropping support for user agents (browsers) that cannot support their features. It does take time and practice, but many web developers usually create clever solutions to work around these issues as they vary for every situation. However, no matter what solution a developer chooses, it most often results in minor amounts of degradation, from browser to browser or mobile devices.

Progressive Enhancement

With progressive enhancement, websites are built following a progressive process, starting with a solid foundation, and, if time and budget allows, more features are added to enhance it. If we strip the website of all its layers, it can still function properly, be able to yield better results and is able to be read by SEO search spiders. For users who carry capable browsers that can support enhanced features of a website, the experience is more rewarding. This approach however does not discriminate the user from being able to access the website’s information if enhanced features are disabled. Progressive enhancement helps web designers and developers tackle compatibility problems early on in development as each layer of complexity is added on, from HTML, to CSS, to Javascript and Flash. We adopt the idea that not every browser or platform is created equal. Presentation, however, is important, whether it is with font choices, content organization, animation or just plain English.

There is no right or wrong in either approach. Sometimes web designers and developers use a bit of both methods. Perhaps progressive enhancement, however, has the slight edge when it comes to delivering better results. To quote Sean, our Web Technology Director, “It’s the difference between teaching a class at a high level, then helping the students who are lagging behind…versus teaching a basic class, and giving more advanced assignments to the students who can handle it. In the graceful degradation class, some students will fail; with progressive enhancement, everyone should pass.”

So the main question is, if every user is allowed access to basic information of a website with the features disabled, what would it look like?

See what this page looks like in plain text: See Example

Progressive Enhancement: A tree is still essentially a tree, but with decorations, it becomes a Christmas tree.

If design is about finding solutions and creating them to have appeal, then it is logical to conclude that appeal, the subjective part of the theory, is important. Why?

Ask yourself this:

• How many books have you decided to read because of the cover?

• When you buy a car, how much does the color and design factor into your choice?

• How inclined are you to take a website’s information and content seriously—or even read it—if it appears ill-designed?

The truth is, designers are the same. We know how you think because we are just like you. Remember, from statement #1, we have to know the psychology behind behaviors. So, what makes us different? I need design, but why do I need a designer?

Designers live for a personal triumph that most people forget: beautiful and unexpected things are born from creativity and inspiration. We are actually motivated by the challenge to merge creativity and inspiration to produce an appealing solution.

Design is a necessary thing, but do not mistake it for a simple task. Designers are fine tuned professionals trained to find the appealing solution for you, similar to a doctor that is trained to find tumors or fractures and then prescribe a course of treatment. Designers employ a process. We tap into our ideas, drain them dry of all possibilities, and then go back to the problem and ask it to walk the border of our brains, between the left and the right, to present a final result that rings true.

Design may be subjective, but it is objective fact that the world needs design. Designers are able to see the objective problem and address it in a subjective manner, which can convince an audience of its efficacy. It is a balancing act to be able to employ both sides of your brain to produce a solution, serve a need, and make the world a bit grander in the process, but we, designers, get really nerdy about it. It is what we are happy to do. And honestly, who wants a boring solution to a problem when you can have a beautiful aide to life?

Do you have anything to add? Why do you think the world needs design?

All I could think about at that moment was, “Wait. What? How are they going to pull that off without everything exploding?” What would he announce next? Cats and dogs living together in harmony?

The advantage that Steve Jobs kept hammering home was that by doubling the number of dots on the screen that create what you see (aka pixels) while keeping the screen the same size, text on the screen would look as good as it does on paper. This is something display engineers have been trying to achieve for decades.

And Jobs was right; text looks great. But because text has no intrinsic size, when you make a font size larger, it still looks great. We all know what happens when you try to resize an image; it gets blurry and pixelated and all around nasty. Instead of gaining detail, you lose it.

So when I heard about this Retina display – which basically doubles the density of everything (think of the difference between skim milk and mmm whole milk) – my thoughts turned to images. Text would look better, but images would look worse.

SCALABILITY AND DESIGN IN A MOBILE WORLD

So what’s this have to do with mobile web and application design? Well, the iPhone 4’s not the first phone to have a high-resolution screen. In the Android world, screens can be anywhere from 3” to nearly 5” with a variety of resolutions, and screen densities to match. What the iPhone 4 did, along with this year’s bevy of Android phones in all shapes and sizes, was bring a certain situation to a head that user interface designers had been dancing around for years — Scalability.

Mobile users have become accustomed to special websites and apps that fill the screen and are tailor made for their given device. You don’t resize windows or adjust things to your preference; you expect it to be perfect. So what do you do when you have to design something tailor made for screens between 3” and 5,” that varies from 120dpi to 326dpi, and needs to display on phones from six different manufacturers? That’s the very problem I had when I sat down to redesign the mobile template for our Docsites, a design option for some of our specialty clients.

This redesign was for a template that’d be in use for hundreds of websites. So, in addition to the display scalability problem, there were also issues of color and content scalability – as well as the need to keep the site petite so it would load quickly on slow mobile connections. One design for dozens of different screen types, for hundreds of websites. Piece of cake…

BROWSER POWER AND CSS3

One of the great things about designing for the mobile Web is the modernity of the browsers that you find on a phone. iPhones, Androids, and even Nokia’s Symbian based phones have browsers based on WebKit, the same core that powers Safari and Chrome — the most modern browsers on the web. Blackberry, prior to the new OS6-powered Torch (which uses WebKit as well), is pretty antiquated. However, it could be worse (I’m looking at you Windows Mobile). Even as bad as the Blackberry browser is, it’s still more predictable and less buggy than the #1 browser on the desktop web — the 10 year old IE6. Because of these advanced, nimble, powerful mobile browsers, you can count on modern features like CSS3, SVG, and HTML5, which are web technologies perfectly suited for tackling the three design considerations needed to create our scalable website.

Throughout 2010, CSS3, an update to the language that designers use to style websites, has been gaining popularity and use – thanks to modern browsers, such Safari, Chrome, and Firefox on the desktop, as well as the iPhone and Android in the mobility space. Even Internet Explorer 9 and Blackberry OS6 have joined the party as of this month. For designers this is a huge win, as the more CSS3 support there is, the more creative we can be in a shorter amount of time.

Making buttons or other assets with any personality, such as color gradients and rounded corners, used to require opening up a graphics programs like Photoshop, Fireworks, or Illustrator. But with CSS3, artwork that used to require an expensive program and hours of work can now be done in much less time and with just a few lines of styling code. Not only does this eliminate tedious design tasks, it also allows the designer to focus more on the design than the implementation. It requires less upkeep as you add more buttons and headers. Likewise, because the design is defined in CSS, rather than absolute pixels, it’s easy to adapt to other websites, change colors, and modify for any need.

You can also make text more interesting by adjusting text shadow properties to give you a nice drop shadow or a subtle letterpress look — again, without relying on fixed, absolute graphics. CSS3 also supports multiple backgrounds, allowing you to layer and position additional assets into a button or header when you can’t do it all in just CSS. When you put all these features together, you have the power to design, maintain, and make portable website elements without the use of images. A button made for website A, can be tweaked in just minutes to work on website B, while still looking bespoke, and without requiring anyone to open any programs and hunt for the original artwork. And because there are no files generated, the website will load much faster.

WINNING THE IMAGE BATTLE: RESOLUTION VERSUS SIZE

Scalable Vector Graphics (or SVG) are a type of graphic that has existed in the digital graphics realm since the dawn of the industry, but have never really been seen in a web browser. In general, vector graphics don’t define an image by using fixed pixels, but instead use coordinates and math. As a result, when you resize a vector image, shapes get recalculated and redrawn at a larger size, and there is no quality loss. While complicated images like photographs can’t be represented as vectors, illustrations, such as icons, can be.

As more and more high-resolution screens come to market, the importance of maintaining high quality graphics with detail becomes difficult. Non-vector (or bitmap) icons that might look fine on a normal computer screen will look blurry and jagged on a high-resolution screen, such as professional monitors, or newer iPhones and Android phones. With vectors though, no matter the screen size or resolution, icons will look razor sharp and perfectly detailed. The advantage here is that you don’t have to settle for cruddy looking graphics on high-resolution screens, nor do you need to create multiple versions of the same icons for low and high resolutions. One graphic, with all needed information displayed at any size, is used instead, so there’s no need to go back and make higher quality artwork in the future. As screens get better and more detailed, so will your icons without any work down the road.

CACHE, CAPTURE, AND SAVE

Lastly, HTML5, an update to the core language that defines every webpage ever created, provides us with an incredibly useful feature for this design: Offline Storage. Despite CSS3 and SVG reducing the number of files that are needed to create a website, there are still going to be some required. Icons, photos, and maps, for example, are all things that still need images to be downloaded every time you go to a site, or do they?

HTML5’s spiffy new offline storage feature allows for something called a Cache Manifest. A Cache Manifest list is a list of files that you instruct the browser to download in a normal manner, but then retain and save to the hard drive, or into a phone’s internal storage. Using this feature, any icons, photos, or maps, for example, can be saved without ever needing to be re-downloaded again. Every time you visit the site after the first time, those large files won’t need to be downloaded.

Combine that with CSS3 styles and SVG graphics and you have a site that downloads quickly, looks great on any phone (no matter the size), can be easily updated, and can almost self-maintain over the years as technologies advance.

The good news is: we can’t help it. …Of course, I’m referring to the fact that the general web-surfing public ‘judges the book by its cover’.  No doubt, if the capabilities of the Internet continue to expand at the current rate, we might just be nestled into our Wall-E style hover chairs by the end of this year.

The old-fashioned way of getting to know the people behind a product or service is becoming obsolete. Sad as this may be – we can’t go back; and understanding how design affects your desired audience’s ‘rapid decision making,’ may mean the difference between sinking or swimming.

IT’S ABOUT DESIGN!

As humans, we rely on our senses (sight, taste, touch, smell, feeling) to make judgments and decisions. Surprisingly, our decision-making is based on the feelings conveyed, rather than on the actual information presented. The way something is designed causes an almost involuntary reaction in our brains. This reaction determines how we feel about said thing, and thus heavily (HEAVILY), weighs on our decision-making process.

This is why people are willing to pay more for ice cream packaged in round containers than in square, why Coke always beats Pepsi (even when blind taste tests have proven Pepsi to be the tastier beverage), or why a single gas pump can be seen as solely responsible for all of the oil in the Gulf…

Even when that one gas pump has clearly been obeying the rules and just wants to help give you gas to get where you’re going.

GETTING THERE…

And speaking of getting to where we’re going… All this matters because (in such a fast-paced market, where you only have a few seconds to grab your audience’s attention) DESIGN is our/your only chance! Don’t doubt that the hover chairs are coming; and if your presence on the web doesn’t convey your value (VISUALLY), you can be sure they’ll zoom right past, filled with consumers watching YouTube and enjoying a tasty beverage (probably a Coke).

COMING SOON:

EVERYONE ON THE WEB IS DISOBEYING THEIR MOTHER: PART 2

-OR-

A DESIGNER’S GUIDE ON MAKING YOUR AUDIENCE DISOBEY THEIR MOTHERS