This HTML5 article has an optional image with alt text, a heading, text and an option link.
Sidebar
The sidebar is an HTML5 <aside> element. The sidebar width is fixed and can be adjusted to suit the amount of content.
Container Styles
The grid layout has controls for the grid gap and padding. The containers can have a border and/or a box shadow. When both are present the bottom border can be removed for a more professional appearance.
The Responsive List widget has options for a main heading and text block before the list and another heading, text and an optional link below the text.
A list cannot have text links when used on a responsibe web page since touch device links must have a clear area of at least 44px. Follow the link below to see a list with links suitable for responsive pages …
Link ListThe article element is probably the most used item so it should have options for all these little details that separate professional grade from a standard website design.
Layout
The article has a two column grid layout with adjustable relative column widths. The text can be above or below the image on screen widths less than the breakpoint.
The Responsive Header widget has an option for an icon or logo to the left with a centered heading which can be an h1, h2 or h3.
Styles
The header text can be styled with a text shadow if required which will require the use of the letter spacing control.
The font can be Google hosted with a web safe fallback and the font size can be reduced for mobile phones.
The background can be a solid color or a two color gradient with switchable direction.
Link
The logo or the SVG icon can be configured as an internal link which would normally be to the home page.
Over a decade ago headings were usually required to be h1 through h6. Using HTML5 only requires h1 through h3,
[1] h1 is used for the Main heading which usually displays the website name.
[2] h2 is used for the page name which should give an indication of the page content type.
[3] h3 is used for section headings to help visitors to quickly find the content they are searching for.
HTML5 Containers
HTML5 uses semantic containers to help the search engines index the content.
The main containers are header, section, article, figure and footer.
EverWeb provides a header and footer in the responsive template but these are not much use when creating a more advanced page design using widgets.
EverWeb wraps each item in a section element so individual widgets never use the HTML5 <section> in their code.
Search engines regard each HTML5 container as a "mini page" so the first heading in the container is always an h1.
Modern web design embraces breaking away from tight rows of boxes by using column and horizontal spacing. This technique has proven to be effective for making content easier to find and focus on.
Spacer Widget
This has adjustable height and a solid or reversable gradient background, The separator line uses a CSS ::after selector to create a center line.
The line has controls for percentage width, height, color and style. The styles are dashed, dotted, double or solid.
Note that a double line needs a height of at least 4px.
A fast downloading page with a smooth fade in gives a web page that extra upmarket touch. The Content Fade In widget has adjustable height for use as a spacer and a solid or two color gradient background.
Animation
The fade in gives items like a hero image time to load. The animation time of the fade in can be adjusted in milliseconds.
Most footers are unsuitable for responsive web pages. They waste a huge amount of space when viewed on a smart phone and the info is stuffed in making it difficult to find the essential contact info.
The ThemeKit RWD Footer widget has a three column grid layout with all the required items in a compact size.
The first column has a a text block, the next one has navigation links and the last column has a smooth scroll to the top function, the optional phone number/phone call function and a spam protected email function.
The copyright notice spans all the columns at the bottom and has the option to insert the copyright year automatically and update it annually.
Footer Bar
For those who appreciate that the footer is a total waste of space and has no place in a page that will be displayed on mobile phones check out the Footer Bar …
