It’s that time of year again… SXSW Interactive, an Austin-based haze of mixers, tacos, and lovable geeky meet-ups is right around the corner, but never fear there is still time to get your interactive game plan down.

SXSW Interactive features five days of compelling presentations from the brightest minds in emerging technology, with tons of exciting networking events hosted by industry leaders, the incredible SXSW Trade Show, which “wows” me every year and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer. Taking place March 11-15, thousands of prospective panels get submitted by all kinds of people… The trick is to weed through the panels to hone in on focused area’s of interest that can or will be applicable to your field of interest, or heck perhaps may just seem interesting.

It is near impossible to go through every panel. Here are a few that caught my eye, but I encourage people to keep their eyes on the inter-webs for helpful tips, and also take the 5 seconds to Google the speakers you may be interested in, a little Google research goes a long way. Some panels I chose because I know the presenters are good. Some I picked because the subject matter is interesting to me. And some I selected because the description well… it just seemed pretty darn interesting. For a list of all panels and locations, I have included the following links:

Click here to browse the schedule of 2011 programming

Click here for campus locations and programming types

PANELS WE RECOMMEND (and will be attending):

Design-

How Print Design is the Future of Interaction
This session is about how the history of Print Design is becoming an important influence in the evolution of Interaction Design. As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. In comparison, Interaction and UI Design is still a relatively young field. Its history has largely been driven by technology and functional goals. The dialogue around it has been centered on usability, which has been its purpose in the context of technological advancement. The visual language of UI has evolved from that standpoint: that it should evoke the familiar, analog experience of tools, buttons, knobs, and dials. That foundation has led to a very specific visual language in interactive experiences. In the past ten years however, the relevant technologies that support the design of Interfaces – displays, processing speeds, and rendering engines – have matured to a point that they provide a more capable canvas for design… Presented by Mike Kruzeniski

Anatomy of a Design Decision
What separates a good design from a bad design are the decisions that the designer made. Jared will explore the five styles of design decisions, showing you when gut instinct produces the right results and when designers need to look to more user-focused research. You’ll see how informed decisions play out against rule-based techniques, such as guidelines and templates. And Jared will show you the latest research showing how to hire great decision makers and find opportunities that match your style. Of course, Jared will use his unforgettable presentation style to deliver an extremely entertaining and informative presentation.  Presented by Jared Spool, Founding Principal of User Interface Engineering.

Inclusive Design: Creating Beautiful, Usable & Accessible Websites
The concept of the Web for All is something that we hold dear, but sometimes it feels like we are holding on to it for dear life! There is plenty of knowledge sharing about Web Standards and best practices, but too many opinions about what a website really is. If you ask a designer, a developer and a marketer, you will probably get 3 different answers and this can be a tad problematic when you only have one website. Things that are designed are invariably products of some sort and it became clear that the internet is a product that people interact with using technology. Learning to apply the principles of Inclusive Design to building websites makes sense, but existing technologies and practices in order to ensure its successful implementation is where we are at now. Presented by Ian Pouncey

Creative and Effective Leadership in Design Environments
A search on Amazon shows 62,000+ books on leadership but almost nothing to help creative team leaders build and sustain a creative environment. Creativity and innovation can be delicate and emotionally fraught processes. Leadership theories are helpful, but what do you do when your star designer suddenly starts mailing it in? Or a project team is frozen in infighting? Or one of your designers just can’t find their footing in a new project? When you got your big promotion for being an amazing designer, no one told you that you needed an entirely new skill set. Sink or swim, baby. Learn tips from vision development to team alignment, from bottom-up empowerment to top-down intervention. Presented by Sarah B. Nelson, Hot Studio

Development-

Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web apps, mobile phone apps, websites that work anywhere, SVG, HTML5, Widgets, location-aware sites, Media Queries. Beyond the buzzword assault is a revolution in the way sites are made, what they can do, and how they are accessed.Explore different methodologies for making websites that users can access on mobile phones and other devices, and how to optimize your existing website for mobile. Find out what’s coming around the corner in HTML5 and the W3C APIs that allow websites to access native capabilities on devices.  Presenter: Bruce Lawson

