HTML5 can be viewed with any device such as a desktop, laptop, tablet, or even a mobile. There are many reasons why it makes sense for you toconvert your PSD file into HTML5. HTML5 is the latest technology and can help you increase the visibility of your site to render correctly across all devices, it loads faster, is Search Engine Optimization friendly and has many more benefits compared to older HTML versions.
When converting your PSD into HTML5, you have many options to choose from on who to get help from. You can get a development company offshore, you can have your local development or design agency assist you and if your tech savvy enough, you can perhaps even try to do it yourself. We never recommend using a conversion software to help you as you will never be able to get pixel precision with your conversion. Designers and developers follow their own style and system according to their skills when slicing a PSD to HTML5. We have put together a list of 4 common mistakes that take place when converting your PSD into HTML5. Here they are below:
PSD to HTML5 Mistakes:
1. Do not slice in Photoshop - This is the old style of working. When you slice in Photoshop, you can directly convert it into the tabular HTML and in this HTML you will have many extra <tr> </tr> and <td> </td> inserted which will create browser compatibility issues. This is probably one of the most common mistakes when converting a PSD file into HTML5.
2. Avoid / in the unpaired tag - HTML5 doesn’t follow the container tag pattern. In HTML5, you do not need to close the unpaired/singular tag like </>.
For example in the <img> tag
<img src=“example.jpg” alt=“example” title=“example” />
In HTML5 you should only use
<img src=“example.jpg” alt=“example” title=“example” >
3. Avoid block tag in the inline tag - Inline tags are less effective tags comparatively to block tags, so do not use block tags in the inline tags. Block tags take their own space while inline tags do not.
This below is the wrong technique of coding
Use this coding instead of the above code
4. Use proper syntax tags - Always use correct tag names such as header or footer. The header tag should only be used to put the content related to the header section. Similarly, there is a section tag, which should only be used to put the content in columns and not be used anywhere in the page to just put the content.
These above mentioned mistakes are very common when you convert a PSD into HTML5. There are so many PSD conversion companies that provides PSD conversion services however only some of them know best practices when converting your PSD file into HTML5. We hope these above 4 common errors are helpful to some people when looking to see if their conversions are adhering to best practices. Ensure that any company you choose to help you with your PSD conversion has gone through the necessary due diligence and you are happy with the quality of their work. If you need any help with your PSD to HTML5 conversion or any other PSD conversion, feel free to reach out to the team at ConvertPSDfiles.
By: Yusuf JavedApril 4th, 2016