Responsive Design

Building web content for cell phones and other mobile devices presents a few problems. The screens are much smaller so viewing full web pages can make the text too small to read. On a PC you can "hover" the cursor over a menu to make it expand, but you can't hover on a touch screen - you are either touching it, or not. In the early days of smart phones some websites provided separate mobile versions of their content that were optimized for cell phones. This increased the costs of creating and maintaining content as every page had to be created twice in the two different forms.

Today's best practice is to create a "responsive" website. This is coded so that as the screen size varies, the content automatically is reformatted, ensuring it is usable on almost any device. If you are viewing this site on a PC you can try reducing the size of the browser window, and watch the content change.

 

Responsive design elements allow us total control over how a page changes with the screen size. The menu can be changed from a horizontal bar of page links on a large screen to a "hamburger" menu on a small screen that opens or slides into view when the user taps on the menu icon. We can specify that content will appear in 3 or 4 columns on a wide screen, and 1 or 2 columns on a small screen. It is also possible to hide specific content on large or small screens. This is useful to remove less critical elements of a site from a mobile site where screen space is at a premium, so that the user is focused on the most important parts.

Content Management Systems

At its simplest a website can be one or more simple HTML files. As the number of pages on a website grows it can become time consuming to make changes to the site. For example a change to the menu in the header of the site, or a company telephone number in the footer of the site needs to be made to every single page. Pages need to be updated by someone with web development knowledge, and its difficult to co-ordinate changes if multiple people are updating the site.

For this reason most major websites use a "Content Management System" or "CMS". This enables web developers to set up a framework for the site with templates that control the layout and appearance of pages. Those adding or editing content don't need to have web development skills - changes can be made by accessing a password-protected control panel. Changes to the header/footer, menu, and other elements common to multiple pages can be made once to the template, but update every page that uses that template.

Many web developers use Wordpress as a CMS. However it was originally designed as a blogging platform, and it also suffers from frequent security issues. We've chosen to use Umbraco to handle content management for our websites. It was designed specifically as a CMS system, can run anything from the smallest websites right up to massive sites for large corporations and has a proven security record. It is used by Microsoft, Heinz, and other major enterprises, as well as thousands of much smaller businesses.

Once we've set up the software and taken care of creating templates that control the design of the site, adding content is done via some simple forms. Website editors can easily add images and headings, format text, and structure pages into columns. Our customers can add and edit content as often as they like, saving their time and money.

Its possible to set up multiple users and give them different permissions. A large organization might set up copywriters who can add content, but not publish it, and editors who can review that content and publish it.

If you'd like to find out more about our web design services, or how a content management system can help your website, drop us a line on the form below, or give us a call.