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

  • 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