responsive web design
Get flash to fully experience Pearltrees
A ridiculously easy-to-use PHP script for resizing images the smart way. 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.
This website is designed and built using a 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:
Published by Chris Coyier We've covered using CSS media queries to assign different stylesheets depending on browser window size . 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:
Web round up #11: The best responsive web design examples and resources This week’s extended round up takes a look at some superb examples of responsive web design, as well as the best resources to find out more about this new way of designing for a flexible internet experience. This post was inspired by a colleague who asked for examples of high resolution designs that scaled down well to 1024 x 768 resolution. I knew the answer to his problem lay in responsive web design, but couldn’t for the life of me think of a good website to show him. This article should sort that out nicely. So what is responsive web design anyway?