Poster

The ThemeKit Expo Poster is a hero item with a few differences from the norm. The logo/link can be either an image or entered as text.
The main heading is poster style with text stroke and a background with an opacity slider.
Images
The images are inserted in three sizes for the various devices and have an alt text attribute for enter keywordds for the search engines and screen readers.
The image has a slider to reduce its opacity to allow the overlay items to show clearly.
The otpional navigation is horizontal with a style to match the main headig,

Toolbar

It is essential to have contact info in view immediately on page load - especially on the home page.
The toolbar has an info link which can be switched to a different icon, a phone tab which switches to a phone call function and a spam protected email function.
In this case the SVG has been switched and the link returns the visitor to the home page.
The action tabs have a tooltip which appears on hover on computers. On touch devices they will appear on tap and close when the device screen is touched anywhere else.
The toolbar has a control to increase the z-index if necessary so that the tooltips show above the item above the bar.

Content Fade In

Adding a fade in animation to the page on load isn't just there to produce a smooth, professional entrance to the web page. Its primary role is to provide a little time for the in view images to load and is an important addition for any media rich website.

Responsive Text

There really doesn't seem to much to learn about website text although there are a number of important guidelines.
Apart from the main h1 heading all the text should use the same font. Serif fonts should be avoided and it is easier on the eye if the text is black with a slightly off white background or white or off white text on a black backround.
Avoid using a light colored or white text with a light background. One of the worst is white text on a light blue background which is guarenteed to cause eyestrain!
Bold Italic
Avoid using bold or italic text and never use letter spacing. About 20% of a website's visitors will have reading difficulties such as dyslexia and using these techniques shows that the designer is ignorant of these problems.
The ThemeKit Expo Text widgets has the option to add a list …

• Up to 48 list items
• Eight list style types
• Adjustable list inset
• Controls for font size and line height
• Adjustable list item spacing

Google Fonts
Many Google hosted fonts that would be used for a heading don't have bold and/or italic variations.
The font used on this web page is the Google hosted Stint Ultra Expanded. To make it more prominent a 1px text shadow is added along with 1px of letter spacing to compensate.
Content Width
Content width text like this block of text should be no wider than 960px. Any longer makes it more difficult for the eye to jump from the end od a line to the beginning of the next.

Footer Bar

A more appropriate item to finish off the page content is a bar which doesn't take up much space and is a replacement for those hideous footers with all that useless and hard to find info which mobile device users destest.

• Info link with the option to change the icon to any other one
• Optional phone number on hover & phone function on mobile phones
• Copyright info on hover with auto year update
• Spam protected email function
• Smooth scroll to the top
• Hover tap to hide phone and copyright on mobile devices

Footer

If a client really wants a footer,follow the link below to see the Expo Footer widget …