default title
January 30th, 2018
Here is a quick list of essential Google Chrome extensions for web developers and designers.
If you use any useful extensions not listed here please let me know.
WhatFont
Easily find out what font is being used on any website text.
This extension also displays the font weight, colour, size and styling.
Download here
PerfectPixel
PerfectPixel can be used to overlay .jpg visuals over any webpage.
This allows developers and designers to quickly make sure development websites are pixel perfect.
Download here
AdBlock
This extension prevents pesky website ads from interfering with your website viewing experience.
I also use Adblock Plus on my iPhone to stop ads on my mobile.
Download here
Page Ruler
Page Ruler lets you add lines to your webpage to make sure elements are on grid and aligned correctly.
Download here
default title
January 21st, 2018
Responsive images are images that work well on devices with widely differing screen sizes and resolutions.
This can be achieved by displaying the same image at all screen resolutions and device widths. This could however lead to a pixelated and fuzzy images being displayed on desktop, or a massive image being displayed on mobile devices. Leading to unnecessary load time on pages.
WordPress by default generates different sizes of each image uploaded to it’s admin and can output them using the <img /> tag srcset. This allows different sized images to be loaded into the webpage at different screen sizes, decreasing page load times.
I’ve recently been using the jQuery plugin Interchange which allows the above functionality for CSS background-images, as well as replacing specific img sizes at specific breakpoints.
Interchange has been used on the Jack Starz website. This allows smaller background images to be loaded into the page at smaller screen resolutions.