Adaptive Content

Peek behind the scenes. See how this page was tailored for you.

Anatomy of a Modern Webpage

Flat design, sticky scrollers, responsive, adaptive, accessibility, W3C validation, calls-to-action.  What does it all mean? 

Flat Design

Flat design is the current trend in web pages. Typically it means a web page which uses fairly simple geometric shapes, solid colours and few if any visual trimmings such as drop shadows, reflections, gradations, rounded corners and so on.  Visual appeal is usually enhanced by a "clean" look and carefully considered typography.

Responsive Design

A site which uses a responsive design will automatically change the layout of a page depending on the size of the browser window being used to view the site.  Try resizing this page and see how certain elements move around and rescale themselves.  This avoids the need for excessive horizontal scrolling when using a smaller window (or a device, like a mobile phone or iPad which has a smaller screen), ensures text remains legible and functionality is retained. Contrast this with the other approach of supporting small screen mobile devices of using a specific design for each size of device.  

Adaptive Content

Adaptive content takes responsive design one step further and changes the layout more substantially when accessed from a mobile device - rather than just flowing elements down the page, the order of them can be changed to make sure that the user sees what you want them to see.  The functionality and content can even be adapted to suit a mobile user.

Accessibility

Make your website accessible means making it usable by those with disabilities, such as vision impairment, motor control problems.  It's not just a good idea to help appeal to the broadest possible audience, in the EU it's a legal requirement.   Failure to make your site usable to someone with a disability can be seen as discrimination.  

w3C Validation

There are various validation standards but W3c (the World Wide Web Consortium) is the most common. Web browsers are usually pretty relaxed about the content they display and even if you don't use properly structured HTML most of them will display what you intended.  To comply with the W3C standards is to use well structured HTML without any invalid parts.  Compliance is a good idea because it helps ensure that your page looks right in older, current and future web browsers.  It's also essential for accessibility, since devices like screen readers (where your visual page is read out loud for the visually impaired) rely on well structured HTML. This site's pages pass the strict W3C standards.

Sticky Scrollers

As you scroll down this page, the blue menu bar remains visible at the top of the screen.  This sticky element aids user navigation, because it's always present. 

Home Link

People are used to using the website or company logo as a link to the website's homepage.  It's typically positioned near the top of each page, most often aligned to the left or the right of the page.

Site Search

The site search box is most often found in the top right corner of the screen, though any extreme position (e.g. top left, bottom centre) might work too.

Contact Link

Almost regardless of the nature of your site, you want people to be able to get in touch with you easily. Nobody likes having to hunt around a website for this most basic of functions.  This site uses a prominent Contact Us link which is styled in a contrasting colour to help it stand out.  It's on the sticky menu bar so it's always present on the page no matter how far the user has scrolled.

Scroll Menu

A scroll menu consists of a number of jump links (links which take you down the current page rather than to a new one) which provide visual feedback as to how far down the current page you've scrolled.  They provide an indicator to the user of how much more is to come, as well as feedback as to where someone is in the overall context of the page.

Breadcrumb 

A breadcrumb, as seen on this page beneath the blue menu bar, is a visual representation of the current page within the context of the site as a whole.  We provide a link to the Homepage, a link to the current section or category as well as the name of the current page.  As with a scroll menu, it servers a role of both aiding navigation and helping the user understand the context of what they're reading.  It's consistent placement helps it serve this purpose.

Typography

As explained in the section above on Flat Design, elegant typography helps the page have a clean, professional, considered look.  The selection of the font (in this case a fine, simple looking font which is both aesthetically pleasing at a glance and also easy to read) is the first element of the typography, but must be considered alongside the type weight (the thickness of the strokes), the type size, the width of each line and the spacing, both between each letter horizontally and between each line vertically.  The ratio of type size to line height is particularly important for pleasing, easy to read text.  

Resizing Image

A current vogue is to have a large image which completely fills the available space, usually with text overlaid on top.  Resizing the browser window resizes the image.  The key to success here is choosing the right image: one that works well at all sizes, compliments the content and is visually appealing.  Additionally you need to verify that any overlaid text still sits in an appropriate part of the image as the image resizes.

Calls to Action

A call to action on a website is something (hopefully) prominent to encourage the user to engage further - this might be a link to follow to read more, a sign up button to encourage someone to join your community, an "add to basket" button on an e-commerce site or a contact us button, as see prominently on this page.  Tests show that if someone gets to the bottom of a page and there are no relevant links to follow they are significantly more likely to just leave the site.

Parallax Scrolling

This is not used on this site, but it is a technique where different elements of a page (e.g. multiple images, headings, etc.) scroll at different speeds.  This gives rise to a simulated parallax effect, i.e. that two things at different distances from the viewer relate to one another differently depending on the viewpoint.  It can be an engaging effect, but some people can find it somewhat annoying, which is why we've chosen not to use it here!

Our Kit Content Management System supports all these features, and more.
Tagged: content | cms | design | html | wysiwyg