In an ideal world, the designers will be HTML experts who know how to make the most out of it. But in most cases, the designer and the developer are two different people which are speaking two different languages. In this post I will attempt to explain why the developer should not get a design and create an HTML out of it, but should take responsibility and point out why and where it is better to do things differently.
The developer's job:
While most web designers have the advantage of providing the consumer with a rich but flat product, the final product that comes out from the web developer consists of a combination of HTML, JS, CSS, images and layers that have the tendency of moving around. He also need to support and take consider of issues like: speed, SEO (Search engine optimization) , page changes, translations, different layouts, different page version, different browsers, different browser versions, different platforms, different resolutions, and other bad sickness.
This is why when a WEB developer gets the design of the page, he immediately begins to analyze and break down the page and organizes it according to the different elements. As part of the process, he first separates the pure HTML/CSS element from the elements that need external components and the native elements from the tricky ones. The second step is to assess the complexity and consequences of each of these elements.
The developer's job is not to build the page in accordance to the designer requirements, but take responsibility and locate and point out elements, which should be changed so that on one hand will not significantly effect on the visual aspect, and at the same time will be more effective, and even with more exciting advanced options.
Buttons as a Case Study
Image as a button- The slightest change requires external intervention.
- It's difficult to support multiple languages.
- Less SEO optimized.
- The need of loading external element.
Image of a pure CSS button- The lack of support for all browsers and platforms.
- The complexity and difficulty in getting the exact look.
The ideal solution to the problem of the buttons example is not an off-the-shelf, but a process of breaking down the design element of the button and considering various alternatives for each one of them, keeping in mind the consequences of using each one of them, even if sometimes it will affect the visual aspect. In the next section will discuss the considerations.
The design elements
In this section we will try to dismantle the design foundations that create the various page graphical elements such as the buttons we had discussed. For each of them we will present the possible alternative and try to touch on the advantages and disadvantages.
Unavailable fonts and effects
Using images to display unavailable fonts reduces performance, is invisible for SEO and creates a mess when considering translations or changes. The alternatives are to download the font to the user's computer or use a variety of available live online fonts like the Google font. Therefore sometimes it should be better to ask the designer to change the font to one of the online fonts.
Texture & shades
There is no doubt that using a picture simplifies the use of texture. In many cases, the image can be replaced with CSS3 code that supports a wide range of textures solutions, which more flexible and efficient, rather than pure CSS texture to multiple background images. It is important to raise the implications on browsers that do not support CSS3. Before giving up the proper pure CSS3 solution or starting to write patches for old browsers, it will be best to examine the possibility of bringing old browsers to a satisfactory visual look, even if not the accurate one.
Image of live text with texture
Same live text on old browser
Examples: ButtonBar: Css text shadows.
Online tool: Gradients.
Borders & rounded corners
Implementing round corners is one of the famous challenges that web developer had faced, so there is no surprise this problem has a rich supply of different solutions. In CSS3 it had finally came to the simple and smooth solution. But like textures, we have to consider the impact on older browsers. Describing the alternatives should be a post in itself.
It should be noted that often rounded corners are nice addition but not essential. A broad perspective will prefer to abandon the problematic browsers, and not put unnecessary complexity to the code.
Image of object with CSS rounded corners
Image of the same object on old browser
Online tool: Box-properties.
Shadows
Text shading was once one more key challenge, which often took the easy way using the image, but even this element had come to peace in CSS3. Of course, once again we need to consider if and how to support provide backwards compatibility.
Transforms & Animation
In contrast to all the previous sections, where the key was to offer alternatives to the designer's work, here the developer can excite the designer by offering him cool capabilities that come native with CSS3: Changing the size, space, color, location and much more. Knowledge about the various animation and transformation options will allow the developer to approach the designer with ideas that are native to the web and still have a huge impression on the user.
A cautious summary
Knowledge of the various alternative options is not sufficient in itself. Before the developer can offer alternatives, he needs to be familiar of the limitations of each of the options and present them loud and clearly. Only then can he offer alternatives without upsetting the system while revealing the limitations in the different browsers. But once his suggestion will be heard, his status will change from Transparent Technician to a key figure and his work will be much more effective, enriching and pleasurable.