The Politics Behind HTML5
HTML5 is the flavor of the month. Steve Jobs thinks it will feed his cat, Google thinks it means whatever they think is good, and the rest of us are waiting to discover what (apart from video, better forms, and interoperable parsing on the web) it actually *is* when it’s done. Obviously, there is a lot of interest in the next generation of such an important technology, and a lot of discussion about what it will be, how it works, etc. Where the people go, politics follows close behind. From CSSquirrel to MrLastWeek, from the New York Times to bloggers in Kyrgyzstan, people are also watching the politics. And there is a lot of it. On this panel, the people who have been there take you on a guided tour of the (smoky backroom) discussions and deals that shape HTML5, and looks at what is happening now. Where did HTML5 come from? Who were the players, who are the players, and what do they think? Why is X3D not in HTML5 if MathML is? What happened to accesskey, and why are people unhappy? Why does HTML5 have two licenses, and two specs? This panel *won’t* answer your questions about how to include HTML5 in your website. It will explore the thorny questions you want to ask but nobody wants to answer, and we’ll maybe have a little fun along the way.

Creative JavaScript and HTML(5) Visual Effects
It’s time to get creative with JavaScript! Seb Lee-Delisle, Founding partner of BAFTA winning agency Plug-in Media, shows you how to create beautiful visual effects in HTML5 canvas in this 2.5 hour workshop. He’ll also demonstrate how easy it is to convert 3D points into 2D and show you how to make your very own JavaScript 3D engine. Bring a laptop and prepare to get coding! Presented by Seb Lee-Delisle of Plug-in Media

Social Media-

Beyond the Check-In: Location and the Social Web
This panel will look at how the “ever-present human desire to share” leads to success for check-ins using location-based services such as Gowalla and Foursquare. Josh Williams, co-founder and CEO of Gowalla, will explain how people’s propensity to share where they are and what they’re doing is changing the way we communicate.

Williams will also share insights on how geolocation has shaped mobile technology and what’s next for Gowalla and other mobile-social services. He plans to address questions that would be of interest to both journalists and news consumers, including this one: “OK, so I’ve shared all the places I’ve been and connected it with photos and videos. Now what do I DO with all that data?”

Exploring the Twitter APIs
This panel is worth going to if you want to find out how the Twitter API works, how some of its new features came to be, and how it might look and work in the future. In particular, Matt Harris of Twitter will talk about what you can and can’t do with Twitter’s API. The panel is bound to be technical, but at the very least it will help you gain a better understanding of how APIs work.

Mobile-

Designing a Seamless Web to Mobile Experience
Clearly more and more consumers and small businesses are making the move to mobile to help manage their day to day lives. With that migration comes the demand – and expectation – for seamless utility between their Web and mobile experiences. Rather than having services live separate lives via their desktop or Web applications, customers are looking for instant gratification in an end to end experience independent of what device they’re using to access their information. The problem? No one is providing this seamless experience yet – and if they are, it is not meeting customer expectations. Explore the ways that companies can and are making the successful translation of Web to mobile and how that will result in customer delight and uptake of new mobile services across the market. Presented by Omar Green, Director of Strategic Mobil Initiatives at Intuit.

Designing iPad Interfaces – New Navigation Schemas
Lynn Teo of AKQA, an agency specializing in interactive marketing, will look at trends and best practices in iPad application design navigation. Based on an assessment of more than 50 iPad apps, Teo will provide an analysis of navigation methods and will answer questions such as: “Are there specific wayfinding and browsing mechanisms that make for a satisfying and productive iPad user experience?” and “How effective are the navigation approaches? Why are some more/less effective than others?”

App, Shmapp, Tell Me What Works Across Platforms!
This panel could be of interest to publishers and developers who want to better analyze consumers’ behavioral patterns to “develop the best possible mobile application and mold the app to harness the advantages of each platform.” Aaron Forth, director of product design at Intuit’s Mint.com, will look at how mobile apps have changed the way companies interact with their companies and will explain how developers can create behavioral-based apps for the iPhone and Droid platforms.

Behind the Curtain: Secrets of Mobile Application Wizardry
Razorfish’s Paul Gelb says “tens of thousands of developers and hundreds of thousands of mobile applications have gotten it wrong” and have failed to attract active users. Gelb plans to show participants how they can do it right and will talk about the biggest mistakes that developers make when creating apps. He’ll also offer tips on how to measure the performance of a branded application.

