As advertising dollars continue to increase for digital projects, the value of a well-designed and functional website is more important than ever. How do you feel when you encounter a brand with an outdated  or unpleasant-looking website? Disappointed right?  The website is a crucial piece of a brand’s ability to communicate with its audience, engage with consumers and display its unique culture online.

Consequently, companies are catching on to this notion. In fact, right now I am working on three separate web projects for one client! Therefore, I wanted to share with you 5 tips to effectively help you manage your next web project.

1.) Keep to the Scope

One word I learned very quickly at Bailey Gardiner was “scope”. “Is that within the scope of this project?”

“Scope” is the amount of work or hours estimated to complete a project. It is crucial to always keep the scope in mind in order to ensure your process is efficient and delivers a high-quality final product to the client. Stick to your guns, listen to the recommendations from the creative side, and clearly communicate with the client and you will be golden.

2.) Research

Do your homework! Website designs should be refreshed every several years, yet content management systems (CMS) are constantly evolving. Therefore, it is important to see what else is out there. As you and your team are concepting for a new project spend some time sifting through sites of other brands within the similar industry in order to see how you may evolve your project.

Recently, we were designing a micro-site for a client and initially planned to build it out on Wordpress, but our web team came back with the recommendation to utilize Tumblr instead to capitalize on its pre-established community of micro-bloggers. It was therefore important to spend some time getting familiar with the platform and investigating how other brands were leveraging Tumblr. Familiarity with the platform will allow us to deliver a thorough and effective product.

3.) Communication

Communicate regularly with your team and keep the client informed of progress and schedules throughout the process. The more details and information the creative team has, the more adequately they will be able to handle the project. Guide your client through the process, allowing them to feel confident in the work that is being created. You are their web expert and the more confidence the client has in you the smoother the project will go.

4.) Stay Organized

A website project has many different phases and with a large group of people typically involved, it can take several weeks or sometimes, several months. It is crucial to the success and profitability of the project for the manager to stay organized. Keep track of deadlines, creative assets, client requests, client approvals and anything that may be relevant to your project. I keep a physical copy of all important documents and create a folder in my email client to store all related emails in the same place for quick reference.

5.) Learn Basic Web Terminology

This has helped me tremendously throughout the management process. The design, programming and hosting of a website is a very intricate process with a lot of unique jargon. Getting to know the basic terminology will help you understand the process and communicate with your web team and client.

• Content Management System (CMS) is a dynamic website that allows users to easily manage the content on their website without knowing the intricacies of coding. Wordpress and Drupal are two of the most prevalent CMS’ today.
• HTML is the base coding language that is used to build a website.
• Cascading Style Sheets (CSS) is a coding language that is primarily used to control the styling and formatting of a website.
• Sitemap is an index of all the content on your website. It is most commonly used to help people and search engine crawlers find the content and links on your website.
• Wireframe is the blueprint or visual guide that represents the skeletal framework of your website. Wireframes are usually done at the beginning of the design process to help visualize what the final site layout will look like.
• Hosting is often done by a third party that provides an IP (domain) address, physical space to store your site’s information and bandwidth that accommodates the flow of information on your site.

Do you have anything to add to this list?

As a web designer with a background in traditional print work, I have had to adapt to the ever changing medium of the web. The field moves quickly, and standards from only a few years ago can quickly become irrelevant. It is my responsibility to stay on top of these trends and technologies, apply it to my work, and help clients achieve the best possible results. This post will address some common myths about web design, and hopefully provide some insight for those involved in the process.

1. Stay Above The Fold

The Fold is typically referenced in print design as “a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.” It is often requested that all page content fit within “the fold.” This request, however, does not translate directly to web design, because computer screens come in a variety of sizes unlike newspapers which have fixed dimensions. Designing for a “fold” of 600 pixels works well if your on a 13″ lap top, but only 0.6% of the population has a screen resolution of 800 x 600. More the 85% of the population has a screen resolution of higher then 1024 x 768. It’s not about fitting all content into a set dimension but it’s about adapting to how people digest information online, scrolling.

