Blog Comments

  1. Beverleyh's Avatar
    To remove the 300ms touch delay and make the fly-out menus contract again on large touchscreen devices, please install the SwiftClick script from the source of this page: http://fofwebdesign.co.uk/freebies_f...swiftclick.htm

    The article to support this update is here: http://www.dynamicdrive.com/forums/e...lose-Sub-Menus
  2. molendijk's Avatar
    Ah, I see. Thanks.
    Arie.
    ===
  3. Beverleyh's Avatar
    Yes, but wouldn't that just preserve the original aspect ratio, doing the same thing as the 1st method?: http://fofwebdesign.co.uk/template/_...tio-resize.htm

    The rest of this post (Demo 2 and 3) is to demonstrate image scaling and ratios that change within responsive design - e.g. shifting from a wide 5:1 ratio on desktop, to a squarer 2:1 ratio on mobile, which typically produces more visually pleasing results that maintain artistic direction in fluid/flexible layouts.
    Its probably most evident in this demo: http://fofwebdesign.co.uk/template/_...le-img-cfp.htm

    All 3 methods have their merits - #1 is more convenient for user-generated content, while #2 and #3 are more useful from a design perspective - think of them as a way of fake-cropping to retain visual impact at small sizes.

    If I have misunderstood your description though, and it doesn't behave as demo 1 does, let me know.
    Updated 08-14-2014 at 10:38 PM by Beverleyh
  4. molendijk's Avatar
    Hi Beverleyh,
    Maybe I'm being naive, but can't we scale images in a more simple way by giving them EITHER a size in percentages for the width OR a size in percentages for the height (not both!).
    If we give them a size in percentages for the width, we can add a max-width and/or a min-width.
    If we give them a size in percentages for the height, we can add a max-height and/or a min-height.
    This will always preserve the width-height ratio.
  5. Beverleyh's Avatar
    To demonstrate the on-demand image script, see this YSlow component report showing only 4 images downloaded - 3 thumbs from the first page of the gallery, plus the header logo (there are 18 gallery images in total!).

    And the YSlow component report showing only 9 images downloaded - 8 thumbs from the first page of the PHP gallery, plus the header logo (there are 80 gallery images in total!).

    Now considering that the 80 images in the PHP gallery (40 thumbs, 40 enlargements) weigh in at just over 3MB altogether, that's a BIG difference for a page that YSLOW reports as 144.5kb. The on-demand image script saves around 2.85MB
    Updated 07-10-2014 at 12:13 PM by Beverleyh (saving stats added)
  6. Beverleyh's Avatar
    What the?.... Somebody had my menu listed and was selling it on codecanyon. I posted it here on 1st April, and the unscrupulous person started selling it about 10 days ago (17th June?). I stumbled on the listing via this Tweet: http://www.jqueryrain.com/2014/06/re...3-canvas-menu/

    How cheeky!

    The listing has now been pulled but I took screen caps of what they copied and sold as their own. The markup structure, CSS and comments, even the wording of the features list and meta description was a blatant copy.

    http://fofwebdesign.co.uk/freebies_f...yon/jnix01.png
    http://fofwebdesign.co.uk/freebies_f...yon/jnix02.png
    http://fofwebdesign.co.uk/freebies_f...yon/jnix03.png
  7. Beverleyh's Avatar
    A saving is still a saving. And this would be used on a live site, not necessarily what you'd be expected to edit and work on during build stages. As part of your workflow you can use 'beautifying' tools to convert the minified CSS/JS/HTML back and forth when you need to make changes, there isn't really an issue.

    Here are examples of to such 'beautification' tools:

    Dirty Markup: http://www.dirtymarkup.com/ and
    CSS Beautify: http://cssbeautify.com/
  8. bernie1227's Avatar
    The only issue with that however, is that it seriously reduces code readability, for such a small tradeoof.
  9. Beverleyh's Avatar
    Hi James,

    Sorry I didnt spot your comment sooner - The Easter holidays have disrupted my usual email checking routine

    It is true that minifying css might one shave off a few kbs from an existing css file but a saving is still a saving

    It makes a more noticable difference when all 3 aspects of step 4 are covered together;
    1 - use and external css file
    2 - merge multiple css files
    3 - minify css

    If you're using one external stylesheet already, removing all the whitespace from it is not going to make a huge difference on its own though
  10. james438's Avatar
    Lots of useful information here. 4, 5, and 6 were new to me.

    One question though. In tip 4 you removed the whitespace in your example CSS. From my understanding the whitespace doesn't affect the performance of the code to any measurable degree. Why do you suggest condensing it the way you do?