New Web Site Design and Build

h4lni

Hope 4 Life NI is a brand new charity working to improve mental health in Northern Ireland. As a charity that wanted to appeal to both supporters and those who would benefit from their services Hope 4 Life NI asked for a web site that would not appear too corporate.

The resulting design is simple to navigate and yet easy on the eye. The colours, softer edges and typefaces all contribute to a less formal design that will not intimidate, while still providing all the information that is needed.

Redesign of an Existing Web Site

GBTC

It was way back in 2008 that Grace Baptist Trust Corporation first came to me asking for a web site. The site was to do a couple of things: firstly to showcase the projects that GBTC had assisted with over the years, secondly it was to be a resource for those looking for advice in managing their church estate.

The original site has been added to through the years, both in terms of resources and in new projects, categorised by year. With the rapidly changing world of IT use, and particularly the prevalence of mobile devices it was time for a revamp so we chose a VPS from the best VPS hosting companies by Bit Pak and started working on the site. A brand new template was designed that would be a fresh look whilst maintaining the original logo. The home page was updated to add some chunky buttons to click through for the main items, with the rest of the navigation placed in the menu bar.

All the pages were then updated to use the new style, and where possible, better images were used to replace the smaller ones used in the original site. All in all, the new site contains the same information in a fresher, mobile friendly package that should enhance GBTC’s presence on the web and make it easier for churches to find the resources that they need.

When all you have is a hammer

hammer

The old adage is that when the only tool you have is a hammer, you see everything as a nail! The idea is that you tend to use the tools you have and tend to see everything you do in terms of the tool(s) you have available. Bring that principle into the 21st century and web design.

Graphic designers see everything as a design issue; coders break out their editor of choice to fix any problem; those using WordPress see plugins as the panacea to every problem. The reality is that web design is both complex and multi-faceted. It requires graphic design, coding and third party help to make a killer web site. The problems come when you only have a subset of the skills/tools required – then the natural inclination is to use what you have to fix what you need. But hammers tend to mangle screws and the wrong tool can at the least make your web site more cumbersome than it should, at worst it can make an unholy mess of what should be a sleek and elegant design both on the surface and under the hood.

What do we need?

The greatest requirement with web design is to have someone who understands all the methodologies required and can objectively decide what is the best tool for each part of the job. As with IT in general, web design is fragmenting into ever more niche disciplines – and experts in those disciplines can struggle to see the bigger picture.

Talking to a young graphic designer recently his inclination was to find a graphical tool within WordPress to do the bits he couldn’t. He was looking for an ecosystem within an ecosystem. The fact that these exist in abundance proves the point. The problem is that the all encompassing theme or plugin becomes the cuckoo in the nest that overtakes the WordPress framework. The downside is that there is still a huge amount of work involved in learning the ecosystem, with much less benefit in that investment.

My advice? Start by understanding HTML, CSS, server side coding and databases. Then a grasp of graphic design principles and the use of CMS ecosystems such as WordPress can be employed to build an effective web site. Understand the principles before choosing your tools.

Remember that clean code behind the scenes is as important as that slick interface that everyone can see.

So, keep that hammer to hand, but you might also like to consider acquiring some screwdrivers, spanners, torque wrenches etc., or at least be aware of what they are and what they can do for you…

Is Responsive Design the only game in town?

responsive design

There’s a growing trend in web design towards responsive design. Responsive design is the deliberate design and build of a web site to respond differently to different viewing devices. In other words, the web site will present itself differently depending on whether it is viewed on a mobile phone, tablet or desktop device. The design is done in such a way that the browser itself does the work. This is a great choice in many ways, particularly for smaller web sites. There is only one set of pages to maintain, which makes life simpler, but the styling behind the site actually addresses multiple view ports (the size of the window through which the site is viewed). As a result the underlying code can get a bit complex, even though it’s only in one set of files.

The alternative to responsive design is to detect the device accessing the site and present an alternative set of pages to smaller devices. This obviously will involve more work and more files as you are designing separately for different view ports. At first this may seem to be counter productive, but it all depends on the site content and original design.

Many sites are now quite old and large, and the work involved in redesigning the entire site to a responsive design could be prohibitive. It may well be that you only wish to present a select subset of pages to the mobile user, or even different pages geared towards mobile phone use (such as linking maps and phone numbers).

Many larger sites are also data driven and have a significant amount of back end code that can be easily leveraged to drive new mobile oriented pages with no more work involved than restyling the main pages.

For larger sites, and especially those that have an old design it would seem more productive to produce a subsetted separate site for mobile devices, always presenting the user with the option to use the ‘full fat’ site if they prefer. Responsive design is an elegant design option, particularly when designing from scratch. But depending on the size of the site and the legacy elements, responsive design is not yet the only game in town.