Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • jQuery UI versus custom development

    Posted on July 17th, 2010 Thibaut No comments

    During the development of People & Business Development – my latest web project (related post) – I used the great jQuery UI library for some visual components such as the carousel or accordion. For some reasons I’ll discuss below, I also implemented those features by myself and I thought that giving my experience feedback could be useful.

    The carousel

    The landing page of the website presents the logos of the clients, which was done using jCarousel (jQuery UI). It needed somme little tweaking but was done in a reasonable amount of time. The jCarousel file contains 878 lines of code, which is quite heavy for me because I only needed a basic behavior.


    Considering all that richness I didn’t need and the fact that it always takes some time to adapt the library to the project, I decided to implement my own carousel for the twitter widget in the sidebar. Not only is the file way smaller (41 lines, I actually copy-pasted the code below so you can take a look at it), but it also took me less time to develop this custom version from scratch than adapting the jCarousel library to fit my project.


        1 $(document).ready(function() {

        2     var widgetWidth = 180;

        3     var animationSpeed = 700;

        4     var easing = "swing";

        5     var itemCount = $("#twitter_widget_list li").length;

        6     var currentItemIndex = 0;


        8     if (itemCount == 1)

        9         $("#btnTwitter_next").addClass("disabled");


       11     $("#btnTwitter_previous").click(function() {

       12         if (currentItemIndex > 0) {

       13             $("#twitter_widget_list").animate({

       14                 left: "+=" + widgetWidth

       15             }, animationSpeed, easing,

       16                 function() {

       17                     if (currentItemIndex == 0) {

       18                         $("#btnTwitter_previous").addClass("disabled");

       19                     }

       20                 });


       22             currentItemIndex–;

       23             $("#btnTwitter_next").removeClass("disabled");

       24         }

       25     });


       27     $("#btnTwitter_next").click(function() {

       28         if (currentItemIndex < itemCount - 1) {

       29             $("#twitter_widget_list").animate({

       30                 left: "-=" + widgetWidth

       31             }, animationSpeed, easing,

       32                 function() {

       33                     if (currentItemIndex == itemCount - 1)

       34                         $("#btnTwitter_next").addClass("disabled");

       35                 });


       37             currentItemIndex++;

       38             $("#btnTwitter_previous").removeClass("disabled");

       39         }

       40     });

       41 });

    The accordion

    I also used the jAccordion plugin to display the list of trainings and services the company provides (can be seen on the website here and there). The file contains 477 lines of code because you can, once again, customize a lot of things that most of the time you’ll don’t need. Integration time was very small and it perfectly fitted my needs, at least for the regular version of the website.

    For the iPhone/iPod touch optimized version, I simply couldn’t use it anymore : jAccordion sometimes creates a scrollbar into the sections that the iPhone and iPod touch won’t display. There is only one main scrollbar on those devices, resulting in a cropped content. In that case, I could either adapt jAccordion, take the time to dive into the code of the plugin or develop again a custom version from scratch. I chose the latest option, which took me 10 minutes to implement and test :

        1 $(document).ready(function () {

        2     $("div.accordion h3 a").click(function () {

        3         // Update arrow icons

        4         $("div.accordion h3 span").attr("class", "closed");

        5         $(this).prev().attr("class", "opened");


        7         // Show/hide sections

        8         $("div.accordion > div").slideUp(600);

        9         $(this).parent().next().slideDown(600);


       11         // Prevent default behaviour for href="#"

       12         return false;

       13     });

       14 });


    So now you understand why I thought talking about this could be interesting as the difference between the 2 options is big. First : jQuery UI is a great library. You can do a lot of cool stuff with it, there’s plenty of documentation and the community is huge, so you’ll always find what you’re looking for.

    But in some cases (like mine), using those plugins is not always the best option. First it took me less time to develop a custom version than adapting the code of the plugin to fit my needs. Second, it’s way lighter (I got 41 lines of code instead of 878 for jCarousel and 14 lines instead of 477 for jAccordion).

    Although there’s no point comparing the amount of lines of code here (jQuery UI does provide much more options than my custom controls, so obviously code files are heavier), what should be remembered is : if you’ve got a good knowledge of jQuery, sometimes you’ll go much faster developing custom controls than using plugins, so think about it ;)


  • Guidelines for mobile web development

    Posted on July 16th, 2010 Thibaut No comments
    Mobile Web Development Having recently completed a web project (related post) including an iPhone/iPod touch optimized version, here are some guidelines I’ve learnt and followed during that development :

    • Lightweight and concise design : we read less on mobiles than on a regular computer. Go to the point, be clear, provide fast access to relevant information. Don’t fear that visitors will be missing important information, they’ll go to the full version of the website if they’re interested in what they’ve seen.
    • No hover effects : whether it’s on menu items, links etc, don’t waste time developing hover effects. It’s a nonexistent concept on tactile interfaces.
    • Take inspiration from the GUI style of the platform : using GUI elements in which users are already familiar will make the interface easier to use. If you’re developing for the iPhone/iPod touch, you can take a look at the iPhone GUI PSD from Teehan+Lax. You can also get some inspiration from this gallery of iPhone websites.
    • Orientation detection : detect the orientation of the phone and adapt the interface accordingly. More screen width enables you to display larger images and longer paragraphs of text, improving readability on mobiles’ small screens.
    • Optimize for the phone screen resolution : when developing regular websites, you have to cope with different browsers, different screen resolutions, etc. One of the greatest things when developing for a specific mobile device is that every user has the same screen resolution and same browser. So you can tailor your interfaces to the pixel without worrying about those concerns.
    • Interfaces for fingers : there’s no mouse cursor on tactile interfaces and everything is done using the finger (at least if you’re using an iPhone/iPod touch). Keep that in mind by providing big enough buttons and add space between links to prevent errors. If you’re developing for the iPhone/iPod touch, I recommend you to take a look at the iPhone Human Interface Guidelines (official Apple documentation).

    And that’s it for this post ! Don’t forget that this is a noncomprehensive list and if you’ve got interesting guidelines to add, don’t hesitate to comment about that ;)


  • [FR] Site Web : People & Business Development

    Posted on May 18th, 2010 Thibaut 3 comments

    Mon nouveau projet, réalisé en tant que freelance et en collaboration avec le graphiste Quentin Flamant, est le site web pour la société People & Business Development. L’objectif principal est d’assurer une présence en ligne de cette dernière, y compris dans les réseaux sociaux (tels que Twitter, Facebook et LinkedIn), afin de présenter son activité et ses services. Le surf sur mobile étant une tendance en vogue, une version optimisée pour l’iPhone et l’iPod touch a également été développée.

    Présentation de la société

    Actif depuis une dizaine d’années, People & Business Development est un bureau spécialisé en coaching, en formation et en conseil pour optimiser le potentiel humain des organisations et, en conséquence, le chiffre d’affaires. Leur liste de clients comporte des noms tels que Alstom, la Commission Européenne, Delta Lloyd Life, Securitas ou encore Gefco.

    Le site web

    Le site a été développé en ASP.NET et utilise jQuery comme librairie javascript ainsi que jQuery UI pour les composants graphiques. Des propriétés CSS 3 ont été utilisées pour embellir le site dans les navigateurs modernes sans affecter le rendu dans les navigateurs plus anciens via le mécanisme de dégradation gracieuse. En ce qui concerne le respect des standards du Web, chaque page du site passe la validation W3C XHTML 1.0 Strict.

    People & Business Development

    La version iPhone et iPod touch

    Ci-dessous, des captures d’écran de la version dédiée à l’iPhone et l’iPod touch. On notera notamment la détection de l’orientation permettant une lecture plus aisée de longs paragraphes de texte ainsi que l’intégration au menu de l’iPhone et l’iPod touch, permettant un accès direct au site web.

    Cliquez pour agrandir

    People & Business Development iPhone

    Cliquez pour agrandir


    L’objectif de ce post, outre l’aspect publicitaire, est de présenter une application concrète de bon nombre de mes précédents posts, incluant :

    Bonne visite !