Apps vs. Mobile Web: Which to Reach Consumers?
This presentation discusses the pros and cons of using Mobile Web and Applications to reach consumers. It draws on GetJar’s experience as the world’s 2nd largest app store with over 1 billion downloads on what works and what doesn’t to reach consumers on mobile. The presentation will discuss the advantages and disadvantages of using mobile apps vs. mobile web. It will also discuss innovative new ways to use both mediums to reach your consumers in a way that is scaleable and cost effective for your organization. The presentation will also discuss who you can communicate your mobile web / mobile apps offering to your consumers in a way that is clear, simple and easy to follow for consumers regardless of what kind of handset or platform they are using. Presented by Patrick Mork, CMO Get Jar

Personal/Self  Improvement-

Fail Big, Fail Often: How Fear Limits Creativity
It can be difficult to embrace failure when you’re working on deadline and under a tight budget. But Jeramy Morrill of Big Spaceship says failure is a necessary part of creation. During his panel, he’ll talk about how our responses to failure improve or decrease our potential as creative thinkers, and how to get satisfaction out of the process of “failing forward.”

I’m So Productive, I Never Get Anything Done
Media columnist David Carr of The New York Times will look at how technology contributes to, and detracts from, journalists’ productivity. He raises relevant questions for journalists who want to strike a better balance between consuming media and creating it: “Is your desktop a window on the world or just a view of the prison yard?” and “What specific steps have you taken to bifurcate your world into productivity and recreation?”

Miscellaneous-

*Geek Out ALERT! An Interview with Mythbuster Adam Savage
As one of the co-hosts of The Discovery Channel’s & Mythbusters, Adam Savage’s work is interactive at the most literal and basic level — yet also indicative of the forward-thinking approaches to communication celebrated at SXSW. A proponent of both DIY trouble-making and an outspoken advocate for science over rumor, Savage has to balance the enthusiasms that spring for wanting to see something for oneself with the hard facts that have been proven by others time and again. An industrial designer and special effects supervisor prior to busting myths, Savage brings an engineer’s methodology to the problems not just of urban myths and historic legends but to the larger problems of scientific illiteracy and know-nothing-ism in American culture.  Presenter: Ana Marie Cox, GQ Magazine

Q&A With Google & Bing On Website Ranking
This looks like a worthwhile panel if you’re interested in search engine optimization and driving traffic to your site. Danny Sullivan, editor-in-chief of Search Engine Land, will join Google’s Matt Cutts and a representative from Bing to talk about ways to increase your site’s ranking online. They’ll address questions such as: “What are best practices to do well with Google & Bing?” and “What are common design techniques that should be avoided?”

The Grand Challenges in Media
Robin Sloan is a serious media innovator, having moved from Current TV futurist to Kickstarter-funded novelist to media integrator at Twitter. He’s going to “describe the significant unsolved problems in media, and talk about why they matter,” and then offer “a starter kit” of models and ideas that point to a solution.

Tips to surviving SXSW Interactive:

1. It’s OK to skip a few panels. The numerous options of panels, book signings, speaker sessions, and meet-ups can be totally overwhelming, especially for first-timers. But definitely maintain a “must attend” list, but also take time to enjoy the spontaneous hallway conversations that often take place when roaming the convention center.

2. Ditch the lap top, but carry a charger. This tip certainly isn’t for everyone and your job may require that you carry your lap top with you everywhere. If your lap top is optional, then you may want to consider leaving it in your hotel room and instead carry pen/paper or use your phone. You’ll be doing tons of walking to/from/around the convention center and may not have a break to drop off your bag at your hotel before going out.

Between geo-location check-ins on Foursquare or Gowalla, live tweeting during panels, taking notes, and text messages/calls/DMs to meet up with people, you don’t want to run out of juice early in the day.

SXSW has a Volt Recharge Lounge on the ACC floor that will have lots of chargers & plug-in space.

3. Say hello to people! People are very friendly and approachable — even the rockstars of social media and emerging technology. Introduce yourself to people sitting next to you in panels or while walking from one session to another. At SXSW, everyone enjoys learning things such as where other people are from, what they hope to get out of SXSW, and what they think of the Texas BBQ!

