Keerim Design likes to show development work by using its own site. Recently we have spent some time experimenting with a number of new approaches to see which work and which don’t
It was decided to produce a site that took on many of the aspects of the popular Bootstrap sites, but was simpler to develop on Drupal and would be easier to content manage. We see little value in websites for small businesses and schools if the site can’t be updated quickly, efficiently and cheaply.
The other thing that we wanted to do was to get away from classic ‘C’ shaped web model, which means Header, Sidebar and Footer. The problem is that for a user with a large screen width without a sidebar the line length can become impossibly long to read. You are looking at the end result, so this is how it was done.
The Header is minimal and ‘Sticky’, which means that the logo link and menu are always available as the user scrolls. On a PC the menu is a classic set of inline links that can have dropdowns or megamenus if you have more than the simple four links that we have used. We have always used this menu on and iPad with dropdown menu on Phones and Tablets. Having had a look and the White House site, White House website, we concluded that it’s time to start regarding an iPad as a mobile device, not a computer. In our case the menu is just a dropdown on an iPad, but with more menu items it can be turned into a very effective ‘accordion’ menu.
The Footer is pretty conventional, with contact details, social media links and a few quick links. What we have done is to include the very lightweight ‘Add to Any’ social media share links. These are unobtrusive, quick and don’t come with any hidden advertising, trackers or malware. You don’t even have to sign up to an account, it just works.
We have coped with the line length problem by having one column text for smaller devices and two column text for iPads and PCs.
The more we do this work the more we believe that the Home Page should be bold, attractive and contains everything the user needs to get an impression of what the site is about. To this end we have gone for a huge, full-width, animated banner. Not that long ago this would have been thought to be madness, but most people are now used to seeing a huge image or video presented immediately. We can do many things in this banner space including incorporating videos and contact forms.
The content text is still important for Search Engines and should always be included.
There are two regions with background images that have been added as ‘Parallax’ images. It’s a very simple process where as the user scrolls the images stay put and it looks as though the content is moving above the background. Some people like it and some don’t, but it’s really just the web moving towards a more visual approach.
Within the bands there are two different approaches: one is four static ‘teasers’ of what we do and the other is two carousels with teasers that link to external websites or internally to other pages. On a normal website we would advocate using external links, but it’s the ony way that we can show what we do!
The other band contains a short statement and a contact form. The contact form is protected in a number of ways, including HoneyPot that stops all automated spam posts and a mechanism that presents users clicking the submit button several times.
You can have as many bands as you like.
Conventional wisdom says that the page is too big, too ‘heavy’ and will be very slow. It isn’t and with the increase in broadband speeds and 4G on mobiles we are happy enough with it.
Our Work Page
There are five pages in this section. Instead of using a conventional dropdown menu we have used five simple buttons that present reasonably on all devices. Two clicks get you to any page in this section. This is the ‘wordy’ bit for anyone who wishes to drill down a little further into what we do. There is a lot of information in there including our social media services and how we handle video for clients.
This is just a bit of showing off, not what we do, but the presentation. Each little block is a piece of work that has been undertaken. Initially all blocks are shown and, on a PC presented in three columns. They are in random order and are pulled together using a technique called ‘Masonry’. The buttons are simple filters that narrow down a search for separate categories. If you wish the user can be offered the opportunity to sort any of the categories into order, which we have not done here.
What’s the advantage? It’s simple, the user never comes off the page. In many systems a new page is loaded, but here in a small spin of a wheel the presentation is complete. It’s very easy to maintain and develop as well.
The News Page is a series of teasers extracted from Blog and News items and presented in descending date order. There are six filters that allow the user to narrow down what might be looked at. In each case the first five teasers are presented. We tried very hard to get ‘infinite scroll’ working, which means that when the user scrolls down to the fifth teaser the next five automatically appear. This would be similar to Twitter. Unfortunately this won’t work at this time because there is a nasty clash in the code. While waiting for a solution the user is presented with a ‘Load More’ button that seems to be a reasonable compromise. Arguably this is a better system
The news teasers link to individual pages like in any News/Blog system, but we have the advantage that it can be designed to suit your needs.
We like it and we hope that people will like the simple, clean and attractive presentation. No designers have been involved in the development of this site. We are hopeful when designers are let loose on it the outcomes will be spectacular.
The site has been developed on Drupal 7 and we firmly believe that it contains the best of what is available at the moment: a modern approach, a stable content management platform, open source and infinitely designable.
There are few bits that need tidying up, which we will do over the next few days or weeks. It is unlikely that we will develop an update to this site and we are looking to the release of Drupal 8 and the exciting possibilities it offers. That will be the next site.