5 Essential Web Design Elements You Must Use

By 19-09-2013   BloggingWordPress

Here are some amazing futuristic web design elements you need to implement to your website theme today. You know our love for experimenting with theme design, and probably frequent site visitors do keep noticing changing design elements, and I often get emails helping make the design better.

So here are some cool design features which you too should ask your web designer to implement in your site web design today.

Semantic HTML5

html5

Its a good idea to switch to the futuristic HTML5 design elements which make coding not only easier, but with superior HTML5 support across all modern browsers, it is a good idea to upgrade your theme to HTML5. Many scripts now require HTML5 support and it is more flexible across html validators.

Almost all new  theme designs on any blogging platform are HTML5. Both the official WP themes Twenty Twelve and Twenty Thirteen are HTML5 based designs, and 2013 theme comes preinstalled with the latest WordPress version. Premium themes like Genesis and Thesis already have adopted HTML5. I have experimented with both themes and both are great.

But the key to a great custom HTML5 design is to upgrade your current HTML4 theme to HTML5. I found the HTML5 Blank code particularly useful to find WordPress theme design codes add custom changes to the QOT theme and create a basic semantic HTML5 markup. Do use the HTML5 validator to check code validity. Use web safe colors and web safe fonts to get a super fast site with colors independent of the browser.

How to recognize a HTML5 site? – view the page source code and the first line will be <!DOCTYPE html>

CSS3 Effects

CSS3CSS3 is the latest version of CSS and offers lots of cool new design elements which can make your design rock. Experimenting with all the new CSS3 elements like border, opacity, shadows, gradients can take you design to amazing new levels. Previously what was achieved by custom background images and hover over javacript effects can all be done by CSS3 to allow development of superfast websites.

Experiment with CSS3 and shock your visitors. See this list of CSS3 selectors and observe in which CSS version they were incorporated. Remember to use the CSS3 Validator to check CSS code. We use lots of CSS3, can you spot it?

Schema SEO

For any good SEO theme design, Schema implementation is no longer optional. Schema markup in your site design allows search engines to identify your site structure and design and identify and index relevant content as desired. Since every website has a different structure, this is the best and recommended way to make search engines love your site. Bloggers will like to add the Article Schema or its subset BlogPosting Schema  (we use this) to their websites. It looks complex, but if you study it carefully it is easy to implement.

Schema also allows you to do amazing things like marking up reviews, products, people etc. and they can appear with special listings in Google results. It is also useful to establish Google authorship. Do remember to check the rich snippets tool to check for correct schema implementation – you do not want to confuse search engines. The Google Structured data report will tell how well you implemented schema.

Responsive Bootstrap

We told you earlier that QOT is powered by Twitter Bootstrap design. The amazing new Bootstrap 3 code they released recently has made this even better with a superior highly custom responsive mobile first design. Creating rows and columns in your site design can be done in minutes and they seamlessly flow across a range of screen resolutions from mobile devices to large desktops. Do check our site on your mobile device – type QOT.CO.

It is an excellent way to start with a blank HTML5 code and add Bootstrap to convert it to a fast loading responsive design. With a significant  increase in your site visitors using mobile devices, a mobile responsive site design is absolutely essential. You can use the Bootstrap Responsive design tester to test your site design on different screen sizes. Do not forget to add responsive Adsense  code to engage all your visitors with ads.

Icon Font Awesome

The best way to add icons to design elements, icons to buttons, social media icons is not images anymore. Images slow site loading speeds and increase page sizes, while increasing HTTP requests as well. The best way to add hundreds of icons, in any size and color is to use a icon font and Font Awesome is the best for this.

Simple code changes can insert icons, which can then be styled by CSS as these icons are not images, but text! We heavily use Font awesome and all the icons, social media icons, arrow etc are fonts and not images. While I described social media icons with pure CSS, this is even better than that.

So I do hope you use these design elements in your site design and wow your visitors and search engines alike. Do comment what you use?

27 comments on “5 Essential Web Design Elements You Must Use

  1. Metz says:

    You should have a high-quality web design to attract followers and positive customers. I suggest “Icon Font Awesome” for the reason that if the Font is small and if it is difficult to read, then, they will lose interest in your page and probably, they will close the tab.
    Thanks to this. Enlightening, I must say!

    I found this post shared on Kingged.com, the Internet marketing social site, and I “kingged” it and left this comment.

  2. prem chandra says:

    this is a awesome post. Offering some important tips about design. so thank you very much for sharing this post.

  3. Animesh Roy says:

    Yes, you have pointed out some great and must needed web design element for next generation site design.

    Because due to the varieties of smart devices like smartphone, tablet, phablet etc, these are the most important points that every web designers or site owners should remember when they are designing, maintaining or updating their site.

  4. Shawn Gossman says:

    Is CSS3 that widely used yet though? I mean I know HTML5 is getting more popular but most designers I know are staying away from CSS3 until it gets used more widely…

    • P. Chandra says:

      All modern browsers now support CSS3. If you look around the code, all modern websites use some parts of CSS3.

  5. Jerralyn Tanoc says:

    These are all great! I definitely agree, these five are really essential for web design especially Schema SEO.

  6. Kalpesh P says:

    Dear Chandra,

    This is useful resource and quite useful. I’ve started using schema (hcard2). The web now is transforming with its expansion. I suggest to always be updated with latest trends making sure you are not left behind.

  7. Priyanka Jain says:

    thanks for these must have elements for web design. they can transform your boring website to the most attractive one.

  8. Palash says:

    This article is very good quality. the opportunity to join in the site thanks share it.

  9. Daring Niloy says:

    wow its really awesome. Great help for me……thanks for sharing with us. again thanks

  10. Essence says:

    Nice post! Things are now moving quickly on the web its good to be updated on the latest trends

Leave a Reply

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

*