Responsive web design

Facebook Twitter

PHP image resizing on the fly. A ridiculously easy-to-use PHP script for resizing images the smart way.

PHP image resizing on the fly

One of the challenges that comes with maintaining a graphic-intensive website like Shifting Pixel is finding a way to get high quality images throughout the site with as little effort as possible. To tackle this, I developed the Smart Image Resizer and have been using it around the site for the past few months. I couldn’t be happier. The major advantage of this script is that it allows me to resize and crop any image on my website without touching the actual image or writing any code. I upload each image once at a high enough resolution and can then reuse it at any size I want, anywhere I want. The Fluid Grid. This website is designed and built using a fluid grid.

The Fluid Grid

It will display properly on almost any screen resolution. It will render properly on mobiles, tablets, and Web enabled TV’s. No plugins required; no subdomains or mobile specific URLs (ie. mobile.promediacorp.com; promediacorp.com/mobile). Resize your web browser window and you will see that the content on this page renders differently depending on the height and width, as seen in the short clip below: This is how the homepage renders on a mobile handset, such as an iPhone: CSS Media Queries. We've covered using CSS media queries to assign different stylesheets depending on browser window size.

CSS Media Queries

In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection".

Adaptive Images in HTML.