Surfing the internet is just as the term implies, you ride from page to page and move up and down the content. This brings us to our next myth…

“Simplicity is the ultimate sophistication.” —Leonardo Da Vinci

HermanMiller.com is an example of a website that uses lots of whitespace to create a classy look and feel

4. Separating design from content

5. The Bigger the Logo the Better

While it is important to highlight a company’s identity, simply making the logo bigger doesn’t mean that the audience will pay attention to it. Chances are your viewers are already familiar with your brand, and are visiting your site to find specific content. Having your logo in the top left corner already guarantees it is one of the first things they will see. It is more effective to have a proportional and relevant logo size, than to distract users with a big logo. For example, websites such as Youtube.com and HomeDepot.com use a proportionally sized logo that balances the layout of the main content area.

HomeDepot.com

For those of us working in web design and development, part of our job is staying on top of the constantly changing styles and technologies that drive our industry – one can quickly fall behind if they’re not up on the newest tricks of the trade. Luckily, our community loves to share. We’re experts at utilizing the web after all, so it makes sense to talk about our industry trends online with our peers.

Below are some of my favorite design and development resources, use them, share them. I figured it’s my time to spread the love.

1. HTML5 Boilerplate

Ensuring cross-browser consistency is always a pain. Start off with a solid foundation by using HTML5 Boilerplate. Use their build script to optimize your site and score an A-level performance with YSlow and Google PageSpeed. Boilerplate is also available in a mobile version.

2. Photoshop Etiquette Manifesto for Web Designers

I’m a very organized developer, and thankfully our designer sees the value in organization as well. By following the Photoshop Etiquette Manifesto for Web Designers, the design to development transition is smooth and clear. These tips will ensure that your PDS files are organized and easy to navigate.

3. Tuts+

This is one of my favorite blog networks. They have sites dedicated to design, development, mobile and many more. There are a ton of free resources and a premium section for paid subscribers for even more tutorials and source files.

4. Typekit

You don’t have to settle for the same old web-safe fonts, you can now choose from hundreds of web optimized fonts using Typekit. The site’s library includes many popular fonts including the recent addition of Futura. Try it out on one site for free and upgrade for more sites. At only $50 a year for unlimited websites, it’s a great deal that brings life to your pages. For free @font kits you can check out Font Squirrel or Google web fonts.

5. Site Inspire

Browse through some of the best web design out there with Site Inspire. I have been using this website for years, and they always have fresh layouts and inspiring sites to get you ready for that next project. Register for an account and you can save your favorite sites and build up catalogs.

6. Snipplr

Load up your clip collection and speed up your coding with Snipplr. This is a great collection of user submitted snippets that will make your life a lot easier. It has snippets 83 different coding languages including extensive JavaScript, HTML, PHP, CSS, Ruby, and Object-C libraries.

7. CSS3, Please!

Everyone should be using CSS3 properties, and CSS3, Please! makes it easy to ensure cross-browser compatibility. Just enter your desired values once, and CSS3, Please! will do the rest, filling in matching values for each browser specific property.

So there you have it, these resources have been tried and tested day after day. I would highly recommend using them to speed up your workflow, organize your files, and optimize your websites. If you like these services, share them with your friends, spread the knowledge and improve the web for us all. There are so many other great resources out there, what are your favorites?

If you follow the computing world at all, then you have heard this buzz word over and over, from all the big companies at all the big conferences. THE CLOUD has arrived; well it’s not exactly new. Every time you login to your email, you’re on the cloud. Google Docs, Facebook, flickr it’s all the cloud. Anytime software and data are stored and retrieved on demand from a remote server, it’s the cloud.

Google recently released its Chromebook, a web-based laptop that runs Google’s Chrome. It only allows access to the Internet with no other software, so it functions solely on the cloud.