4. Arrive early to popular panels. Due to the size of the convention center and number of people trying to get from point A to point B, it can take 10 – 15 minutes to walk from one session to another. Many of the sessions fill up to maximum seating capacity quickly, so if there is a session on your “must attend” list, then not a bad idea to aim to arrive 10 minutes early to that session.

*SXSW Pro Tips. The food always runs out before the drinks at SXSW, so if your only priority for the week is sustaining yourself on the generosity of blogs, publicists, and Internet start-ups, enjoy fighting through that taco-and-Sailor-Jerry’s hangover in order to get in line early enough to gulp down another aluminum-foil chafing dish full of barbecue, rethink this…projections in number of participants for this years SXSW is way higher then last year. Pack a snack or visit one of the bar/restaurants on either 4th or 6th Street like Frank, The Jackalope, B.D. Rileys, and Halcyon, they all usually have SXSW specials during the month.

The learned SXSW-attendee knows that the “free food” is a bonus, but definitely not a guarantee. A day of day panels, shows and industry parties can be quite long—so pad your wallet with a little lunch money.

Also, Block Off Some Time for the Trade Show Block Party…The Block Party will be popping this year from 4:00pm to 6:00pm on Tuesday, March 15, the Block Party is styled after a traditional pub crawl.

Instead of pubs, registrants are encouraged to visit the booths of participating companies for tasty treats and refreshing beverages, both alcoholic and non. This year will feature participation from over 30 entities, so it is sure to be a good time.

To stay up to date on all the SXSW happenings in the Trade Show and beyond, visit the SXSW Schedules often.

If you are jumping into web design today or tomorrow you are lucky because you get to skip what we like to call the “creative-period-that-must-not-be-named.” Not many years ago (time sure flies) most designers were limited to 256 (not pretty) colors – far fewer than your handy-dandy Pantone book. It was a painful time of burning retinas and handcuffed creativity.

the infamous 256 color palette

Fast forward a decade – great monitors are cheap and have beautiful displays, browsers are much more advanced and flexible, there are powerful web editing tools and the push for breaking creative barriers online continues on a daily basis.

There has never been a more exciting time, with more valuable resources for technical documentation and creative inspiration than right now. Today is a new day to expand your mind, unleash your creativity and say “Hello, World!”

There is not such limitations in your print world, we know. The web is definitely more restrictive on many levels and color is one of them, but once you figure out what works you’ll see that there’s a lot of room to flex your RGBiceps. Besides, we think that when posed with restrictions, designers are challenged to really think of ways to push their designs further.

The Skinny.

The basic difference between color for print and web (as you might already know) is that print uses CMYK colors, or Cyan, Magenta, Yellow and Black. Any color that you see in a print piece will be a combination of all or some of these 4 colors. The web uses RGB, which stands for “Red, Green and Blue”. If you were to create a design in Photoshop with the color settings on CMYK, and then changed it to RGB when you got done, you would notice a slight difference in color. Since most users don’t go through this exercise, the difference will not be perceptible to them − unless they find a print version of the same design to hold up against the screen, which is slightly lame.

The right use of colors can add a lot of value to your design, and help kick it up a notch. There’s no magic formula and no silver bullet, but with a little observation and common sense you will be in good shape. Of course, our tips will probably be massively helpful! Here is a quick breakdown of some things to remember:

On The Big Screen.

We don’t expect this to create any big “a-ha” moments, but it is important to remember that this means the colors you choose and use could potentially look different for every user. Each monitor types, brightness level, contrast setting, and even angle at which you view the website could cause a shift your website’s colors. Even some computers using dual monitors show slightly different variation between shared screens – yes, they use the same computer and same video card AND same settings, but still render slightly different. And while it’s nice to dream of telling people how exactly to configure their monitors so they can have the color experience you want them to, this is clearly not a feasible option.

So this is good and bad news. Bad news is that there is nothing you can do about it so users will see you site slightly different. Good news is that most people do not view your website on multiple monitors at the same time so the variations are not very apparent and usually unnoticeable.

Don’t blind your user.

With print you have all kinds of selections between matte and shiny colors, paper types and textures. Online, not so much.

