EverWeb Widgets HTML5

Website Design Basics

HTML5 EverWeb Widgets

Website Types

Creating a website with EverWeb requires two versions of the website - one for tablet users and the other for smart phones.
There are very few reasons for justifying the extra time spent on a full width website for desktop browsers since the number of people using these is falling.
A growing percentage of potential website visitors don't even own a computer. Even those who do are more likely to prefer using a mobile device in the comfort of an easy chair rather than sitting at a desk.

Content Width

Gone are the days of the 1000px plus websites. Anything wider than 1054px is totally unsuitable and, in practice, the ideal width is much less.
Tablets like the iPad have a screen width of around 768px so the maximum fo this version of the site should be 800px since most users prefer to view web pages in Portrait mode. Any wider and the content will be squashed thus effecting visabilty and readability.
Smart phones such as the iPhone have a screen width of 320px in portrait mode so they require a page width of around that size. It's possible to go to a maximum of about 400px but, in this case, the font sizes need to be increased and user inputs increased from 30px square to 40px.

Fonts & Font Size

Unless you can host your own fonts, it's better to stick with those from the web safe list.
Using Google hosted fonts is not a sensible option for websites that will be downloaded over mobile networks with data limits. Be kind to your visitor's wallet!
The minimum font size for any website is 15px using a font like Helvetica and 16px is much better. This is not carved in stone and the font size will depend on the font family. 15px Verdana is roughly equal to 16px Helvetica.
As mentioned above, font size needs to be increased proportionally for mobile devices if the website page width is wider than the device's screen width.

Images

The only images on a modern website should be the actual photos that we look at. Lose the shape, shadow and reflection images and get rid of all that clip art stuff.
Images should be imported into the web design software at the exact size that they will be displayed. Any bigger slows the download speed and smaller loses image quality.
For smart phones, the images should be portrait by preference and a maximum of 320px wide x 480px high. 480px is too high if the image doesn't have an overlay caption since the visitor should always be able to see some descriptive text alongside the image.

Retina?

Adding an image twice the size (@2x) for retina devices is only worth while if you really want users of these devices to see every fine detail. Most surfers glance at an image and quickly move on and most won't stop to appreciate the extra quality as they have nothing to compare it with!
Retina is kind of dated now that we are able to use srcset to load images between 1X and 4x. Most modern browsers support srcset which means the browser will load a different image depending on the device viewport width.
Srcset is not quite as simple as this since the user agent (browser) can also choose an image based on size and pixel density to suit the user's screen's pixel density and zoom level. Confused yet?
If you are an artist or photographer you probably need to go back to school to learn about all this stuff. The rest of us can mostly ignore it all a go by the old adage of "if it looks right - it is right".

Important

Interesting and easily read text is the mainstay of a good website - suported by relevant images with a keyword descriptions for both the humans and the spiders.