Aim’s Leadership Enabler™ builds your distinctive leadership culture and business competence through experiential work-place learning. We partner with you to cultivate vigorous individuals and teams within a sustainable organisation.
Aim had a complete design prepared in a Photoshop document, along with brief guidelines on animated elements for the front page. They wanted a site where they could update content themselves as needed. We decided to use WordPress with a custom built theme. We discussed how we could adapt the existing static design for smaller screens and added this using media queries.
The subtle home page animations were built using progressive enhancement: the more advanced a user’s device, the more enhanced the experience is delivered. Users whose devices are without CSS3 or Javascript see all the content; devices with CSS3 also see the animation; devices with JavaScript enabled also see the show / hide animation.
XHOSA FUNDIS CC is a fully accredited provider offering Xhosa Language Courses to the public (individuals and groups), schools and companies.
Xhosa Fundis were unhappy with their current CMS and wanted to refresh to the look of their site. We helped them move across to WordPress, and custom coded a WordPress Theme that kept the basic flavour of the existing site but added some new features.
The biggest changes we made were:
a new smaller screen layout using media queries for a better experience on smaller screens (fluid content, flexible images, adjusted navigation);
added a more friendly feel by adjusting colour scheme and using Proxima Nova Soft served from Naga’s Typekit account;
content review and improvement of HTML usage, resulting in improved readability and structure;
used Gravity Forms for an improved “Materials for Sale” page, with items marked up in hproduct microformat;
adding contact info in the footer of every page, marked up in hcard format.
Saffron House is a photography and design company based in Cape Town with almost ten years combined experience in wedding photography and portraiture as well as graphic design.
Installation and configuration of WordPress
Development of custom WordPress Theme to match client’s design
Coded in HTML5 and uses CSS3 features
Responsive layout design: layout adapts to viewing screen size, including mobile devices
Balkan makes a fairly convincing argument about the ease and automation of upgrading browsers, but focuses on designing/developing for browsers. I’m more convinced, and agree, with Allsopp that sites are for people, not for browsers. I think he nails it with:
And however ideal it might be that our users use only the most up to date version of a browser, it simply isn’t, and never will be, a practical reality.
Some users don’t, can’t, or won’t upgrade their browser. Some aren’t aware that there’s a choice available.
Balkan’s article also seems to be fairly desktop-focused. Mobile access via feature phones in Africa is booming. These users certainly aren’t using the latest and greatest browsers, but that doesn’t mean we shouldn’t consider them in the design and development of our sites.
Aaron Gustafson wrote a well-reasoned post about Progressive Enhancement vs. Hardboiled Design yesterday. In it he describes Progressive Enhancement more eloquently than I can (although he also uses a house analogy), and explains how it’s not at odds with the “Use the latest and greatest technology right now” approach that Hardboiled Web Design champions. Being a big fan of both approaches, this made me very happy. There’s no reason not to use the latest tech, as long as it’s applied in a stepped, responsible, manner.
Progressive Enhancement is all the more important in the industry at the moment because of the meteoric rise of Mobile First Responsive Design. Applying Progressive Enhancement in this context means starting with a small screen, low capability device, and adding features as screen size and device capability increases.
Aaron’s post jumped off from A plea for progressive enhancement, which reminded me to hit up Yiibu’s excellent Slideshare page. I’ve grabbed copies of the most recent three, which I somehow missed, and have them lined up for reading matter when I travel later this week.
Adaptive Web Design (Aaron’s book) is an excellent read, and I highly recommend it. It’s clear, concise, and offers excellent practical advice. I find that it goes very well with Filament Group’s Designing with Progressive Enhancement. Adaptive Web Design was quite a fast read, but great at getting the ideas across and making them stick. Designing with Progressive Enhancement is dense and a bit heavy going at times, but is an excellent resource and is jam-packed with fully worked examples. I would call both required reading!
I’m playing around with a redesign for the site, trying out new things I’ve learned and new ways of approaching various problems.
My first step was to look at the content. Discussions with clients during last year and the number of new approaches and ways of thinking that have been popping up in the web design and development world made me decide to write these two reference pages: Web Site Basics and How I do things.
Web Site Basics is aimed at the complete beginner. It answers the questions: “What makes up a web site?” and “How can I keep it up to date?”
How I do things is more News and Current Affairs in the Web Development world: One Web; Progressive Enhancement; Responsive Web Design; Mobile First / Content First. It’s a brief summary of the direction things are going and a round up of the thinking of a lot of smart cookies out there.