We have had many clients hand us a color palette that looks fine in small quantities but when plastered into the background of a website, or even used for typographical components just explodes off the page (and not in a good way). Again, color will vary slightly between monitors so make sure that even if you are designing on “Way Back Wednesday” you leave the neon pinks, greens and other very bright colors to smaller components of your site.

We have found that earthy/matte colors work very well and provide a solid foundation for any website. If you think it is too bright, just dial it back a little bit and see if that helps.

Color can inform functionality.

Unlike the world of print, changes in color as the user travels through your website can be informative. Some simple examples:

1. Using different colors for hyperlinks vs. normal text will help the user identify which words are “clickable”, and will help the eye scroll through the text faster to pick out the operative words.
2. Changing the “hover” (when your mouse is hovered on something) state of an item’s color can inform the user they are in the hot zone and if they click something will happen.
3. Highlighting in the navigation can inform the user of the section, sub section, etc where they are in the site to give them some sort of orientation in your site’s architecture.
4. Colors can also help enhance headings and help to call attention to anything you want to highlight on a web page.
5. Besides these practical reasons, color by way of graphics, page header/footer images, buttons etc. will definitely help make your site look more attractive, and draw the attention of the user to those elements you need to POP!

When you are done choosing the colors for your site, play the “ordinary user” and evaluate your color choices for readability and visual appeal. You don’t want to go overboard, and use a different color for every element. In this regard, a web page behaves almost like a print piece in that the information has to be legible and easy to follow, and color is only used to enhance and accent the design.

We would recommend the following:

1. Keep all text flowing in the same color and make sure that it stands out well against the background
2. Use one consistent color across the site for all hyperlinks
3. Use color and font size variations to differentiate between hierarchical headings
4. Choosing different shades within the same color family is an easy and effective way to tie the look of the site together while still achieving the usability you want

HELPFUL COLOR HINT:

Make sure you are in RGB mode.

Before you get started designing in your design program of choice, make sure you are in RGB Mode. We prefer Adobe Photoshop for creating webpage layouts because it is a pixel based software, and since pixels are the active unit of measurement in web browsers, it makes translation a lot easier. Here’s how to make sure that you’re in the right color mode:

Open a new document in Photoshop, and when the dialog pops up, you will see an option for color mode in the left column. When you click the down arrow, it will show you Bitmap, Grayscale, RGB, CMYK and Lab Color. Select RGB and specify the dimensions of your webpage, and you should be good colorwise. Set the resolution at 72 pixels/inch or screen resolution. (We will discuss resolution in more detail in another article.)

Selecting RGB Mode in Adobe Photoshop CS4

If you insist on using Adobe Illustrator to lay out your page, do this:
Open a new document, set the units to pixels, specify the dimensions, and click ‘Advanced’. Under color mode, choose RGB, and set Raster effects to Screen (72 dpi) and click Ok.

Just to warn you, Illustrator is a vector-based application, and ideally works better for print pieces, and to create illustrations and graphics. Using Photoshop to lay out your web page design will be much easier for the long haul, trust us.

Selecting RGB in Adobe Illustrator CS4

Be Kule.

If you are generating a color palette or need to play with some web colors, check out our favorite online color matching tool.

http://kuler.adobe.com

Next Topic: Font and Type and All the Hype.

Let’s Get the Party Started!

As a print designer (freelancer or part of a marketing team), your clients love your work. You want to keep as much control over the brand and identity materials you have worked so hard to create and sell to your audience.  Now your boss/client wants you to design their website. Maybe it’s a comprehensive overhaul or just time for a refresh – at the end of the day, it is time to make sure the (web) drapes match the (print) carpet, so to speak.

When a client asks you to design their web site, there are not many places to turn to get a quick-and-dirty introduction and resource of things to keep in mind for designing online. Additionally, building the design in a fashion that can then easily be handed off to a development team can cause additional headaches and potentially lead to excessive re-work, lost profits, and blown project schedules. Nobody wants that, right?

So let’s break it down.

User Environments

It is the age of green, and paper seems like a less-than-sensitive way to express ideas and creativity, and possibly not in the best interest of our tired environment. Yet, ask any print designer why the medium is so addictive and they will tell you that looking at your design on a screen is one thing, but seeing it take shape and become a tactile piece of expression is a whole different form of satisfaction.

