January 03, 2018
Typically, I use classes like .desktop, .tablet, and .mobile combined with media queries to switch between different-sized elements when building a website, in order to avoid loading the high resolution images on the handheld devices.
I find the class method a little tedious, and not as intuitive as I would like, so I’ve been looking for alternate ways to perform these transitions.
I found two WordPress plugins that support the functionality I was looking for, but in different ways.
Mobble – 120 kb
Features are controlled via functions provided in the plugins library. These functions can be added to your template (e.g., if you’d like a different layout for tablet, and mobile, add an if statement with the appropriate is_mobile() or is_tablet() or specific device name).
It’s a nice small plugin, but it’s essentially doing the same thing that I’m doing with classes and media queries, except it has the added ability of device targeting.
Adaptive Image Sizes – 205 kb
Features are controlled via breakpoints established in the plugin’s settings, and automatic image resizing occurs when these breakpoints are established.
I only played around with this plugin on one site, but it seems more inline with what I’m looking for. I’ll need to work on adjusting my WordPress default image sizes so they fit the breakpoints as well to see better results going forward.
I definitely recommend trying out both plugins.