EverWeb ThemeKit
Responsive Web Design
Media
Image and video files that are not resized and optimised for the web are the main cause of poor download performance.
Most images need to be inserted in two sizes for large screens and smaller mobile devices. They need to be properly resized and optimised and - where appropriate - lazy loaded.
Video files need to be as small as possible since their file size can be huge. Content width video players should have an HD and SD file to suit all devices.
Hosted video such as Vimeo and YouTube are best displayed in and - lazy loaded in - a lightbox. Otherwise they will adversely effect the page download time.
All video files should be either prevented from downloading until the visitor actually plays them or lazy loaded.
Most of the widgets available to EverWeb users are not suitable for responsive pages and will result in a poor page score.
Test pages using Google's PageSpeed Insights and aim for a score of over 90 for both desktop and mobile browsers.
Sidebar Info Links
Responsive Side Scroller
A sidebar can be really usefull for displaying links to other topics, items relating to the main topic, advertising or links to reviews/blog posts etc.
The most common type of sidebar is seen on the gazillions of Wordpress sites which either stretch way down the page below the content or stop short leaving an embarassing gap.
The sidebar is used here for info and links to other pages of this site.
Sidebar Design
The grid has a two column layout - one for the main article and the other for the <aside> element. The main article is responsive and creates the height of the item and the sidebar has a fixed width - in this case 300px.
The sidebar can have any amount of content which will fill the height of the grid element and any overflow will appear on scroll.
An extra professional touch is added in the form of a sticky header with a scroll down chevron icon.
The block style links help to keep the sidebar visually uniform and the smooth hover animation adds one of these little details that distinguish a better class of web page design.
Phone Simulator
The greater proportion of website visitors will be using mobile devices. Set up the Phone Simulator widget in the EverWeb project and use it to quickly test pages in portrait and landscape view before publishing to the server.
Navigation
Update NowWeb design has change a lot recently and most existing navigation menus are not suitable for responsive websites.
Find out more …
Page Speed
Download EfficiencyNot just web page download time has to be minimised but also the time to become interactive on mobile devices.
Find out how …
Images & Video
Lazy LoadingImage display items and video players must insert a smaller file for mobile devices and have a lazy loading function.
Find out why …
Copyright Notice
While just about every website has a footer there is no rule that says it must have one. Many websites have a large footer jam packed with info that is hard to find and read and holds no interest for most visitors. Having a footer like that on a webpage that will be viewed on mobile phones is unnecessary and a complete waste of space.
Copyright
The Responsive Copyright Noticer provides a compact replacement for the footer.
The widget includes a function to fade in the page content in a smooth and professional manner. The animation time is adjustable to give media content a little extra time to load.
Menu