Adaptive Images
The landscape of web continues to change as we get more and more devices that we need to support. One concern when creating websites that should accommodate all screen sizes is image size. The acceptable size for an image is not the same across devices, so we usually end up compromising image size and quality on all devices; not the optimal solution, of course. Enter a solution called Adaptive Images, a PHP / .htaccess based solution for detecting screen size and delivering optimally sized images for the user's device.
Adaptive images provides an outstanding set of instructions for customizing the images generated by PHP's GD library, so you aren't stuck with rubbish images. Do yourself a favor and check out Adaptive Images -- it could be the perfect solution for your website imagery needs.
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Basic AJAX Requests Using MooTools 1.2]()
AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time.
Step 1: The XHTML
Here we define two links...
![Create Your Own Dijit CSS Theme with LESS CSS]()
The Dojo Toolkit seems to just get better and better. One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes. The move to using LESS is a brilliant one because it makes creating your own Dijit theme...
This is the next BIG thing … I believe!
Will this method work with Joomla CMS sites?
It should — you’ll need to do your research about .htaccess though to make sure you don’t break Joomla.
One thing I noticed with this… it says the page loads a tiny bit of JavaScript first and creates a cookie with window size. That cookie is not going to be able to be read until the second page load. So this idea won’t work for the first time a visitor sees your site. Am I wrong?
You’re wrong ;)
If you include the script from an external file you’re right – because the time taken to fetch the external file is more than it takes to continue loading the HTML. But, if you have the code in the head (it’s only one line, and is more efficient embedded anyway), then the cookie actually gets set immediately, before the rest of the HTML has finished being loaded.
Try it – go visit http://adaptive-images.com on a large screen. If you see large images it worked, because if there isn’t a cookie set it delivers the mobile resolution, which are much smaller.
Here an alternative solution for adaptive images: http://litesite.org/holygrail/stage2/