It’s nice to be romantic and wish that print design will enjoy its pride of place forever. The reality is that almost everyone’s world is slowly floating into the web, and if that’s where the audience is, then designers will have to follow suit if they hope to do their clients justice. Even if this were not the case, we think it’s nice to be able to express your ideas via more than one medium, cuz’ it’s cool to be able to speak many languages.

While we aren’t the self-proclaimed torch-bearers for Web vs. Print, the one sphere in which the web has an undeniable advantage is the extent of its reach, not to mention the saving on printing and mailing charges in case you need a little convincing on why it might be time for you to get your fingers into designing for the web. Making a smooth transition from paper to screen can be challenging, but what’s life without a challenge? By tweaking your existing skills a little, you will literally open yourself up to a world of new possibilities and audiences.

The good thing is that in general, designers who began their careers with the print medium tend to have a solid understanding of effective layouts, typography and how design elements can play nicely with each other on a page. All of this knowledge can definitely be used in layouts for the web, albeit with some restraint. Think of it as having to color within the lines.

The other great thing about print design is consistent user experience. A book cover looks the same all over the world, no guest at a wedding feels less special because they received a different looking invitation, and signage relies on this same visual consistency to make branding impactful.

You may wonder – how different can designing for the web be? The site is going to be viewed on a computer screen, and all computers show pretty much the same thing, right? The answer sadly is, “no”.

Many things influence how a design layout translates into effective web design. The most important of these is the user environment. Starting with where in the world the user is, what speed his internet connection is, what browser (and version of that browser) the site is being viewed in, to what resolution your user’s computer screen is, can all affect the way your design looks and operates. Translated this means exponential variations in the way your site can be viewed and your user’s experience affected. Good times.

The latest screen resolution breakdown:

Most computer resolutions are now at 1024×768 or higher.  Here is the breakdown from last year according to www.W3Schools.com

There’s bad news and good news. The bad news is that unfortunately, there is no sure-fire way to predict that your design will hold its ground in every single user environment, but the good news is that there are steps and measure to make sure that for the most part, your site affords a consistent viewing experience to anyone who wants to use it – oh yay!

In our following articles, we’re going to try and expand on some of the parameters that affect the overall design and user experience of any site – color, fonts, web browser dos and don’ts etc. and give you some tips & tricks to get you started on your way to building an effective and reliable site. While we’d like to cover it all, we don’t want this blog to get boring so just shoot us an email with any questions you might have, and we will be happy to help you out!

A Browser By Any Other Name…Stinks!

An exciting part of the print process is being able to choose the size and shape of your design. You can even incorporate folding, cutouts and other cool things to make your piece unique. Any design on the web however, is restricted to the browser window, and dealing with this beast requires patience and diligence. Two things that scream “fun”! Not.

It would make sense to have all browsers programmed to read code the same way – which is exactly why this is not the case. Every browser – from IE to Firefox to Safari to Opera and even to Google’s new Chrome – reads code differently. For example, margin and padding settings do different things on IE and Firefox. Firefox (our current holy grail of browsers) usually reads these settings the way it is expected to, so this is a good standard to compare the other browsers against.

There’s no limit on the amount of artwork or images in a print piece. At the most, you’ll have a hard time emailing it to the printer, but there’s always yousendit.com to fix that. With websites though, image overload is frowned upon. Using heavy artwork and images slows down the site, and let’s face it – time is money, so you don’t want a heavy site costing you valuable traffic that could bring you good business.

Some versions of the most used browsers don’t handle transparency well. They like a certain amount of concealment. This comes into play with images that have rounded corners, or if you want to use a graphic that has a complex shape, but you don’t want it on a white background. There are various image formats like JPG, GIF and PNG that are compatible with web browsers, but since their relationship’s kinda complicated, we will devote a whole chapter to figure these guys out.

Because of the above issues, it is very important that the design is tested/viewed across multiple browsers to make sure it will look the same no matter what browser the site is being viewed in. You might need to put in “fixes” depending on the browser, to make sure that the end result looks the same.  It’s probably a good idea to start doing this right at the start, when you begin building the design framework of your site. Usually, testing with IE and Firefox should cover most glitches waiting to happen, but if your machine is equipped with other browsers in addition to these, go ahead and test on all.

