Posts Tagged ‘Front End Developer’

10 PSD to Responsive Tips that Every Front End Developer Needs to Know

April 10th, 2015

Responsive design has become the latest trend-setter in the web development industry. With the dominance of HTML5 and a new level of Cascading Style Sheets – CSS3, website developers emphasize on making a responsive website using the ‘Media Queries’. However, sending files in for PSD to HTML conversion can have a big impact on how accurately the designs will be converted without any bugs.

In the PSD to HTML conversion industry, there are numerous Photoshop designs. Some of them are very easy to work with but some have increased the standard PSD to HTML production time. Not every Photoshop designer is worth the money.

Here are some Photoshop tips that every front end developer needs to know for time and cost-effective project completion.

Leave the Layers Intact

In order to keep the file size smaller, many designers merge the layers. This technique works well in print design, but in PSD to HTML conversion, the developer needs to have all ”the effects” such as graphics, textual or adjustment layers intact. This is crucial because all these attributes carry important information for the whole website development, such as font families, font sizes, colors, line heights, text transformations, etc.

Tip: Make sure, while delivering the design files, you leave your layers intact, in order to preserve all the vital information for developers.

Organize your PSD

Well-structured and organized PSD files can be easily converted to HTML. Wondering Why? Because, nicely organized PSD files are highly beneficial for both a coder and layout designer’s perspective. Productivity increases leaps and bounds if files are structured coherently.

Tip: Always keep the PSD files neat, tidy and highly organized with relevant names. It will surely keep productivity high and expenses low.

Keep Design Consistent

Always try to keep design elements consistent across the layouts of your website, including your buttons, both header and footer, rounded boxes etc. Any exceptions will undoubtedly lead to extra time to convert the HTML or CSS code, and will eventually increase the development time.

Tip: Keep your designs consistent to make them look professional and reduce the development time.

Place Elements on Grid

Design grid is a vertical set of guidelines that makes your further job much easier. Utilizing the grid allows the designers to place the much desired website elements in proportional and balanced space and get the proper feel of design. Off grid element placement establishes extra steps in PSD to HTML conversion.

Tip: If you use grid for design, make sure you keep the elements inside the grid and aligned (even if you aren’t working in the explicit grid).

Prepare Rollovers

When preparing your design, you must focus on the functionality of links and all call to action elements. It has become a part of the standard practice to add rollover states to the elements such as buttons and images, in order to distinguish them among the action states.

Tip: Make sure you don’t forget to design the rollovers and define time, if you don’t want to spend more time creating them later when you start working with live templates – this will increase your production time.

Provide Consistent Hands-off Materials

The hands-off documents like: PSD, fonts, JPG previews and even PDF specification write-ups, which are delivered to PSD to HTML conversion team, should contain final versions of the designer work.

Tip: Make sure you keep all hands-off assets consistent, including font sizes, font families and design elements.

Consider Fonts Rendering Differences

When using modern fonts, consider the differences from browser to browser. Font anti-aliasing and tracking may be displayed differently in Photoshop and in the browsers.

Tip: If you are concerned about how your font may seem on live website, check it out in various browsers before you opt for one specific.

Avoid using Blending Modes

Remember, blend modes used in Photoshop are nearly impossible to recreate in CSS. They are meant to produce amazing effects and shorten the time of image processing. However, eventually they don’t get the desired results. Thus, they are good to use for preview, not for PSD to HTML conversion.

Tip: Your PSD files should be and use just normal blending mode.

Consider Content Flexibility

Some designs allow only a fixed amount of text space which doesn’t allow adding more text. Sometimes it might work, but in most cases you need to add more text on the live website. So, always think about content flexibility.

Tip: Always keep content flexibility factor in mind and assume the possibility of increasing or decreasing the amount of text.

Design Layout for Common Resolution

Common browser resolution is a very specific subject, however, with responsive approach the screen resolution becomes less important. But, if your design isn’t responsive than the most common screen resolution is 1366 x 768px.

Tip: If your design is not responsive, make sure you pay additional attention to the screen resolution and do not make it wider than 1300px.

You must follow all the above mentioned PSD to HTML conversion tips to build as a great HTML developer.