E-commerce & Internet Marketing Blog: Tips and tricks in internet marketing. Latest trends in web design.

Correct UI/UX user interface/user experience development in HTML5, CSS and jQuery

I love beautiful and full of art design. I love working with designer and customer pitching ideas about whole concept and different elements in design to make it a piece of art, yet user friendly and goal orientated. As I’m programmer, I also love to come up with innovative solutions in terms of programming the functionality once the design is ready. But in the middle there is a important phase in web development: design (Photoshop PSD and vector graphic) files must be “cut” into HTML code, styled with CSS and made dynamic with JavaScript. That’s the job that must be done on most projects and often people want to cut in cost here but correct but that may result in bigger investments in future stages. In this blog post I want to explain what means correct HTML.

HTML5 has 28 additional tags and some new techniques so it should be used today. Also, all browsers support it: Chrome, Firefox and Safari. For Internet Explorer 7 and 8 (IE 6, too) you can just add  to the head following code and they’ll be also HTML5 browsers:

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

Cross-browser compatible. Although we hate Internet Explorer the website must look like the PSD file from designer unless designer haven’t used web safe fonts with cool shaddows, Photoshop sharp, shaddow etc. effects as various browsers deal with font rendering differently.

Mobile version of the website is something that still most people leave for future to cut costs but the future is today! How many of your friends and business partners use mobile devices? Android and iOS users’ percentages grow in all websites’ Google Analytics every day!

Some technical must be’s:

  • Always jQuery not MooTools or any other smaller JavaScript frameworks. jQuery is most beautiful and is served from Google! Only single JS file is loaded.
  • Code must be UTF8 and W3C valid HTML5 or HTML 4.01 Strict. Only very out of a box JavaSctipt IDs get in conflict. W3C validness makes it more likely to appear in same way in all browsers and it’s also SEO friendly. Of course beautiful HTML is anyway SEO friendly!
  • Only single CSS file! Different media types can be declared in one stylesheet.
  • Inside the content areas there shouldn’t be any <div> tags. In CSS must be defined the style of titles (h1, h2, h3,…), <p> paragrapgs, tables and images. Paragraphs can have classes if needed.
  • All menus must be with clean <ul>, <li> tags.
  • Use <dl>, <dt> and <dd> tags for lists where needed.
  • For quotes use <q> or <blockquote>.
  • Always <em> and <strong> for emphasis – don’t make text bold or italic instead.
  • Use semantic markup.

Finally one very useful link: ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10′s of hours on your next web project.

  • Hello, after reading this awesome paragraph i am too glad
    to share my knowledge here with colleagues.

You can follow any responses to this entry through the RSS 2.0 feed.