It's my first Spring in Asheville and I have never seen greens this green. Week-end hikes are becomming a regular occurance again as the weather becomes more favorable.
All-around website developer & consultant serving the global marketplace. Preferred role of rapid HTML/CSS/JS prototyping, MVP development, and UX development. Proficient at working solo or with small-large teams in various environments and MVC frameworks including Telerik, Laravel, Symfony & Ruby as well as theming for content management systems such as WordPress, Joomla, Magento and Drupal.
Hired to support in design and coding of web, mobile and email projects. Grew into the specialization of front-end website development, Linux development and systems administration as part of the Core Team.
- Front-End guru responsible for taking designer compositions and user-interface designs and rapidly building html, css and jquery prototypes and web and mobile applications.
- Key role in full cycle development of over 8 web & mobile application projects.
Lead web developer managing a small team of three for a start-up company specializing in Strategic Internet Marketing and Web Development. Was also introduced into search-engine-optimization & web analytics.
- Led team in learning and adopting search-engine-optimization best practices
- Spearheaded the full cycle development of web applications.
The mutual goal that website designers and website developers share is to create compelling, informative, and well–structured websites. It requires a close working relationship. As with much in life, this relationship relies on effective communication. If a website suffers from design or programming problems, your end user will not be a user at all, they’ll be gone. So, what are the best strategies for achieving effective communication between designers and developers?
Designers provide site visitors with a visual experience that may include interaction such as animation, drop downs, popups, sliding galleries, etc. Designers bring balance to the page. They combine a knowledge of how colors convey ideas, the use of white space for balance, and more, to form the user experience.
Developers, though always willing, might not be able to implement exactly what a designer intended. The developer’s function—the technical perspective of the site user’s experience—may conflict with the designer’s form. Being able to advise on alternatives and knowing what enhances or hinders loading time, what visual effects may be unnecessary, or what is just downright impossible—is a large part of how the developer adds value to the user’s ultimate online experience.
Before a comprehensive design is shown to a client, it is a good idea to review it beforehand with the developer. If a specific function is unclear or unnecessarily complex, if a better alternative exists, or is impossible to code (rare), the developer can spot these issues before a client reviews it. This prevents retracting features you may have already promised, and, perhaps even worse, revealing a lack of communication between the designer and developer. That said, a good designer will already have a strong background on what will work from a developer/programmer perspective.
Designers should discuss all the functions of a proposed design with the developer, so they are both crystal clear on what is possible based on the design, and also what other options might be available. A lot of time can be wasted designing with the intent of creating one function, while the developer is coding with the intent of creating something else. If a navigational menu design is supposed to perform multiple functions, the designer needs to be clear in conveying the details to the developer, who can then confirm they understand by stating the plan back to the designer. Developers should not assume how something is expected to function—ask. If there is any doubt, explore further. A world–class developer will not rule out any function of good design until they have exhausted all possible solutions. Be open to a challenge.
If a developer renders images in a format the designer didn’t intend, or somehow impacts the harmony of the designer’s intended form, the designer should let them know why it doesn’t work and what format works best. If a designer explains the logic behind an aspect of their design and the developer determines it won’t work, they should let the designer know why it won’t work and provide solutions that do. Whether designer or developer, explaining your intentions logically lets each learn from the other, and prevents repeat mishaps.
In Part III, the final in our series, we will discuss best practices for designers and developers that result in an efficient and harmonious work flow.
Read Part 1 here.
Every now and then designers and/or developers run into the problem of designing a website or application that includes non-web fonts because not all fonts are installed on all end-user computers or other devices. Therefore, one often settles for one of the 11 less-appealing core web-fonts, which include Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman,Trebuchet MS, Verdana, and Webdings. These are the standard fonts used by all devices. It’s been the only way to ensure that all website visitors will see exactly what the designer intended. The only alternative is to render your type as graphics, which is impractical. What follows are some solutions for using the exact font your design requires, or at least a font reasonably close.
Here at PRI we use the first two below. We begin with my first choice, Google Web Fonts.
Google continues to roll out new products and services and in May 2010 the Google team introduced Google Web Fonts. The site offers hundreds of free, open-source fonts that are already optimized for the web. What I like most about Google Web Fonts is ease of implementation. You can use any of Google’s optimized fonts in three easy steps:
Typekit offers a fast and reliable method of using real fonts on your website. Acquired by Adobe in October 2011, Typekit offers access to hundreds of web fonts by simply adding a line or two of code to the header of your web pages. However, unlike Google Web Fonts, Typekit’s free service plan only allows for one website and two fonts. Free plan users also have to slap a badge on their site that links back to the Typekit website. Typekit’s pricing structure starts at $24.99 per year, which may be an affordable solution for their full library of over 700 fonts.
While all of these options work pretty well across all modern web browsers, the quality of the text varies and is dependent on operating systems, web browsers, and even your monitor. Font sizes 30px or larger may also be best served as images, with the copy referenced in the image ALT tag for search and accessibility purposes. The images below illustrate how the same web font (Lobster), set at the same font size (72px), can differ in just two different versions of the same web browser. The first shows how the Lobster font at 72px appears in Internet Explorer 9, while the second (smaller and slightly more pixelated) shows the same font and size as it appears in Internet Explorer 8.
Lobster font, 72 px, in Internet Explorer 9:
Lobster font, 72 px, in Internet Explorer 8:
So, with thousands upon thousands of fonts and so many solutions to implement them on the web, we do not need to rely upon default core fonts, anymore.
Depending on their specific roles, designers and developers often have different and sometimes polarizing viewpoints. The differences—or gap—in the way each group thinks and works can sometimes lead to problems either in limiting a designer’s creative form—“you can’t do that”—or driving a developer insane while creating the functions—“who designed this!?” These differences also account for designers’ and developers’ infamous reputation for not getting along (except at PRI of course!). The primary reasons for this often originate from ineffective communication and not fully understanding what the other does, or how they do it.
Fortunately, the gap can be bridged, and the talents of both designer and developer can shine through. Well-thought-out procedures, determining the most effective use of software, and focusing on best practices can all result in increased productivity, and turn those frowns upside down!
The first in our three-part series on the “peace bridge,” focuses on using effective software and technology. The key here is that less is more, and there are a few great tools that allow designers and/or developers to do more in less time:
This tool is great for designers to generate and convey their ideas to developers quickly and effectively. It allows designers to quickly mock-up prototypes that look like simple sketches that not only allow clients to make important decisions without distraction from aesthetics but also gives developers a chance to chime in on basic logistics that designers need to be aware of before creating a more complete and comprehensive design.
This simple template package provides designers with guided templates for many of the most commonly used design programs, including Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, and Balsamiq mockups, and comes with pre-made Cascading Style Sheets (CSS) and sketch paper for developers. The package offers designers and developers some common ground for designing within a set 960-pixel width (the current standard width for designing websites) and developing markup and CSS for web pages quickly and efficiently.
Firebug and IE Developer Tools are great for debugging and editing markup and CSS on-the-fly within web pages. In addition, I find it also gives designers a glimpse into the developer’s logic, regardless of whether or not they know the programming language. The ability to get real-time results of the edited code allows developers to explain what does and doesn’t work visually as well as verbally.
In part two, we will cover communication, simple procedures, and best practices that will help both in design and development.
Use the form below to contact me, to schedule a free 15-minute consultation, or to just say hello.
Have a concise vision already in mind? Shoot me the details using the quote form below.