As the few who read our blog will remember, we posted our first job offer back in February. We were looking for a kickass front-end developer, and we found him.
So today we’re welcoming Maxime Laforêt (@macxim on twitter) in our team. He’ll work with us doing front-end development and integration, respecting Webstandards and using the latest techniques, on our Client’s and our internal projects. Maxime moved from France to Brussels to work with us. If that’s not being motivated, we don’t know what is.
We’re all glad to have him here, and we’re pretty sure he’ll do a great job. So welcome Maxime!
Please note that although this job offer is closed, we’re always welcoming resumes from candidates or freelancers. So wether you’re a designer, front-end or back-end developer, send us your portfolio and surprise us!
Spade is looking for a Junior Front-End Developer. Fancy joining a team that designs and builds awesome stuff? Passionate about your work? Follow the link and here we go !
Jobs / Junior Front-End Developer
The end of the year is one of the best moments to create a tiny campaign where print & web can meet each other. A balanced mix between classic, glossy supports and an interactive way to wish all the best (or the worse !) to others.
Spade had the opportunity to realize this mix for the Fédération Wallonie Bruxelles. If you are Belgian (and especially if you are french-speaking) you already know that the Fédération recently changed its name and endorsed a new graphic identity.
In this canvas our mission was to propose a way to send an (e-)card to all the professionnal members of the Fédération. The result is a simple idea that fits the goals and budget : a door-hanger that you can personalize both on the printed card and on the Fédération’s intranet through a small web app (HTML5/CSS3/Javascript/PHP).
We’re generally not proponents of CSS frameworks. Our common approach is usually the “build your own” one.
Before I dive deeper, what is a CSS framework? A set of pre-defined CSS files, and conventions on classes and HTML elements that simplify building an app/website. For example, a CSS framework might define, in a resusable way, elements like:
- column widths
- buttons
- common layout elements
Usually, their problems are:
- restriction of the creative use of CSS
- filesize
- unnecessary bulk (you might not need everything in them)
- Loss of semantic markup (meaningless IDs & Classes, self-imposed HTML structure)
Some of the arguments against them are really valid if you use a framework to do little more than CSS basics (if that’s you, please read this: http://warpspire.com/posts/css-column-tricks/)
Yet, lately, we have found ourselves working with two of them:
- Bootstrap: The App framework made by Twitter
- Foundation: A responsive framework made by Zurb (a CA-based interaction design agency).
Why?
Obviously, you SHOULD write reusable CSS all the time, but it isn’t the same scope as a “framework”.
In some recent cases, especially when working for startups, I have always tried to create a framework from scratch. It made sense, since their products are apps with frequent releases, interface changes, and new features. In these cases, reusable CSS helps them to build without having to call for a designer everytime they change something.
Yet, I have found that it required a lot of work, that was not always correctly used by the in-house developers (a Belgian problem?). Which in turn led to poor implementation of all this neatly conceived code.
The problem with homebrewed CSS frameworks
What was the problem? I don’t believe it was in the framework itself. It was in the lack of documentation! As a front-end designloper (yes, I made that word up), it takes a lot of knowledge and expertise to build those things right. But you end up taking your knowledge for granted, even for the future users of the framework.
To me, the real issue is to communicate effictively to people how they should use it. So to make your own framework efficient, you need to write good documentation. Needless to say, some clients won’t pay you for this.
The very thorough documentation made available by the developers of those frameworks solves this issue, and means that as long as you modify and extend the framework, the maintenance of the app you’re building will be easier for every involved party.
UI frameworks
The other interesting feature of some of the new frameworks that recently popped up is that they are actual UI frameworks, which include Javascript to cover common necessities like modal windows, popovers, tabs, etc.
When building an app, this comes in very handy, and can make the choice of one of these frameworks very reasonable.
Using Bootstrap
We used Bootstrap to build the new design of Cityplug.be, after an expert review of the previous design. The request to use a framework emerged from the client itself, and we approved it, following the aforementioned experiences.
Twitter’s Bootstrap framework is interesting for many reasons. First it’s really suited for developing apps, or large websites. Secondly, it was built with LESS CSS, a dynamic CSS superset that lets you use variables and mixins to generate css.
Building the new CityPlug.be design
So we implemented the new design within the Bootstrap framework. And we also extended it to add some of the functionality, . This is also one of the strong points of frameworks: when you’re building within their reusable environment, it drives you to create code that is not too specific.
The request was dual and somehow contradictory, yet I believe we pulled it off:
- make reading on the website more engaging (more like a magazine)
- make interacting more enganing (social aspect)
We improved the reading experience by using more comfortable font sizes, and better type (Franklin Gothic/Helvetica) through @font-face, which also reinforced the branding. The overall layout was improved through a better use of whitespace and a simpler, less eye-straining page structure. Large pictures and large titles greet the reader for a more welcoming and enjoyable experience.
Interaction and social experiences are now more manageable, thanks to the very readable user review grid, social plugins, and the unobtrusive rating system. And we also improved the user experience for registration and review submission.
To summarize, We loved this approach, the collaboration with the development team was a joy, partly thanks to using a framework. And here’s the best thing: We’re confident that they’re going to keep building in better functionality within the modular system that we have created.
Visit the new cityplug.be
If you are a happy owner of a smartphone or tablet, you are already familiar with ways to consume and interact with content on these platforms. But building all those apps & websites costs money… and we still need websites for the “classic” desktop users. Is there another way to merge all those fabulous ideas into a unique platform ?
The answer we believe in is called “Responsive design”.
For those who don’t know about it, responsive design combines progressive enhancement techniques, CSS media-queries, and innovative project approaches to allow us to create a website that responds to the context it’s being viewed within. Not only to the screen size of the device, but also to its capabilities (keyboard or lack thereof, touch-based devices,… ).
Before we dive in the explanation, let’s review the problems with native Apps and mobile-specific websites.
Problems you face when you develop Mobile Apps :
- You need to have your App available for each OS : iPhone, iPad, Android,
- You will have to maintain and update regularly each of those apps because of the OS updates and SDK changes. This means multiple code-bases in different programming languages.
- Without regular updates and adequate marketing, apps quickly disappear from App Store charts. It takes extra marketing effort to make them relevant.
Belgian newspapers have launched native iPhone apps (without a suitable business model, obviously) years after its launch. Same thing for native iPad apps, soon it’s going to be Android apps. Those costs can be huge, and all that only for serving a segmented user-base.
Let it be clear, there are some contexts where a native app makes more sense, and if you’re in that case, you should already know it. Amongst the things that you currently cannot do with web technologies:
- access device functionality like camera, mic, storage…
- do some heavy data processing
- reach a device-specific target audience
- get revenue through app distribution
- …
Problems you face when you develop separate Mobile Websites :
- URL schemes that are not adequate for sharing. (How often have you opened a link from Twitter or Facebook that directed you to an inadequate version? Check for example the Mobile website of the Belgian Newspaper “LeSoir” from your laptop or desktop PC.
- Different page templates, technologies, and designs that create overhead for maintenance and platform evolutions.
- Loss of focus on the users from in-house staff. If some people work for mobile users and others for desktop users, who has a unified vision of your user experience?
- Using device-detection is backwards-looking and not future-friendly (does “being pushed to a mobile-specific websites while using a tablet” sound familiar?)
Although some of these problems can be avoided with clever engineering and attention to user experience, we still see them happening too often.
We truly believe that there are better ways to build experiences that adapt to the devices. With the emergence of new technologies (CSS3, and the HTML5 API’s), and a careful application of responsive design and progressive enhancement, we can do more than you thought was possible with a “website”.
So what are the advantages of Responsive Design ?
- Thinking about mobile from the start (the famous “Mobile First” approach) means you will prioritize functionality and focus on the users’ requirements.
- One website, serving mobile, tablets, desktops, and ideally any kind of future device.
- Savings compared to a native app, and the associated maintenance costs.
- One URL scheme that guarantees efficient sharing (although this can be adapted).
A unique website/platform has a different rendering in each device
Spade team members have been closely following this revolution in our area, and we’ve already been lucky enough to have a few clients that jumped the responsive chasm with us.
So if you’re thinking about redesigning your website, or you envisioning a mobile-app (or maybe a mobile-only website), maybe now is the time. If your presence is not a webapp, or applicative in nature, but more content-heavy, there’s are many reasons why you should consider this approach compared to, say, native apps.
What would make sense, instead, is noticing that all those new platforms have something in common: They come with powerful, modern browsers (unlike, cough, desktops that still run IE).
So the more logical approach we recommend to our clients, and that we’d like to see from newspapers or other content-focused websites here and elsewhere is to take advantage of this and develop an efficient browser-based platform.
As it has been largely discussed on various websites and blogs, Responsive web design might not (yet) be the Silver Bullet, but it’s definitely worth taking into account in 90% of cases.
A few wonderful examples of responsive websites :
Go further with some resources :
← Older posts
So today we’re welcoming Maxime Laforêt (@macxim on twitter) in our team. He’ll work with us doing front-end development and integration, respecting Webstandards and using the latest techniques, on our Client’s and our internal projects. Maxime moved from France to Brussels to work with us. If that’s not being motivated, we don’t know what is.
