Development

Barack Obama is responsive…

…well, at least the new version of his website it is.

As you can see on this picture below, as the browser window is shrunken, the layout will adapt, by reducing the size of the images, the way they are presented and if we go really small, you will see major changes in the navigation too.

 

You can try it out for yourself by resizing your browser window.

The website was developed with a “mobile first” approach, meaning that first of all, the website had to look good and to be easy to navigate on a mobile phone. Once that is sorted out, they move up to larger screen sizes. Here is a short interview with the head developer and the design director of the new BarackObama.com.

Let me finish this post by paraphrasing a famous speech:

I have a dream that one day the web development community will rise up and live out the true meaning of the Internet: We hold these truths to be self-evident, that all websites are created equal. Free at last! Free from the slavery of App stores!

Web accessibility, a case study

Developing an accessible website

We’re getting there, the website is in its final phase of development and polishing. The launch date is getting closer and closer and we want it to be perfect. Of course, the many years of designing for the web, taught me that there is no such thing as perfect when it comes to websites. The good thing bout the Web is that it’s a platform and a product that can be tweaked and improved even after it lives in the public realm.

From the very begging of the planning and development of the website, we wanted to make it accessible. Everything was checked and double checked, to make sure that the design, the navigation and the content will make sense for a person using a screen reader.

The technology

Our choice of Drupal as a CMS, proved to be the perfect match for developing an accessible website. It comes with many built in functionalities that help develop accessible websites.

There are other CMS-es too that you can use to make accessible website, the tool is not as important as the way you implement it and use it.

The design

Everything on the website has to have a meaning, we reduced the number of decorative elements to a minimum, in order to speed up the loading time and also to direct the attention of the visitors to the main content.

The color scheme, while following the visual identity guidelines of the City, it is used in a way that even color blind visitors will be able to navigate it. The contrast is high enough that even users with poorly calibrated screens will understand the structure and the navigation.

Links in the content are underlined and in the navigation, there are visual clues to highlight a roll-over or an active link.

The navigation

While we were working on the tree view of the navigation, we organized the links in a logical way. Ulterior testing with users helped us fine-tune it even more.

The first link screen readers will get is a “Skip to content” link, that helps the users skip the whole navigation of the page and get to the juice of the content. This is hidden for other users, not to clutter the menu and unnecessarily confuse people.

On the bottom of the page there is an expanded sitemap with the main pages organized by section. This is to help people navigate the site without having to deal with the drop-down menu.

The content

The content is organized with headers, to give a logical hierarchic order.

Illustrations, all have alt attributes, where there is a description of the image for the screen reader. It was quite funny to see that the blind lady, who was so kind to accept to test the website, had found a typo in one of the alt texts. Something that we overlooked, she was fast to find.

Tables are used only for tabular data only, there is no table used for design. They are structured with thead and tbody, as well as with th and td, to make a clear distinction between table heads and the rest of the tabular data.

We built the forms in a way to make it clear for the screen reader what is the label for the input.

The test

Testing was a very important part of our development. Having the website tried out by people of different age group and different familiarity with the Internet, gave us important clues about how to tweak the website to make it better. We had one test subject who is using a screen reader and she loved the website, she had no problem navigating and understanding the content of the site. There was one exception, that we’ll have to sort out in the coming days, before going live with the website.

Conclusions

The first step is to recognize the need to pay attention to it, at the very beginning of the project.

Think of the user who can’t see the website, or can’t identify colors, or even the one that can’t use a mouse to brows, how will they see or navigate the content? Answering this questions will have a huge impact on the wireframe and the layout mock-ups.

Following web standards will already place you on the right track, but there are other great resources to learn about accessibility. I learned a lot from WebAIM, they have a great collection of resources and articles about how to build accessible websites. Of course the W3C WCAG 2.0 is the ultimate source of web accessibility info and if you live in Quebec, you should follow the standards developed by the Gouvernment (in French only).

