Educational websites usually contain many important articles grouped in numerous categories and sections. Every institution will have their own specific layout and character but some critical info is always similar such as teachers, dates, policies, open days and admissions. It is challenging but important to maintain flat structure of documents as much as possible in order to simplify the navigation and avoid multilevel menus that are problematic on devices with small screens.
The homepage hero or hero-slider and all critical info is visible without any scrolling.
Following screenshots are taken on iPhone XR (portrait), Windows 10 (HD1080). iOS screenshots have been taken in pixel-accurate mode therfore will appear larger.
Important feeds and CTA follow right after.
The whole website is designed with non-rectangular screens in mind, so it fits nicely edge-to-edge without compromising user interface on modern mobile phones.
Our people pages
Main page with the person’s profile expanded.
Teachers page with the person’s profile expanded.
People’s profiles can be inserted anywhere in the site’s content with a convenient short-code:
The embedded people’s profiles can be customised to show most relevant information first, such as contact details and different roles a person might have within an organisation.
The profile page shows all information.
The articles in the News feed are designed to conveniently fit in the viewports of common devices.
The most important bit – the title and excerpt from the content – can be viewed without scrolling even on short screens. The reveal more or continue reading buttons can be automatically generated depending on the length of the article. All images of the article are combined together to form a photo-gallery. A grid of thumbnails is displayed with the layout corresponding to the amount of images (max 5 images shown as thumbnails).
Following screenshots: iPad 5th gen (portrait), Windows 10 (HD720), iPhone XR (landscape).
Tapping on an image opens a responsive slideshow, with the colour of the background adjusting automatically to the presented images.
More about Adaptable background for images
The single News template utilises the post’s featured image as a header-banner.
The photo-gallery slider automatically adjusts to the screen size. It was achieved by dropping fixed content wrappers. For best compatibility with other themes there is no additional code in the post content. The maximum width of other elements, including text, is preserved and complexity of DOM greatly reduced with this approach.
Following screenshot: MacOS (27′, 2560×1440).
Making the sliders in-line rather than popping-up in e. g. lightbox ensures non-disrupted, seamless user experience.
Following there is a quick demo of the this gallery-slideshow in action on an iPad. The presented page contains over 150 high-resolution images grouped in multiple galleries.
Hero images and hero sliders are optimised to fit perfectly on a wide range of devices without pushing the important content placed below them away, off the screen. Each single hero image-set consists of up to 10 images cropped and resized to fit virtually any type of screen.
Following screenshots: iPhone XR (physical size accurate), iPad 5th gen, Windows 10 (1440×900)
Hero images can be also used in page content as a dividers or in a long, story-telling pages. They can be set to respond the screen height as well as width.
An alternative to a large hero-style header images the smaller, banner-style layout is also available.
More about creating a well-fitted hero images: How to design optimised hero modules
Special feeds consist of the content pulled from other sources and updated via cronjob.
A feed synced with an IMAP server:
A feed synced with FileMaker:
Next, breadcrumb navigation and the site footer
The Next navigation is a convenient way of joining pages that belong to the same section (have the same local navigation).
Breadcrumb navigation is also based on the local navigation menu object.
The footer consist of mini site map, configurable depending on context – on page-by-page or section basis.
News posts have an additional footer-like module containing related posts.