5 Essential Web Design Elements You Must Use

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


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?

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.