The good news and the bed news is that, even after the development of the website is done and all the initial content is integrated in an accessible manner, the job is not finished. There are always tweaks you can do, to make it better and if you are not the only person contributing with content to the website, be prepared to give proper guidance to the other contributors about accessibility.

The cherry on the top of the cake

If you have a hard time convincing your client or boss, about the importance of accessibility, tell them that Web Accessibility is not rocket science and it’s not difficult to achieve. If they still don’t listen, you can always pull out the ultimate ace, Google is the biggest blind on the Web, so you better make it accessible if you want to have a decent ranking.

Drupal Camp Montreal 2011

I spent this beautiful autumn weekend with fellow Web geeks at the 2011 Montreal Drupal Camp. Three days of talks about nodes, fields and other intimidating codewords. Although I consider myself a beginner, I still managed to follow to a certain degree a few intermediate level presentations and some of them I really enjoyed.

Since we were in Montreal, for obvious reasons, many presentations were dealing with current, or upcoming internationalization features of Drupal. I found especially interesting Gábor Hojtsy‘s presentation about the future of i18n in Drupal 8, a project on witch he’s working on with a bunch of other developers. I’m happy to see that the interface is going to be cleaned up, a lot of junk will go away and there will be a lot of effort put into making the Configuration translatable.

He also held another great presentation about Drupal security, where he basically went trough the OWASP Top 10 Web Application Security Risks for 2010 and talked about how to use Drupal to avoid these problems. If any of you want to learn more about Drupal security, according to Gábor, Greg Knaddison’s Cracking Drupal: A Drop in the Bucket is a must read.

I also attended Jake Strawn’s presentation about responsive design. He’s the guy who developed the popular Drupal theme, Omega. He’s main messages was that design should be done with mobile in mind first, and only once that is sorted out to think about larger screens. There were a few case studies presenting different approaches and techniques to achieve a responsive layout.

Overall it was a great conference and as always, attending the presentations was just as fun as the breaks, when I could meet really interesting people. I found the presentations of only 45 minutes to be too short, often there was not enough time for questions. Maybe next time the presenters should cut down on their slides and leave more time for Q&A.

It was my first time at a Drupal Camp and if I would compare it the Wordcamp we had back in July, I was surprised to see so few participants. I met with people who came down from Ottawa and they were really happy to be here, so I don’t know where were all the other Montreal Drupalists? For sure I’m looking forward to Drupal Camp Montreal 2012.

About this website

This website had to fulfill two main requirements, first of all, to be a an online portfolio and second, to serve as my main blogging platform. I’ve had both of these in the past, but they were spread out at different places and different services. I needed something that I can update easily.

I already had some experience with WordPress while working on my watch related website. I really liked the back-end, I found it to be a lot more user friendlier than Drupal and Joomla. Unlike with WatchPaper, I wanted to create theme from scratch, or at least almost from scratch. I started by reading Beginning WordPress 3, by Stephanie Leary, a really good book for discovering hidden aspects of WP. I also had a better understanding of how should I go for the theme development.

My other source of information was the WordPress Codex, a very well written documentation from the WordPress community. I started from the TwentyTen theme, that comes with WordPress, but instead of developing a child theme, I rather used it as a model took bits from here and there. When I got stuck, I would turn to online forums, blogs and articles. Most of the time I would find the answer to my question really fast, proof of the maturity and popularity of this platform.

Some of the features that I needed to look up:

Displaying the image title and description

For the portfolio pages, I wanted to take advantage of the meta info, such as image title and image description that we can add in the back-end when uploading images. Strangely there was no native function to display these, so I needed to find a way to have it written in the functions.php. Luckily I found exactly what I needed on this blog and followed Chris Murphy’s comment, who fine-tuned the solution described by newvibes.

Pagination

I also needed tweaking the pagination and I ended up getting the solution to my problem here.

Considering that I have minimal knowledge of PHP, I’m pretty happy with the result. I know there is still a lot to do, to make it perfect and I’m looking forward to fixing all the bugs that I know of, or that will pop-up as this websites grows.

Back to top