Thank you for visiting the Focus on Function Web Design website and printing this page.
I hope you'll visit online again soon at www.fofwebdesign.co.uk
Case Study: DHFS (Mobile News Portal)
Dronfield Henry Fanshawe School (DHFS) is an 11-18 Voluntary Controlled Comprehensive School in Derbyshire, UK. Originally founded in 1579, DHFS is now a leading Technology College, with state of the art learning technologies providing a stimulating learning environment.
The school was initially looking into the possibility of developing a 3rd party mobile app to feed the most important news and information to mobile devices. After researching multiple costly options, an alternative web-based solution was proposed that would save money and allow the school to keep developmental control of their own product. Visit the DHFS mobile news portal.
Key Features and Requirements
- An auto-feeding news and information portal, updated by the main school website
- A lightweight "mobile-friendly" design that adapts to different screen resolutions by;
- Switching from a horizontal menu bar to an off-canvas alternative on small screens
- Combining summaries with "read more" buttons to reveal longer articles on demand
- Using very few images and scripts to keep things as fast as possible on mobile devices
- A prioritised "traffic light" alert system to highlight critical updates on the home page
- A fast and easy editing facility to enable non-technical administration
Auto-Feeding News and Information Portal
The main feature of the DHFS news and information portal is that it is a totally dynamic site. It requires no manual input or updates, and instead, takes its content directly from the main school website via a series of XML RSS feeds. This makes for a very efficient system.
The existing RSS feeds already carry information to a variety of other online and digital mediums - please read the DHFS (Digital Signage) case study for more use cases.
Using PHP5's native SimpleXML extension, I separated Element Data, processed the text (adding formatting and various functions to manipulate the data) and parsed the output as HTML.
Lightweight "Mobile-Friendly" Design
Several considerations have been made to keep the site as lightweight and "mobile-friendly" as possible, the first of which relates to the use of CSS media queries to change the layout, wrap the menu and reduce font-sizes at certain screen-width breakpoints.
Additionally, once the screen-width reaches a minimum width, an alternative off-canvas menu replaces the horizontal menu bar, thus leaving more of the screen available for actual content.
To further help visitors find and move between relevant or useful content entries, "read more" buttons automatically divide and hide longer articles until a visitor wishes to reveal the rest of the story. Loading only short excerpts dramatically reduces initial screen content, aids "skimming" and allows for easier movement between all available news stories.
Lastly, only a very small amount of image sprites have been used to reduce HTTP requests and load-times, and CSS transforms replace the more traditional JavaScript approach for menu animations, which helps reduce script size and minimise visual stutters on less-powerful mobile devices.
Prioritised "Traffic Light" Alert System
The DHFS news and information portal is the first point of contact for parents, staff and students, so an automatic "traffic light" alert system is used on the home page to quickly highlight and draw attention to the most important updates.
The red (critical), amber (very important) and green (important) icons appear automatically, in accordance with their priority, when a message is registered in the back-end of the main website, and at the same time, the same message will display in a more highly styled format on the main website too. If no messages are found, the coloured alerts will automatically vanish.
Non-Technical Administration
It is sometimes necessary to post critical school closure messages, due to bad weather, or notifications of delayed student trip returns, outside of the usual school office hours.
To ensure that such messages can be published at any time of day, key staff have been empowered with an easy-to-use message editor in the form of my own Fast Warn software. With it they can type and format a critical or very important message using the WYSIWYG toolbar, and easily delete them when they are no longer required.
The admin panel itself it also mobile-friendly so urgent messages can be published via Android, Blackberry, iPhone or iPad from anywhere with internet connectivity.
Website Designs
Read the case studies
For a more in-depth look as some of the website projects I've worked on, please take a look at these case studies;
- DHFS (Digital Signage) case study
- DHFS (Mobile News Portal) case study
- HMS Garden Design case study
- JemCon.org case study
Read testimonials, reviews and feedback
You can find out what happy customers are saying about my work by reading their testimonials.
Contact me for prices, discuss a project, or ask a question
Are you ready to take the next step? Please contact me to chat about your website design project.