NOE interactive

NOE interactive


The shoemaker's children go bare foot. This is a quote that has been taunting us for a little while here at NOE interactive. Indeed we've been producing some truly nice designs for our customers over the recent months, but we felt that our very own one was somehow getting a bit old and therefore not really representing us the way it should. That's why we decided to get together and brainstormed a few ideas that could lead us to a brand new design. © NOE interactive

Visit the website



We are all passionate about our work and give our best to our client on every project. We needed a place to showcase this work we love and talk about how we actually do it behind the scene.


Working on a side project, is always a great chance to try something you haven't done before to learn something new. When developing our very own site, we wanted to blend in some cutting edge technology.


/wp-content/themes/jdmweb2014/images/foliothumb1.png in a browser
Present the agency

NOE interactive produces everyhting that's needed for your website in house, with a team of about 10 to 15 persons. It was important to the agency to present its team members, so clients actually know who's behind their website. Apart from the team section, there's also in the about page a zone dedicated to how the work is being conducted and what the areas of expertise are. As it's a quite long page, anchors at the top of the page help quick access to a particular section. The anchors stay at the top of the page and update themselves as the user scrolls thanks to the jQuery WayPoints plugin.

Case Studies

Each year, a project stands out from the others. It's an opportunity for the team to explain why it's been interesting for us, and share some behind the scene insights about the work that has been conducted in this particular context.

Made in NOE

Apart from client work and projects, we've had the chance to work on some side projects that are either useful for us or our clients, such as noewp. Those products represent NOE's spirit and as such, have a dedicated section on the website.


Apart from case studies and products, the home page allows the team to communicate by showcasing the latest blog posts as well as the latest realisations in the main slider. The slider has been customized from a flexSlider version to add CSS transitions on the inside elements, and the latest blog posts are fully administrable.


I tend to think NOE's blog is rather original, by its presentation and in the way it uses full ajax. When clicking on an article, this article content is loaded in ajax, and displayed directly in the blog's main page by expanding the clicked element. It seems quick to load and it's comfortable to read one or more articles as you don't have to navigate between pages. You have the possibility to filter the content via categories, and the pagination is handled with infinite scroll.

/wp-content/themes/jdmweb2014/images/foliothumb1.png in a browser


The main difference when working for your very own website or a client one resides in the management of time and deadline. While it's important to avoid having a project that goes on forever, you can take the opportunity to have less pressure on time to do things you may couldn't afford otherwise, such a experimenting new techniques.

Responsive Design

2012 and NOE's site mark the true beginning of the agency's responsive approach. We used our website to test different responsive techniques such as fixed versus adaptive break points, grids, menu adapatation and so on. This gave us a better idea of the challenges involved, and the time overhead it meant.

Touch Support

Touch is something we didn't do much in the past, but with the rise of touch based mobile and tablets, we wanted outline the ins and outs of touch based navigation. As a result, we've made a few adjustments, such as enlarging some key interaction zones (such as the mobile menu toggler for example). We also modified the slider so you can swipe between the different elements.

Keyboard navigation

We thought about keyboard navigation when wanting to test an original way of navigation a site, away from what we usually do. We configured the keyboard navigation so you can control the main slider, and navigation between the different site sections. In the blog for example, you can navigate article by article.

Ajax & HTML5 History

Using ajax in the blog brought some development challenges, but also some comfort in the use. When you click on the article, it loads via ajax and expands its content in the same page. First, the perceived wait seems shorter than if you had to reload an entire page, and the fact that it expands the article is easier to read, and to navigate to the next one. The url is updated via the HTML5 history API so you can still use your browser back button.

@Bentoutif Il occupe tout le monde afin que pendant ce temps on parle moins des résultats moyens de l'OL. A la Mourinho. Et ça marche.20 Sep / 09:12