The latest browser breakdown: According to www.w3schools.com the vast majority or users are still on IE and Firefox.

As you go along filling in the blanks, loading content and images, you will hit tiny speed-bumps with the way these elements render on different browsers, but not to worry, Google is standing by and it’s more than likely that someone else has had the same problem as you. If you can’t find a fix, you can always find a forum to complain on before trying a new route.

SO WHERE DO YOU BEGIN?

1. Get Your Browsers Locked and Loaded.
   Make sure you have a downloaded all of the latest versions of browsers for your testing arsenal.  Pick your favorite site and view them in each browser to see how things like forms, fonts, and layout vary.Here are some helpful links for downloading:
   • Firefox: http://www.getfirefox.com
   • Opera: http://www.opera.com
   • Safari: http://www.apple.com/safari/download/ (Windows too!)
   • Google Chrome: http://www.google.com/chrome/
   • Internet Explorer (IE) v7 http://www.microsoft.com/windows/internet-explorer/ie7/
   • Internet Explorer (IE) v8 http://www.microsoft.com/windows/Internet-explorer/default.aspx
2. Pay attention to the “you-ser”.
   Remember, at the end of the day someone is going to have to use this site you are designing so make sure you pay attention to common placements web components like logos, navigations, calls-to-action, etc live.
   • How would you use the site you are designing?
   • Is it intuitive?
   • What kind of content will it showcase and in what order/heirarchy should that content be showcased?
3. Find inspiration.
   The best thing about the web is that if it can’t be done, people aren’t doing it, so you can usually rest easy knowing that if you have seen it on another site, a talented developer can usually make it work.  Find a group of sites you like and add them into your creative blender for inspiration.  You don’t have to like the whole site – take a search bar from one, a button design from another, and even find out which fonts look the best to you online.
4. Push the envelope – just a little bit more each time.
   At the end of the day, graphics on the web have to be some form of rectangle or square when cropped, so figure out clever ways to break outside of the box with curves, layers and textures.  As you design more and more sites you will start to get a feel for what is and isn’t possible and you can slowly take the web-cuffs off.

Next Topic: Color Me Tricky

A Series Introduction

When the Monkee-Boy team decided to kick off the official Monkee-Blog, one of our goals was to keep it as “noise free” as possible and hopefully break through the static. Our goal is to create an informative tool for our audience and provide educational, industry appropriate, tactical take-aways for our audience demonstrating how a blog for a business can help educate and inspire. No pressure, right?

As Founder and Creative Director here at Monkee-Boy, I can say that mission certainly raises the bar on how to gracefully approach the discussion of web design. Much of our day-to-day activities involve pulling stuff out of thin air and translating client requirements into business appropriate visuals while pushing Photoshop as far as possible to meet that delicate balance of “pop” and “interaction”.  So the challenge here is  breaking that process and complexity down into digestible chunks of web design nuggets (yummy!).

The other thing that has to be factored into any discussion of web design, and every discussion with clients when delivering comps for sure, is that “design is subjective”. Our collective approach here is to
not get into why I think “orange is making a comeback online” and that “gradients are your friends” but to provide a common demographic of print designers with nice takeaways to get up-to-speed in the world of web design.

So this is where the Web Design for Print Designers (WD4PD) series plugs in.

Our goal here is to provide the following:

1. Help you, the print designer, sleep better at night knowing you are not alone. (check!)
2. Help you extend your traditional services online and expand your business.
3. Help raise awareness into the biggest “gotchas”, educate you on why they are important keep in mind, and give you background information into why these problems/solutions are important so you explain to your clients why certain creative decisions were made throughout the design process.
4. Explain how design decisions hurt/help your client’s search engine rankings.
5. Working with developers and the overall best process (from our perspective) of designing sites and how to package them up for developers to start the coding process.
6. Take the subjectivity of design out of the equation and provide real world issues that need to be considered when working on web designs and pitching web design services.
7. Hopefully establish a relationship between you the print designer and Monkee-Boy to create mutually beneficial partnerships.

So, getting #1 above out the way, get some rest knowing that you are not along and we will be tackling lots of useful information over the next couple of months.  If you have any topics you would like us  include as part of the discussion, please send them to me (Hi, I’m Aaron) at aaron@monkee-boy.com.

Next subject: Unraveling the Web