With Apple’s iCloud, you will be able to upload your content to the cloud where it is then available on all your apple devices for instant access. It will synchronize calendars, contacts, bookmarks, email and more. My favorite part about Apple’s cloud is that for an annual fee of only $25 you can have access to any music kept in your iTunes (as long as it’s available in the iTunes store) on all your devices without taking up any of your hard drive space. This comes in handy when you’re a music junkie like me and can’t fit your 80GB music collection on your 32GB iPhone.

Amazon offers a similar service, and I’m sure more and more service providers will come and go. The cloud is just the next phase of electronic evolution; we are losing the wires and bypassing hard drive restrictions and entering a world where all of our devices are instantly synchronized.

The cloud is not only a great tool for the individual, but also creative agencies, marketing firms, and other various businesses.

Taking your work home with you will be easier then ever with cloud based services. Employees will be able to log-in to their work computers from home and their home computer from work. The flash drive will be a thing of the past since all your files will live on the web. As a developer, I am used to accessing files through FTP, the cloud will act in a similar way, hosting all my files remotely and allowing access from anywhere that has wifi or 3G/4G.

The cloud will keep you connected to all your files all the time. No more forgetting that important document at the office and no more burning files to a disc or putting them on your flash drive. The availability of cloud computing services is growing fast, and soon all these great conveniences will seem common place. So next time you have to email a photo from your iPhone to your computer, remember that those days are numbered and soon you will let The Cloud handle that for you.

This week is a big week for Advertising folk in San Diego. First, 500 of our ad, social media, and web friends will get together on June 1st at the annual Interactive Day. At this one day conference we’ll be talking everything from digital advertising, to SEO, to social media. There is a bad ass line-up of speakers including leaders from Google, Pandora, Facebook, HubSpot, and much more.

The following day, June 2nd, the San Diego Ad Club celebrates its 100th birthday and hosts the national advertising conference, AAF. This will bring more than a thousand advertising peeps from all over the country into our beloved city; all to talk and learn about advertising best practices. For any of our Twitter/local friends who are planning on attending, the BG crew will be there on June 2nd, at 7:30 AM, hosting a coffee truck meet-up to get you going and ready to learn. Be sure to stop by, say hello, and grab a HTeaML or a Chai Logo Latte and kick off your first day of sessions the right way.

