EverWeb Widgets HTML5

Page Layout

Page Layout Using HTML5 Widgets

html5 page layout

The main advantage to using these HTML5 elements for page content is that, once they are all created, they can be dragged around the page without destroying the sense of the HTML document from the point of view of the search engine spiders.
Each element can be viewed as a tiny web page in its own right since it contains related content which has a logical structure. Even if it is dragged out of place in the flow of the HTML doc, it still makes sense and will indexed properly by the search engines.
Using these elements can be a big time saver when designing a website since each type of block required can be pre styled on a template page and duplicated as required.

The trend in modern web design is to present information in well defined content blocks surrounded by white space. The design of these blocks is uniform throughout the site so that visitors can quickly find the information they need.
With the advent of mobile devices, content needs to be compact and informative and all the unnecessary stuff such as clip art and unrelated graphics need to be excluded.
Rookie web designers tend to overuse font styles and colors and seem to think they need to stuff the page with items that are mostly unrelated to the page's content. This practice just confuses the visitor. Most surfers will move on if the web page doesn't download in 3 seconds or less and they can't find the relevant information at a glance.

Setting Up Template Pages

Creating a website goes a lot faster if a basic page template is set up which can be duplicated every time a new page is required
Typically, this template would contain the header with website name h1 heading and navigation. The h2 page name should be placed at the top of the content area. It can also contain the footer but there is an obvious disadvantage to doing this from the point of view of maintaining the logical flow of the HTML document content.
Other template pages can be setup with the most used content blocks. These are pre styled with the default fonts, color, background color, box shadow and so on. When a particular content block is required it can be copied and pasted quickly to a new web page.
The following pages of this section illustrate how the same content blocks can be used to lay out a site for both computers/tablets and smart phones by simply adjusting their width and changing their position.
Using blocks like this also helps to create a clean, uniform look to the overall website design which will result in a lot better visitor experience.
Use blocks to group related content such as contact info. This is particularly important for a high street business where the name, street address and phone number should be really easy to find on every page of the site - not just the contact page.
All the different HTML5 element blocks are available in three different types - text with heading, text with heading wrapping an image and full width image with heading, alt text and descriptive text.