Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • [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

    Conclusion

    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 !

    Share/Save/Bookmark

  • Book review : The Zen of CSS Design

    Posted on November 1st, 2009 Thibaut 2 comments
    The Zen of CSS design Almost every Web Developer knows the famous CSS Zen Garden, a project created by Web Designer Dave Shea aimed to encourage the use of standards-compliant CSS for a better web. Raw HTML was available to Web Designers who had to create some CSS that can completely change the layout of the website, thus underlying the power of semantical XHTML and best use of CSS. This full-color book, released following the CSS Zen Garden project success, is divided into 7 chapters : View Source, Design, Layout, Imagery, Typography, Special Effects and Reconstruction. Each of these ones teaches you best practices to CSS development (including cross-browser concerns in the details) but also to good Web Design in general.

    Pros

    • Awesome book, very instructive
    • A very interesting approach, based on the best submissions (Zen Garden project) to teach best practices and tricks of expert Web Designers
    • Cross-browser concerns are explained very well, into the details and an overview of the alternatives to cope with ‘em is given.
    • A very instructive course about Web Design (imagery, typography, layout, …)
    • All chapters based on real world projects and not on academical examples
    • The best and more complete book about Web Design I’ve read to date

    Cons

    • Not really a con, but this book is “medium to advanced” level, so good understanding of CSS is required before starting. Basics of CSS aren’t covered as the book immediately digs into the details, exceptions and advanced use of CSS

    Conclusion

    An instant-classic, awesome and very instructive book that every Web Designer must have on his/her bookshelf ! Finally note that you should have a good understanding of CSS prior to reading this book and have an interest in Web Design as some chapters such as “imagery” and “typography” are purely dedicated to this field.

    Share/Save/Bookmark

  • In bulk #4

    Posted on September 9th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • The little-known <wbr /> tag

    Posted on August 16th, 2009 Thibaut 5 comments

    The <wbr /> tag (word break), little-known but very useful, tells the browser “insert a word break here if you wish”. Consider for example that you have a long text (ie a URL or alphabet letters) to put in a zone which width cannot be extended. So we have the following code :

    XHTML :

    <div class="fixedWidth">

        abcdefghijklmnopqrstuvwxyz

    </div>

    CSS :

    div.fixedWidth

    {

        width : 50px;

        overflow : hidden;

        border : 1px solid red;

    }

    Result :

    abcdefghijklmnopqrstuvwxyz

    Now using <wbr /> :

    <div class="fixedWidth">

        abc<wbr />def<wbr />ghi<wbr />jkl<wbr />mno<wbr />pqr<wbr />stu<wbr />vwx<wbr />yz

    </div>

    Result :

    abcdefghijklmnopqrstuvwxyz

    Emphasize is put here on the amount of inserted <wbr /> tags (every three letters actually) to illustrate the browser behaviour, which decides when to effectively insert a word-break, in opposition to the <br /> tag, which always inserts one.

    This tag is not XHTML valid (maybe the reason why you won’t find it in the Visual Studio intellisense) but widely implemented by browsers anyway. Results shown here are not screenshots but direct interpretation of the tag, so you get immediately an idea if your browser supports it. For more information about its support, you can take a look at the compatibility table. So, in some cases, instead of using ugly CSS hacks, rather use <wbr /> and you’re done !

    Share/Save/Bookmark

  • In bulk #3

    Posted on August 13th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • The 3 seconds usability test

    Posted on July 28th, 2009 Thibaut No comments

    In his Don’t make me think book, Steve Krug introduces his simple and fast, yet very interesting usability test. On a web page, go to your browser options and increase/decrease the font size. If there’s no effect, then the website has failed a fundamental rule in usability and considering that 34% of the internet users suffer from sight disabilities (source), this situation should clearly be avoided. The solution : don’t use units in px but rather use proportional units such as em and percentages.

    Another simple trick not mentionned in the book but that I use to test some sites is to disable the visual styles. The website should still look well structured. Ok you won’t have colors, images etc that makes the site visually attractive but it should still be usable (menu should be at the top, just like a table of contents, etc…). Try this on some popular websites (that’s more chance they’ll respect the standards) so you’ll see what I’m talking about.

    See you !

    Share/Save/Bookmark

  • The IE nested lists whitespace bug

    Posted on July 27th, 2009 Thibaut 1 comment

    I was struggling on styling some ul/li list nested into a ol/li list then I noticed that it’s simply (another) IE bug. Let’s consider the following list :

    <ol>

        <li>

            <ul>

                <li>line 1 - item 1</li>

                <li>line 1 - item 2</li>

            </ul>

        </li>

        <li>

            <ul>

                <li>line 2 - item 1</li>

                <li>line 2 - item 2</li>

            </ul>

        </li>

    </ol>

    And the problem was like :

    line 1 - item 1
    line 1 - item 2
    unwanted space
    line 2 - item 1
    line 2 - item 2

    Even with the margin and padding set to 0 as the following CSS file shows :

    ol,

    ol li ul

    {

        list-style-type : none;

        margin : 0;

        padding : 0;

    }

     

    ol li,

    ol li ul li

    {

        margin : 0;

        padding : 0;

    }

    After some browsing and tests, I ended on the following solution, which is to set the display property (main list) to inline-block :

    ol li

    {

        display : inline-block; /* To avoid IE "ul li white-space bug" */

        padding : 0;

    }

    More info about this bug

    Hope it was useful. See you !

    Share/Save/Bookmark

  • In bulk #1

    Posted on May 29th, 2009 Thibaut 1 comment

    Share/Save/Bookmark

  • Writing a clean CSS

    Posted on April 22nd, 2009 Thibaut 3 comments

    As I was surfing on LinkedIn, I came across an interesting discussion named Writing a clean CSS. And one interesting thing that caught my attention was the following thing : breaking down a CSS file into areas such as these ones :

    • Defaults
    • Structure
    • Links and navigation
    • Fonts
    • Images
    • Tables
    • Forms

    Indeed, this kind of structure, when applied to each CSS file of your project, can be a great save of time in development and maintenance process. I would highly recommend to write this down as a code snippet in order to get  a consistent scaffolding for your CSS’s at light speed. Getting a header and footer sections can also be very valuable in order to reach immediately these areas when needed. Another thing I’d suggest from my past experience in developing webistes at Emakina, where you often have to cope with CSS’s of hundreds of lines, is to comment the instructions that are not always clear at first sight. Typically, I’m talking about browser-specific code to ensure compatibility and thus commenting the reason of their existence in your file, or long selectors such as the one below :

    /* Sets the picture style for third-level alternating items of the menu */

    div#left ul li ul li ul li span.alt a img {

        border : solid yellow 1px;

    }

    Also notice the genericity of the comment. It could have been Sets the border of the picture to yellow but you’ll then become strongly bound to the current style, and suppose you’ll change it to red later, then your comment would’ve become unrelevant.

    Don’t hesitate to comment on that and/or to suggest your best practices :)

    Share/Save/Bookmark

  • CSS layouts

    Posted on March 11th, 2009 Thibaut 1 comment

    If you’re sometimes working with CSS, you should take a look at Layout Gala ! Indeed, this page features not less than 40 different CSS minimal page layouts ready to use. More than being a valuable save of time when starting web projects, examples are also very instructive from a technical  point of view as the code is announced cross-browser compatible and W3C compliant.

    A special thanks to Thierry Thoua for this precious link ;)

    Share/Save/Bookmark