HTMLcut blog

About PSD to HTML Conversion and More

HTML5/CSS3 Websites: To Code or Not To Code?

When is PSD to HTML5 CSS3 conversion suitable?You have decided to develop a new website or redesign an existing one. Today such a decision is accompanied with a new question though: To use or not to use HTML5/CSS3 when converting your PSD design into the markup?

When It Makes Sense to Develop a Website in HTML5/CSS3

At the moment the development of HTML5 and CSS3 is still in progress, and not all of their features are supported by browsers (both desktop and mobile ones). Nevertheless, HTML5 and CSS3 offer a lot of stunning possibilities which are difficult to resist.

Here are some situations when HTML5/CSS3 may be reasonable:

  • If the target audience of your website is geeks, web designers/developers and other tech savvy guys and gals, then HTML5/CSS3 may be quite appropriate because they respect design and coding novelties and prefer the most up-to-date browser versions.
  • If you work in the industries which value and expect a provider to have an image of a company with state-of-the-art products and services: high end consumer electronics, mobile gadgets, computer software, perhaps sportswear and sporting goods, etc.
  • If you are planning to exploit such features as custom web fonts (@font-face), media queries, geolocation identification through GPS, canvas (which allows drawing graphics on a web page using JavaScript), new audio/video tags, etc. However, make sure that your potential visitors (at least most of them) can take advantage of these website frills.
  • In other cases when you (or your development team) can correctly provide a reasonable and acceptable level of graceful degradation and cross-platformity if necessary.
  • HTML5 provides new possibilities for users with impediments. So, if it is your audience, and their browsers and devices can “understand” the used HTML5 tags, then they may gain from developing a HTML5/CSS3 markup too.
  • For your own portfolio. Check twice that it is correctly hand-coded, valid and cross-browser compatible because your portfolio should present the best of your best skills :).
  • For experiments and training. Afterward you can describe your new experience in your blog posts or guest articles – it is a hot topic now.

Also, websites developed in HTML5/CSS3 may attract additional attention and buzz in the social networks, blogs, and HTML5 and CSS3 galleries and contests. In other words, HTML5 can help you to gain a little more PR and SEO, in particular, a number of new inbound links, which are never superfluous and can’t hurt.

When and Why HTML5 and CSS3 Might Be Inappropriate

  • The development of HTML5 and CSS3 is not finished yet, and some features may be changed one day. As a result, your website functionality might be broken partly in the future. Weigh carefully whether it is critical for your website. A good list of the HTML5/CSS3 features which are ready for use is present on html5please.us.
  • As I’ve mentioned above, now HTML5 and CSS3 are supported only by the most modern versions of browsers though partly. XHTML, the previous version of the hypertext markup language standard, as well as such technologies as Flash don’t have such problems. So, once more: first of all analyze your target audience. If they don’t use the latest browser versions and, especially, if they don’t plan to update them in the near future, then HTML5 and CSS3 may be an undesirable option.
  • Not all new features are universal. For example, WebGL, which is used jointly with the HTML5 <canvas> tag to develop 3D graphics, is not enabled in mobile browsers. So, make sure that the goals of your website and real possibilities of the technology correspond to each other.
  • Due to the vendor wars HTML5 requires, for example, that video should be encoded in different formats such as WebM, Ogg Theora and H.264/MPEG4. Think thoroughly whether it is feasible and comfortable for you.
  • At the moment HTML5/CSS3 might be not the best choice when it comes to developing high-end entertainment, interactive video or gaming sites and web applications.
  • For quite a few web designers and developers HTML5 and CSS3 are still a new and experimental technology. Hence, if the project is time-sensitive, it may be reasonable to use accustomed languages, libraries, etc. which the development team is fluent in. Actually, in many cases up-to-date design, proper functionality, good usability and user experience are more important for your website success than coding languages which you use. And as HTML5 “promises” to support backwards compatibility and tolerance in error handling, your XHTML website will be displayed correctly in the era of HTML5 browsers too.
  • If your site or web application is security sensitive, then ascertain that developers are sufficiently experienced to provide the necessary level of security. Truth be told, this remark is general for all programming languages and techniques. But due to the fact that HTML5 is quite a recent phenomenon, you should pay particular attention to this aspect.

Sooner or later HTML5 and CSS3 will be the dominant website markup and styling standards. However, you can start using it right now. But do it with reasonable caution and understanding what is still experimental and what will correctly and effectively work for your target audience.

 

Comments (6)

  1. Pingback: HTML5/CSS3 Websites: To Code or Not To Code? | Design News

  2. Oh yes HTML5 and CSS3 are changing the way we build websites. But frontend coding is a must-know procedure – web designers won’t get anywhere without it.

    Design Tickle

  3. I’m sorry, but this isn’t even remotely accurate. You should always use html5 and css3 since they degrade gracefully if you code properly, providing a perfectly fine experience on older browsers, and allow for progressive enhancement on modern browsers.

    Of course there are always some experimental features that may or may not make the final cut, but the core set of features are well defined and aren’t going anywhere. The spec is quite a few years old, readily available, and easy to understand if one takes the time.

    Dan

    • I completely agree with you when you write “…if you code properly, providing a perfectly fine experience on older browsers, and allow for progressive enhancement on modern browsers.” The word “if” is a key one here. The last paragraph of our article tells absolutely the same.

      But if due to some reasons you CAN’T “provide a perfectly fine experience on older browsers” and devices, then you should be a little bit more careful. Moreover, remember that there are people and countries in which those “old” browsers are quite popular (see more in our article Cross-Browser PSD to HTML Conversion – How Compatible Should It Be With the Advent of Mobile Web?, especially the section before Conclusion). That is why we have written so often that it is very important to analyze the website target audience and understand who will develop the site. At the end of the day, we use HTML5 and CSS3 not only for the sake of HTML5/CSS3 but first of all to provide “a perfectly fine user experience.” So, all parts of the user experience “equation” should be taken into account.

  4. We need a lot more ingsihts like this!

    Nicu

  5. I tried HTML5 and CSS3. I found them very good. I like it!

    router wifi 3G

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>