EverWeb Widgets

Responsive Scroll Sidebar

Sidebar layouts have always been popular. In HTML5, the <aside> element is designed for this purpose. It can be used for things like latest news, blog post links or links to other pages or articles.
The sidebar is a prominent feature in all those nasty Wordpress sites where it can stretch way longer down the page than the content section it is paired with.
This widget uses CSS to limit the height of the sidebar to that of the main content. All the extra content is hidden and can be scrolled as indicated by the icon in the sidebar's header.
When the page is viewed on a tablet in portrait mode or a mobile phone, the sidebar switches position to below the content area, extends to full height and can then be swiped.

Sidebar

Layout

A responsive layout should not be confused with a dynamic one.
A dynamic layout spreads the content out over the browser width no matter how wide it is.
A responsive layout has centered content with 100% width and a maximum width setting to control its spread.

More …

Images

Images for responsive web page layouts need to be optimised before importing into EverWeb for best result.
Even better is to make available a smaller sized image for those visitors who are using mobile devices like the iPad and iPhone

Info

Media Queries

Many responsive content blocks consist of items which sit side by side when viewed on wider screens. On smaller devices, they separate and align themselves vertically. This is achieved by using CSS media queries

More …

Testing

Responsive layouts need to be thoutoughly tested for their performance on the various device types.
Although all the major browsers have a "Responsive Design Mode" this is only usefull for rough testing.
It is essential for anybody contemplting a responsive website to download, install and learn how to use the iOS Simulator. This is free from Apple, is easy to use and allows testing in all the current versions of iPads and iPhones.

Test Info

Main Section

The main section has an h1 heading, an optional image with alt text and a text block. The image is centered and has adjustable percentage width. The main section can have its font color, background and border color different from that of the sidebar.
The total height of the item is defined by the amount of content in the main section. There is a control for setting the maximum width and the vertical spacing from the items above and below it.

Sidebar

The sidebar has a contrasting header with scroll icons and up to 48 items with heading, text and a link.
There is a slider to adjust its width relative to the main section when the two items sit side by side when viewed on computers and tablets in landscape mode. On tablets in portrait mode and mobile phones, the sidebar slides below the main section.
Scroll
Up to 48 items can be inserted into the sidebar and, when these exceed the height of the main section, they are hidden and revealed on scroll.
The sidebar is an HTML5 aside element which contains the article elements which make up the content. This is wrapped in a container which is given absoute positioning to force it to be confined to the height of the main section. The aside is given 100% height with the overflow set to scroll.
When the item is viewed on a tablet in portrait mode or a mobile phone, the sidebar items become full width and stack themselves vertically and their container expands to full height.
Styles
The sidebar can have its own border and a line spacer between each item. The CTA style link tab can have a border and a hover color.