Flickr Goes Big With Larger Images, Responsive Redesign

Compare Cost: Get 8 Free E-Commerce Design Bids
Compare: Web Design Calculator | Web Design Cost Guidelines

Flickr: now with bigger images and a (mostly) responsive design.

Flickr recently changed its “lightbox” photo pages — the darker photo-friendly interface on the site — to display much larger photos. Now the grandfather of online photo-sharing sites is rolling out a site-wide redesign that uses the same big, beautiful images to put your photos front and center on every page.

The larger images in Flickr’s revamped photo pages put the emphasis where it belongs — on your photos. Peripheral information, like comments, maps, tags, set info and so on are still there, they’re just now (rightly) dwarfed by the actual image.

The result is a much more photo-centric site that does a nice job of differentiating itself from the current trend of low-res, filter-heavy photo0sharing services.

Web developers, take note: Flickr’s new layout isn’t just eye-catching, it’s also somewhat responsively designed — adjusting to the myriad screens on the web today and displaying the best photo possible without clogging your tubes with huge photo downloads. Flickr does stop short of scaling pages down to phone-size screens — for which there is a separate mobile website — but it resizes nicely to handle tablets.

That’s right, Flickr is the latest (and perhaps the largest) website to embrace not just a mostly responsive design with a liquid layout and media queries, but also a responsive approach to images.

We’ve looked at dozens of ways to handle images in a responsive design, but Flickr has opted for a custom setup that uses a bit of server-side PHP and some JavaScript to serve images based on screen size. Flickr is also using a custom algorithm that takes the width and height of the screen into account and “will display content at a width that will best showcase the most common photo ratio, the 4:3.”

For more details on how Flickr is handling the responsive aspects of the new design, check out the Flickr code blog.

Developers working with the Flickr API should note that the new photo sizes are now available through the Flickr API if your app or website would also like to display larger images.

Tue, 15 May 2012 18:22:52 GMT
Tags: Flickr, Multimedia, responsive images, Web Services,


Flickr Ditches Flash Photo Editor for Mobile-Friendly Aviary

Flickr is replacing the Flash-based Picnik photo editor with an HTML-based alternative named Aviary. The change means Flickr users can now edit their photos on iOS devices and any upcoming Windows Metro tablets, neither of which run the Flash plugin.

Easily Upload Photos With Flickr’s New Drag-and-Drop Tools

The popular photo sharing service Flickr is harnessing the power of HTML5 to make it even easier to get your photos on the web. With Flickr's new HTML5 uploader photo sharing is just a drag-and-drop away.

Flickr: When It Comes to Photos, Bigger Is Better

Flickr bucks the low-res, filter-happy photo sharing trend in favor of bigger, sharper, more beautiful images.


BrowserQuest Is Pure HTML5 Gaming Goodness

BrowserQuest is an addictive real-time multiplayer adventure game written entirely in open web standards like HTML5, CSS and JavaScript. Welcome to the next big gaming platform -- the open web.

Video: The Show With Ze Frank Returns to the Web

Humorist and video blogging pioneer Ze Frank is once again producing new episodes of The Show with Ze Frank.

responsive images

The Web Needs to Get Ready for the High-Resolution Future

The new iPad is just the first in a coming tidal wave of high-resolution screens. Today we have hacks, but what the web needs are new standards and new tools to make sure developers are ready for the high-resolution future.

JavaScript Package Offers a Smarter Way to Serve Hi-Res Images

The rise of mobile devices means a return to limited bandwidth, but also gorgeous, high-res displays. Better screens connected to skinnier pipes makes serving images on the web more complicated, but fortunately Foresight.js offers a very clever solution.

Use Your ‘Head’ For a Better Way to Serve Images

Serving the right image to the right screen can be tricky. Developers need to account for not just screen size, but available bandwidth as well. A new solution solves the problem with just a few lines of code, provided of course that browser makers accept

28 Excellent Design Ideas in Product Packaging

Cool Tech Deals Of The Week – KGuard 4-Camera + 4 Channel 500GB Hard Drive Security System $199.99 Free Shipping & More!

35 Different Types of Liquid Textures

Turning Content into Commerce: A Case Study with Pearson Education

Opera Forges Ahead With Plan to Support WebKit Prefixes

Article Tags
Freelance Designer News Articles
Web Apps & Internet

cool web apps
All Posts
iPhone / iPad / iPod
Google Android
Games & Gaming Tips
Web Design
Freelance Graphic & Web
social media
Cool Windows Apps & Tric