In preparation for this big week, I sat down with fellow SD Ad Club board member and industry colleague Chad Robley to chat about Interactive Day (#IDSD for you twitter peeps). Just take a gander at this short video that our friends shot at SOIclave to get some insight on why you should attend.

When designing for an email marketing campaign, designers should always consider how their designs will translate into an online format to ensure the design looks good once programmed. The way it commonly works is, the designer creates a PSD file and passes to the web developer. The developer then takes the design and properly formats it into an HTML email, using a combination of HTML and CSS. If both designer and web developer have a good understanding of the end goals, their lives should be easy. But then there’s Microsoft who has ensured that their lives will be a living hell.

Most email programs use a browser based rendering engine to display HTML content. Apple Mail uses WebKit, the same engine used by Safari and Chrome. Thunderbird shares the Gecko engine with Firefox. Even Windows Mail, which ships with Vista and Windows7, uses Internet Explorer (IE) to render HTML emails. In the past, Outlook, which ships with Microsoft Office, used the IE engine as well. Life for web developers was, for the most part, good.

Everything changed in 2007. Microsoft shipped the latest version of its Office Suite, which contained numerous improvements to the applications, to millions of home and business users who rely on it daily. Indeed, all programs showed significant advances in usability — except for one: Outlook. Microsoft made the decision to replace IE with Word as Outlook’s rendering engine. Yes — Microsoft replaced an engine designed to display web content with a word processor.

Below is a comparison provided by fixoutlook.org, that shows an email design displayed in Outlook 2000 (IE rendering engine), and Outlook 2010. Pretty different.

Photo by Fixoutlook.org

There isn’t much that we as designers can do about this situation right now but I do encourage all developers to voice their opinion to Microsoft. Let’s hope Office 2012 shows some forward progress.

This past weekend I attended the Y-Conference at University of San Diego. This annual conference is a great place to meet designers and other people involved in the design industry from all over the world.

In addition to all the great networking, the event had many strong speakers, including Brigid McCarren, Art Director of HOW Magazine. This is possibly the number one design related magazine in existence and they are known for identifying and displaying the best work from all over the country. I found her presentation on design trends of 2011 to be particularly interesting and wanted to share with you some of the key takeaways. The top 6 design trends she shared with us were:

• Lighter color palette: For years we saw the use of bright color palette in all design materials, but this year we will see more use of pastel colors in collateral, packaging and web design.
• Light texture: This means we will see print designers using paper with light texture to enhance the textile quality of their work. For web designers, we will see more light texture (aka noise background) applied to designs in order to create an interesting look and feel for site visitors. This texture also helps create depth and field to the flat dimension of an on-screen design.
• Patterns: The use of patterns creates an intricate look to a design piece. Most luxury brands use patterns in their packaging or collateral materials to make their products feel even more exclusive.
• Recycled: Designers are doing a good job of promoting sustainability by using more FSC certified paper and post-consumer materials to execute design works. And the idea of recycling doesn’t only apply to print. Take the new Nike commercial where they recycled clips from their old commercials over the years to create the most recent spot.
• Infographics: In 2010, the use of infographics (the visual representation of stats) exploded exponentially and they don’t appear to be getting any less popular. With so much information out there, both online and off, people rely on infographics to present them with the information they need in an easy to consume manner. To see examples of quality infographics, check out Nicholas Felton’s work. He has done some amazing infographics and the ones that inspire me the most are his Annual Reports which he has been publishing since 2006.
• Nature inspired: The use of nature inspired line art on collateral materials creates a design that is an intricate and interesting visual. Many web designers are also turning an eye to nature. We will continue to see many websites with nature backgrounds or that display nature inspiration with nature textures. This design aesthetic creates a friendly and fresh look for the work.

Lighter color palette	Light texture	Patterns
Recycled	Infographics	Nature Inspired

In addition to sharing her picks for 2011 graphic design trends, Brigid also shared the thought process behind the 5-column grid that HOW Magazine uses. For those of you who aren’t graphic designers, the grid system helps designers make better decisions on where things should be positioned. It can be an extremely beneficial tool for any designer, especially designers for magazine layouts or websites. There are many variations of grids that vary by the number of columns in the grid structure. For a simple design, a designer could use a 2-column grid or they can choose a grid structure with a larger number of columns to expand their layout choices.

Brigid shared that she uses the 5- column grid because she believes that constraint is freedom. I couldn’t agree more on this. That being said, I will never choose an odd number for my layout. Why? I just love even numbers too much and then you can divide it by 2.

Brigid touched on one last point about color trends, which was interesting for me. She told us how fashion has influenced color trends in graphic design for many years and Brigid suggested that graphic designers should also follow fashion trends because they change frequently. You can check out this year’s color trend here.

As a designer, it’s important to keep up with the trends and evolve along with them. Knowing the design trends helps us make better design choices and, more importantly, when you watch trend cycles for long enough, you are able to spot potential trends before they happen, execute them, and then become a design trendsetter.

We’re a fast-paced shop with great clients and we’re looking for another piece to fit our growing puzzle. Specifically, a Front End Web Developer with programming skills and good design sensibilities. (That’s right, we know you exist.)

If the following list sums up what you bring to the table, then clearly you’re awesome and we’d love to talk to you.

Requirements:

• BS in graphic design, web design, computer science or related field, or equivalent experience
• Experience writing technical and functional specifications and driving them through development
• Effective verbal and written communication skills with both technical and non-technical audiences 
• Ability to work well within a team environment and laugh in the face of doom.
• Working knowledge in Flash with ActionScript 2 & 3
• 2-3+yrs experience with advanced knowledge of HTML, CSS, Javascript, PHP
• Understanding of best practices for web according W3C standards, email and mobile with solid typography, layout and color skills.
• Experience with hand-coding HTML, CSS and jQuery
• Experience working with CMS – Wordpress 3x+, Drupal 6x+
• Basic knowledge of MySQL
• Basic understanding of Information Architecture, UI/UX principles
• Ability to translate design pixel to pixel
• Documentation of web development projects
• Comfortable working on a Mac platform
• Proficient in Adobe Flash, Illustrator, and Photoshop
• Should have familiarity with Coda and/or Transmit

Responsibilities

• See web projects through from start to completion including wire frames, comps and programming
• Manage your own projects, respect deadlines and use good judgment in time management to ensure your jobs are delivered on time and on budget.
• Build web development projects to spec
• Keep up with web standards, follow web trends (HTML5) and foster forward-looking development for alternate digital channels
• Collaborate with and take direction from senior creative team to create successful campaigns.

Salary will be commensurate with experience and competitive. We offer medical, dental, paid vacation, holidays, sick/PT, 401k and profit sharing, not to mention great weather.

No calls or emails. Really.

Send resume to resume@baileygardiner.com.

In techy speak, WordPress is an open source content management system that many web developers use as a foundation for a website or a blog. It allows the end user to make updates without having any programming knowledge. And as part of the goal to make website updates easier on the “laymen,” WordPress also offers plugins that enhance functionality such as search engine optimization, video playback capability, etc.

Here is a list of the plugins that I have found are important to have and/or useful for anyone with a company blog:

Top 6 WordPress plugins

Security/SEO

• Akismet: A spam-fighting service that checks the content of the comment anonymously with an online server to determine whether it is spam or not.
• WP Super Cache: A static caching plugin for WordPress. It generates html files that are served directly by Apache without processing comparatively heavy PHP scripts. In short, using this plugin you will speed up your WordPress blog significantly.
• Google XML Sitemaps: Generates a special XML sitemap which will help search engines to better index your blog (And thus improve SEO rankings).
• Google Analytics for WordPress: Tracks your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and page views.

• All-in-one SEO Pack: Automatically optimizes your WordPress blog for Search Engines (Search Engine Optimization).

Social Sharing/Engagement

• Share and follow: Add Share Icons, Follow Links, Facebook Like, Tweet and other buttons on your site in the way you want.

It is important to remember that while plugins can be useful, the core functionality of your site should not rely on them. Plugins can potentially break with every WordPress update.

Choosing which plugins to recommend to the clients can be challenging, and it is best to do research and look at the latest update, ratings, and reviews from other related sites. If you’ve found other plugins that have been useful for your sites, feel free to leave leave them in the comment.

Last month I came across Behind the Curtain written by Austin Seraphin, a born-blind blogger. Two of his most interesting posts cover his first week with the iPhone and his iMac purchase. In both articles he explains how VoiceOver, a feature of OS X,  helps him control his computer and browse the internet. This got me thinking about the importance of universal web accessibility. It’s not all about a good looking website or which user agent your end users use. Not anymore. Designers should have a good understanding of their target audience and how the end user will view the site—through screen reader? with graphics enabled? or a braille reader?

VoiceOver Utility on Mac OS X

Small things to keep in mind when designing for universal accessibility:

• Grid – Organizing information using grid will helps users browse through your site easily. Using grid also helps define hierarchy within the webpage. For example, the navigation bar is often the most important tool for users to browse through your webpage. Since automatic screen readers reads from left-to-right and top-to-bottom, having a top navigation bar is better than a sidebar navigation.

• alt tag- Screen Reader ignores images with no alt tags. Don’t forget to specify alt tags before you pass your design to the programmer.

• Execution- If you want your voice to be heard, stick with live text and validated code. A Flash based site with no live text and images without an alt tag is not a good idea. Even with just a Flash based gallery/movie, a screen reader will read “___” (Nothing).

Today’s devices that comes with built-in screen readers open doors for more internet users and more universal access. Smart web developers should be user agent agnostic. Understanding your target audience and their needs will help you deliver the information effectively. And, knowing the possibilities of the world wide web will make you and your work go a long long way.