Web Development Archive

  1. CSS Pseudo Elements On Images

    Image of a web page's HTML code

    Please note: This post relates to an ealier website build, in a time when I thought that this kind of behaviour was perfectly acceptable. Please forgive me. Forever on the lookout for ways to speed up the loading time of my website, I realised that the graphics for each of my music production, web development and online promotion pages were causing considerable overhead. This surprised me at first, as I’d taken the time to create SVGZ (zipped SVG) files (with a neat fall back to PNG for those less well-endowed browsers), but all-in, the six images on my ‘Web Development’ …

  2. Image of an example of the extra bottom margin detailed in the post

    Please note: This post relates to an ealier website build. The age of Responsive Web Design (RWD) is most definitely upon us. Gone are the days of designing strictly for 960px; the modern web is viewed on everything from feature phones to games consoles. With this influx in device screen sizes comes compromise, and so the day has finally come to wave off pixel-perfect page layouts with a fond farewell. But while pixel-perfection may be a thing of the past, it’s still nice to try and achieve as close to a perfect layout as humanly possible. When developing the new …

  3. Image of the SVG scrollbars detailed in the post

    One of the main considerations when developing the new Freakyleaf website was how to future-proof the site’s graphical elements. For the vast majority of sprites and graphics, it was a real no-brainer to choose SGV (Scalable Vector Graphics) over traditional file formats (such as JPG, GIF and PNG), to deliver resolution-independent visuals (with a suitable fall-back in place for those not-so-well-endowed web browsers, of course). So with this mind set I went about creating the various graphics for my website, including the main logo (the one top left of this very page). This was created in Adobe Illustrator and saved …