How we built a responsive front-end for WeFarm

While the main focus of WeFarm is for farmers to communicate via SMS, the website will play a key role in facilitating the translation between different languages. It will also become an online searchable record of all the conversations that have happened, online and off.

Turning wireframes into a working site

As mentioned in a previous blog post, Manifesto is working closely with two other agencies on the WeFarm project. Each agency is specialising in different areas of the project. We’re building the website’s front-end, as well as a layer of logic that sits between that and the database API.

My role as a front-end developer is essentially to piece together the visual designs and wireframes into a functioning website which can then be integrated into the back-end logic and database. We’re currently about half way through the development process.

Responsive design

One of the first requirements from a front-end perspective was to make the site responsive. This means that it responds to the screen and platform that it is being viewed on, whether that be the newest widescreen Mac or a 2 year old Android smartphone.

It’s not just about shrinking and growing page elements and font sizes. A website’s complete layout and even functionality can change depending on the size of the screen in question. The idea is to provide the most appropriate and best-suited experience for each of the many devices that the site could be viewed on.

The visual designs provided by Someone/Else were based on a 12 column grid.

Grids have been used in print design since day one, but they’re now also commonly used as a basis for web design. Amongst other things a grid provides order and consistency to a design. They also allow for easier reorganisation and scalability as the site responds to different screen sizes and proportions.

Bootstrapping FTW

I decided to use the Bootstrap framework for the foundation of the project. Frameworks can help the development process by providing some of the building blocks that are often shared between website builds. It negates the need to reinvent the wheel and write stuff from scratch for each site.

Bootstrap is one of the more popular frameworks, it’s open-source and has been extensively tested by the online community which helps relieve some of the cross-browser issues that often plague front-end development.

By design, frameworks are made to accommodate a huge variety of possible scenarios, this means that much of the included code doesn’t get utilised in the final website. Once the build is nearing completion I plan on removing as much unused Bootstrap Javascript and CSS components as possible to keep file size and load-time down to a minimum.

Browser support

The site is being designed to work with Internet Explorer 8 and up, although a couple of javascript libraries (polyfills) are required to provide support for features that aren’t natively supported by older browsers.

• html5shiv allows older versions of Internet Explorer to recognise semantic HTML5 elements.
• Respond enables support for CSS3 Media Queries in older browsers. Media Queries are key to responsive websites.

As the development progresses it’s important to test work-in-progress across multiple devices and browsers. Internet Explorer, often the thorn in the side of front-end developers, hasn’t caused too many issues, any progressive enhancements degrade gracefully or are propped-up with polyfills.

First contact

Recently we had some real-world testing in Kenya with farmers asking questions and receiving answers via SMS. It was great to see the conversation threads automatically appear on the website.

There’s another round of testing in April so we’re firing on all cylinders to get everything ready for then.

It’s been a very interesting project to work on. I’m really looking forward to seeing farmers around the world interacting with the site and, more importantly, directly benefiting from sharing knowledge through it.