Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 18 2011

05:47

A Brief Rant on the Future of Interaction Design

Thought-provoking! A really good article that pushes us to think beyond swiping our fingers on "pictures under glass."

September 01 2011

09:19

The ultimate responsive web design roundup

Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.


Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.


The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.


Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.


Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.


Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.


Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.


Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.


Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.


A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.


Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.


Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.


Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.


CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.


20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.


Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.


A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.


Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.


Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.


The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.


Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.


To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.


The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.


11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.


Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.


Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.


Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.


CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.


Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.


How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.


Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.


How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.


Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.


Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.


Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.


Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.


Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.


Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.


Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.


Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.


FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.


Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.


The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.


Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.


Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.


Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.


Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.


Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.


Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.


Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.


The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).


Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.


Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.


Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.


Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.


1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.


320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.


Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.


Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.


Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.


Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.


SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.


Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.


responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.


Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.


Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.


Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.


Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span


Forgotten Presidents


Ben Handzo


Aaron Shekey


The Highway Hurricanes


dConstruct 2011


Merlin Ord & Media


The Happy Bit


Forefathers


Easy Readers: Adaptive Web Design


More Hazards More Heroes


Facts Regula


Hi, My Name is Andrew


Sifter


FoodDrinkEurope


The Obvious Corporation


Geek in the Park


Mapalong


JCHELBY


10K Apart


Expositio


Food Sense


New Adventures in Web Design Conference


Cisco London 2012


Team PAWS Chicago


Diablo Media


Andersson-Wise Architects


Designing with Data


Full Frontal 2011


Aaron Weyenberg


Web Design Yorkshire


Winnie Lim


Urban Svensson


Luke Williams


Upperdog


Writer


Toronto Standard


Design Professionalism


Impact Dialing


Modernizr


Johan Brook


Dust and Mold Design


Gridchin


Staffanstorp


El Sendero del Cacao


Dustin Senos


Kisko Labs



51bits


digitalHappy


Patrick Grady


Trent Walton


Headshift


Owltastic


WeeNudge


Ash Physical Training


Mark Boulton


The Modern Gentleman


Build Guild


Do Lectures


David Hughes


320 and Up


About.com


Really Simple


Splendid


Leica Explorer


Spigot Design


Cohenspire


Jason Weaver


Joni Korpi


iwantedrock.com


Converge SE


Pelican Fly


Simple Bits


Information Architects


Andy Croll


Hicks Design


8 Faces


The Sweet Hat Club


Little Pea Bakery


Sleepstreet


Andrew Revitt


Cujo.jp


Interim.it


Philip Meissner Design


Teixido


Transfinancieel


UX London


Jeremy Madrid


Brad Dielman


Thomas Prior


Clearleft


Herjen Oldenbeuving


Bureau


City Crawlers Berlin


CSS-Tricks


Robot…or Not?


Marcelino Llano


Caleb Ogden


A Flexible Grid


Simon Collison


More roundups

Here are some more great responsive design roundups from other sites.


Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Source

September 11 2010

07:14

Big picture galleries gaining acceptance at newspapers

Newspaper websites historically have never been photo friendly. In the first five years of the active Internet, most photos were compressed to a postage-stamped size of around 15k -30k. They had to  in those promising days of 28K modems, where one oversized graphic element would bring a homepage to a screeching halt.

I think many photojournalists gave the early Web a big thumbs down as a place to display their work. At my newspaper, us photojournalists’ collectively shrugged our shoulders when the “web guy” would say that he posted one of our photos online.  Later requests on my part, to up the size on our online pictures, was met by one photo manager’s insistence that the images would be downloaded (stolen) or mass-produced across the internet. At that moment I gave up trying and, instead, embraced video as my online medium of choice.

Then, several years ago, Boston.com’s The Big Picture blog rocked my world when it launched.  Here, finally, was a large format online gallery that showcased photojournalism the way it should be. The images were displayed in a format that also didn’t frustrate the viewer with slow page loads. The minute I saw it, I knew we had to have something like it for Spokesman.com. Unfortunately our web team was in middle of developing a ground-up overhaul of our CMS, and it never made the priority list.

While I waited, other newspapers around the country embraced the idea of increasing the format size of their photo galleries. The New York Times Lens Blog, Los Angeles Times, the Chicago Tribune, and many others started big picture galleries.

A few months ago, Ryan Pitts, Spokesman.com’s online director, who was damned tired of my whining, came to me with a surprise. “ I built you a big picture gallery,” he said. After picking my jaw up off the floor, I took a look at what he built.

I was nothin’ but smiles the rest of the day. He gave me the keys, so to speak, to a beautiful Corvette. Behind the scenes, the gallery is really nothing more than a tool that I can access through our web-based Django admin page. I just upload my photos, paste in the captions, add some intro text and a headline, hit save and, drum roll please, instant big picture gallery. The nice thing is, because it is a web-based tool, I can create a gallery from anywhere in the field.

What I like best about our gallery is its clean design. For a long time I pushed the idea of a black background for photos, but our gallery is white and I am fine with that. In fact, I think it is easier on the eyes. I also like how I can pop in drop quotes in between the photos. I am pushing to have commenting on the gallery, which I hope will be enabled soon.

July 01 2010

23:27

Playing around with the iPad: Have you seen anything exciting?

Just got my iPad - held off til my wife could buy me one for my birthday. Thanks, dear! Anyway, I'm looking forward to playing with it. If you've spent some time with one, what apps got you excited? Perhaps interesting interfaces, utility, interaction design, functionality, storytelling, content, presentation, datacentricity, value to you as a citizen or consumer or resident of a neighborhood?

May 15 2010

07:23

When Mount St. Helens came to (my) town

Thirty years ago on May 18, 1980, I was a senior in high school in Spokane, Washington. It was Sunday afternoon and I was still feeling the pain from a beer-induced hangover, you know, the only kind you can get when your best friend Russ throws an  “End of High School” party for most of the senior class.

I grabbed a cup of coffee and went out on Russ’s front porch.  Glancing up at the sky I was perplexed at what I saw. Instead of blue sky, it was brown with a pillow texture to it. “ Must be a dust storm coming,” said my friend’s father who also had no answer for weird brown sky. Suddenly, a robin came fluttering in front of us. It dove hard, landing dead on impact at my feet. I gingerly picked the bird up and when I shook it, a small cloud of dust came off its wings.  What the…

I would soon find out that Mount St. Helens, 290 miles away, had literally exploded in a cataclysmic volcanic eruption. The best part? A dark cloud of ash would soon turn  daylight into darkness. It rained ash overnight and part of the next day. For the next week communities in Central and Eastern Washington banded together to clean up the mess. Ask anyone who experienced the ash fall and I’ll guarantee they’ll have a story to tell.

A week ago, it was politely suggested to me that I should do a multimedia piece for the Mount St. Helens 30th anniversary coming up.

“Sure I can do that, I said. “I’m sure we have tons of photos in the digital archive.”

A quick look showed only a few pictures from that time, many of which had been used over and over. A trip in the print photo archive left me nowhere. It was as if Mount St. Helens ash never came to Spokane. “ Where the hell were all the photos”?

Searching the negative archive I found the whole weeks worth of negatives missing from the box. About to give up, I walked to the far dark corner of the neg room on a hunch. I found a shelf of orphan negative boxes labeled with old projects I was hard pressed to remember.  Running my finger down the labels I stopped on the three words: “Mount St. Helens. “

Bingo!

I think over the years and many volcano anniversaries later, long gone photo editors found that putting all the prints and negs in one box was a good idea. If I hadn’t made that turn into a dark corner, this audio slideshow would have been pretty lame.

My next chore was to find someone willing to write and voice a narrative that would reflect the content of the photos I had edited together.  My go-to guy for historical narratives is staff writer Jim Kershner.

“You wanna do a Looking Back piece for St. Helen 30th”? I asked Kershner.

I could tell Kershner was swamped, but he said he could probably crank something out by the next afternoon.  I told Kershner just to write the story of the first week in Spokane and I would match the photos up with whatever he  wrote.  The next day as I was pawing through old unlabeled negative sheets, Kershner arrived with a killer script in hand. Only two takes later, I was ready to start assembling our St Helens story.  I like to use Final Cut Pro as I find it gives me the most flexibility with photos. I can color correct, put motion on the photo, create multi-photo windows where I can time the show to the beat of the music.

The fun part of this story for me was really the detective part, where I had to find a photo that would match the narrative. When Kershner said “Soon taverns and golf courses began to reopen,” I was lucky enough to find a photo from that week  showing rednecks covered in ash drinking tavern beer and a group of lady golfers walking an ash-laden course.

For music, our company has an extensive Digital Juice music library I can use for multimedia projects such as this. I also used a couple of Garage Band stingers– short mood building clips–that helped set the ominous tone of the ash cloud coming our way.

All in all, it was a fun project to do in such a short amount of time.


May 03 2010

07:16

Feedback website “Finding the Frame” launches

Finding the Frame, a website dedicated to giving feedback to newspaper multimedia producers and video journalists has launched.

My post in Mastering Multimedia last month,  “Video at newspapers needs to improve,” resonated with many people. I received lots emails from producers who vented their frustration at not being able to get feedback on their multimedia stories.

After a brainstorming session over a few beers, Brian Immel, a former multimedia producer and programmer at The Spokesman-Review, graciously agreed to build a website for the sole purpose of connecting those who need feedback on their multimedia, to professionals willing to share some time and knowledge.

Here’s how it works

The plan is to have onboard as many “expert” volunteers as possible that have solid foundations in video storytelling, audio slide shows or Flash projects. This pool of reviewers will peruse the submitted links of multimedia in the “Story Pool”. If they decide to comment on a story, it will then become public on the Finding the Frame home page where anyone else is free to give added feedback.

So why do this?

While most publications have driven head first into the online world, multimedia storytelling is still in its infancy at many newspapers. Unfortunately, not all people tasked with producing multimedia received adequate training or had the financial ability to attend a multimedia storytelling workshop. Many multimedia producers are self-taught, having picked up bit and pieces of knowledge along the way.

When I judge a multimedia contest, I often get frustrated at seeing the same problems in the execution of basic video and audio production fundamentals. Many photojournalists are struggling with how to tell an effective video or audio slideshow story that is different from the traditional still picture story.

Our hope is that Finding the Frame will begin to address the need for feedback and in turn, help multimedia producers improve their storytelling. Just read some of the comments by reviewers so far–you’ll be impressed. The professionals that have signed on as reviewers are the some of the top in the industry. If they critique your story, please thank them for giving up some of their precious time to help out a fellow visual journalist.

What we need

What we need is for enough producers, multimedia editors and photojournalists who have a solid experience with multimedia storytelling to step forward and share some of their knowledge with those that are looking for constructive, honest feedback.

So if you feel you have something to offer, we would really like you to join the pool of reviewers on Finding the Frame.

So go check it out and give Brian and me some feedback. Create an account. Upload a link to a video, audio slide show or Flash project. Be patient, as it might take some time for your story to get reviewed

I am not sure how many people will upload stories, so let’s take this slow at first. It would also be helpful if non-reviewers could give some feedback to others by commenting on their work.

If you would like to be added to the reviewer pool, register your account, making sure you create a profile and upload a photo of yourself or avatar, then email me at cmulvany@findingtheframe.com with the request.

This website is for you. We would really appreciate your support and feedback.


March 20 2010

18:47

The Beauty of India: 50 Amazing Photos

Smashing-magazine-advertisement in The Beauty of India: 50 Amazing Photos
 in The Beauty of India: 50 Amazing Photos  in The Beauty of India: 50 Amazing Photos  in The Beauty of India: 50 Amazing Photos

Today we’d like to publish something completely different for a change. India, the country of mysterious paradoxes; the land where civilizations and times intermix, a mysterious place which attracts people from all over the world. In today’s showcase we are presenting a little showcase of this astonishing contrast between wealth and misery, contemporary technologies and ancient historical monuments, plenty of languages, cultures and traditions.

We present people, places, traditions, culture and a broad overview of the incredible beauty of India — something different and inspirational for a change. Please let us know if you are interested in seeing more similar posts on Smashing Magazine in the future in the comments below.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

The Beauty of India

Heart You

India-001 in The Beauty of India: 50 Amazing Photos

Feet. Jaipur

India-002 in The Beauty of India: 50 Amazing Photos

catching up!

India-003 in The Beauty of India: 50 Amazing Photos

Diwali lights

India-016 in The Beauty of India: 50 Amazing Photos

Aishwarya Rai in the making

India-067 in The Beauty of India: 50 Amazing Photos

Golden Temple before Sunrise

India-066 in The Beauty of India: 50 Amazing Photos

A Dreamer Among the Humblest

India-060 in The Beauty of India: 50 Amazing Photos

10 Interesting Places to Visit Before You Die

India-018 in The Beauty of India: 50 Amazing Photos

Smiling.Pali

India-019 in The Beauty of India: 50 Amazing Photos

A glance inside, a glimpse outside

India-020 in The Beauty of India: 50 Amazing Photos

Dark eyes. Pushkar

India-017 in The Beauty of India: 50 Amazing Photos

Prayer at the Temple

India-021 in The Beauty of India: 50 Amazing Photos

Taj Mahal, the other side. Agra

India-030 in The Beauty of India: 50 Amazing Photos

colors-of-india

India-043 in The Beauty of India: 50 Amazing Photos

Sweeping. Varanasi

India-044 in The Beauty of India: 50 Amazing Photos

India. A table

India-052 in The Beauty of India: 50 Amazing Photos

Colorful Masks

India-032 in The Beauty of India: 50 Amazing Photos

Bananiers en paix

India-034 in The Beauty of India: 50 Amazing Photos

back to India

India-004 in The Beauty of India: 50 Amazing Photos

Silent Prayer / Amritsar, India

India-000 in The Beauty of India: 50 Amazing Photos

Little Red Riding Hood

India-035 in The Beauty of India: 50 Amazing Photos

Golden Slumbers

India-036 in The Beauty of India: 50 Amazing Photos

india – gujarat

India-037 in The Beauty of India: 50 Amazing Photos

colors-of-india

India-038 in The Beauty of India: 50 Amazing Photos

sri meenakshi sundareswara temple

India-039 in The Beauty of India: 50 Amazing Photos

colors-of-india

India-040 in The Beauty of India: 50 Amazing Photos

India style

India-051 in The Beauty of India: 50 Amazing Photos

I n d i a *

India-009 in The Beauty of India: 50 Amazing Photos

colors-of-india

India-015 in The Beauty of India: 50 Amazing Photos

India

India-026 in The Beauty of India: 50 Amazing Photos

India Wedding

India-070 in The Beauty of India: 50 Amazing Photos

Tata Ace – The True India Truck!

India-029 in The Beauty of India: 50 Amazing Photos

india

India-031 in The Beauty of India: 50 Amazing Photos

l’homme de mehrangarh

India-048 in The Beauty of India: 50 Amazing Photos

India

India-054 in The Beauty of India: 50 Amazing Photos

damsel at Pushkar

India-056 in The Beauty of India: 50 Amazing Photos

India- Faces

India-059 in The Beauty of India: 50 Amazing Photos

Mosque (Agra India)

India-061 in The Beauty of India: 50 Amazing Photos

Temple

India-062 in The Beauty of India: 50 Amazing Photos

Lal baba

India-063 in The Beauty of India: 50 Amazing Photos

Colors

India-014 in The Beauty of India: 50 Amazing Photos

India

India-068 in The Beauty of India: 50 Amazing Photos

Would you like to see more similar posts on Smashing Magazine?



Would you like to see more similar posts on Smashing Magazine in the future?polls


© Juliya Izgiyeva for Smashing Magazine, 2010. | Permalink | 108 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Tags: Inspiration

March 16 2010

15:54

The Amazing Art of Disabled Artists

Some of the best artists deal with disabilities in their everyday lives that the rest of us can’t even imagine living with, and use art to communicate with the world. The results are often stunning.

We’ve collected biographies and sample pieces from outstanding disabled artists, both famous and lesser-known.

The artists below paint with their hands, their mouths and their feet.

Many are blind or suffer from mental disabilities, yet they produce some of the most beautiful and intricate artwork that you can imagine.

Their achievements are arguably epic in the face of the adversity that they face.

We hope that the artists in this post inspire your designs and make you look at adversity in any field as a surmountable obstacle.

Stephen Wiltshire

Disability: Autistic Savant

Wiltshire was born in 1974 in London to West Indian parents. He is an autistic savant and world famous architectural artist. He learned to speak at the age of nine, and at the age of ten began drawing detailed sketches of London landmarks. While he has created many prodigious works of art, his most recent was a eighteen foot wide panoramic landscape of the skyline of New York City, after only viewing it once during a twenty minute helicopter ride.


Maria Iliou

Disability: Autistic

Maria Iliou is a Greek artist with autism spectrum disorder. She lives in Long Island, New York, and is an advocate for the rights of people with autism.


Joseph Cartin

Disability: Bipolar

Cartin is from Brooklyn and actively lives with bipolar disorder. He has been active in the Mental Health Consumer Movement since 1990 and considers himself a “psychiatric survivor”. He has won numerous art competitions and does corporate design work in addition to his art.


Peter Longstaff

Disability: Missing Both Arms

Peter is a foot painter. He creates all of his artwork using just his feet, having no arms. Peter’s disability stemmed from the drug thalidomide, which was prescribed for morning sickness until it was discovered that it caused deformities fetuses. After living most of his life without arms, Peter considers his right foot to be like the right hand of most people, using it dexterously to open doors and perform many other everyday tasks.


Willow Bascom

Disability: Lupus

Willow grew up in Saudi Arabia and Panama, where her father was a pilot on sea vessels. Her early introduction to varying cultures made her a huge fan of tribal art. Later in life she was struck with lupus, and started drawing when it went into remission.


Alice Schonfield

Disability: Diminished capacity through multiple strokes

Although Alice Schonfeld is most known for her sculpting work primarily in Italian marble, she is also regarded as an inspirational figure for the disabled community. She has shown a considerable tenacity to work through debilitating illnesses and has done a lot to promote awareness of disable artists. She resides in California.


Keith Salmon

Disability: Visually Impaired

Keith is a blind fine artist and avid mountain climber. He has climbed over a hundred Munros (a type of Scottish mountain), one of which can be seen in the first painting below. In 2009 he won the Jolomo award for Scottish landscape painting.


Lisa Fittipaldi

Disability: Visually Impaired

Lisa not only learned to paint after losing her sight, she wrote a book about it. Her inspiring use of color and her ability to tell which color she is using just by feeling the texture of the paint are just two remarkable facets of her story.


Matt Sesow

Disability: Missing a hand

Just six years after losing his hand as a child in an accident in which a crashed plane severed his arm and took away his dominant hand, Sesow played for the US team in the disabled Olympics in England. While working at IBM as a software engineer, he began painting scenes in oils that were influenced by his traumatic injury.


Michael Monaco

Disability: Quadriplegic

Michael Monaco is a quadriplegic who paints with his mouth. His work has been featured in global exhibitions and he is a member of the Mouth and Foot Painters Association.


Simon Mark Smith

Disability: No lower arms or right foot

Simon has no lower arms or right foot. In addition to his still paintings, he teaches digital photography and writes poetry and prose. He is also a web designer.


Dennis Francesconi

Disability: Paralysis

Francesconi is a mouth painter that excels at adding a high level of detail in his works, especially considering his method of painting them. He has participated in over 75 exhibitions around the world.


A. Erich Stegmann

Disability: Loss of arm use through polio

The first President of the Association of Mouth and Foot Painting Artists of the World, Stegmann lost the use of both arms and hands from polio at the age of two. A prominent mouth painter, he formed the association around 1953 and was voted president for life. The association continues to be home to hundreds of Mouth and Foot painters globally.


Richard Wawro

Richard Wawro was a prominent and prolific autistic savant artist from the United Kingdom. He began drawing at the age of three, and immediately covered the chalkboard with a number of detailed images.


Jessy Park

Disability: Autism

Jessica Park is an autistic artist from Massachusetts. She starts with a sketch of the scene and may refer back to a photograph for more detail later. Her mother wrote a memoir about Jessy’s story.


Ping Lian Yeak

Disability: Autistic Savant

Ping Lian is an autistic savant who has been producing amazing art since his childhood. He is now fifteen. More of his amazing art may be viewed at his website.


Christophe Pillault

Disability: Autistic Savant

This French autistic savant artist was born in Iran. He is unable to speak, walk or feed himself, but he produces paintings of flowing, beautiful figures. His art has been exhibited globally.


George Widener

Disability: Autistic Savant

Widener is a famous autistic savant artist whose works are exhibited in museums and galleries nationwide. He not only creates intricate works of art; he is also able to make complex calculations in an instant.


Gilles Trehin

Disability: Autistic Savant

The city of Urville exists solely in the mind of this French autistic savant artist. His elaborate sketches of the city are executed in intricate detail. He has published a book with over 300 detailed sketches of his fabled city.


Amanda LaMunyon

Disability: Asperger’s Syndrome

LaMunyon is a talented child artist that began painting when she was only seven. She is now twelve. In kindergarten, instead of cutting out letters to illustrate her alphabet, she drew her own.


Resources


Compiled exclusively for WDD by Angela West.

Do you have a favorite artist who is living with a disability? Please include a link to their works in our comment section.




If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Q9gi7r

January 21 2010

18:14

Mastering Multimedia useful tips roundup


Many of may old posts that deal with tips about how to do video storytelling and audio slideshows get linked on a lot of blogs used by college professors who teach digital media classes. Most of these posts are buried amongst my pontifications about the changes facing the newspaper industry. So for anyone interested,  here is a roundup of my best multimedia suggestions and useful tip posts in one place…

How to make your audio slideshows better

Great audio starts in the field

How best to approach a video story

Sequencing: The foundation of video storytelling

How to make your video editing easier

Get creative with your video camera

Opening your video: How not to lose viewers

Random Final Cut tip: Lower thirds titles

What we can learn from TV new shooters

January 04 2010

00:13

November 23 2009

19:26

Will the touch tablet save professional journalism?


Someone should just put a deadbolt on my laptop lid. When I peruse my Twitter feed I see nothing but scary newspaper industry news, which flows like a river of red ink across my pixels. Reading too much of it makes me think a prescription for Prozac might be in my future. I’ve begun to notice even journalism pundits have started to turn on each other by criticizing the need for yet another conference on “Envisioning the Newspaper of Future.”

Truth be told, know one really knows when printing presses will grind to a stop and news delivery boys and girls will hang up their logoed paper bags for good.

I had to laugh,  last week in Portland, Oregon, my former newspaper editor Steve A. Smith was the keynote speaker at “We Make the Media“A conference held to develop real-world plans for new media organizations to fill the journalism gaps left by shrinking news staffs at legacy media organizations.” As Smith was speaking about the need to save “professional” journalism, back in the corner of the room were a bunch of self-proclaimed snarky bloggers and citizen journalists who took offense to the notion professional journalism should be saved. Of course they twittered their opinions in real time. This, I guess, is the new digital divide, where any journalist older than thirty is viewed with mistrust. Hmmm, where have I heard that before?

It does seem the pace of handwringing is accelerating. The print folk, locked in their silos, are defending their turf as they make their last stand. Online departments are taking the brunt of the next wave of job cuts. If newspapers can’t hold the line on circulation and revenue, it will soon be curtains for the rest of us still drawing a paycheck. Or so I’m told. I hope I can last a bit longer, only because I truly believe, if we can make this digital transition, the future will not be as dismal as I was once led to believe.

Here’s my vision of how I see it playing out in the near future:

  • A new breed of touch tablet readers hits the market in 2010-2011. Newspaper publishers at first shun the devices. Then one gutsy newspaper chain embraces them. They form a partnership with the tablet maker to subsidize the cost for the consumer. The more publications a consumer subscribes to, the less they have to pay for the reader. Others soon follow…
  • A newspaper’s survival will be based on how many current subscribers can be converted to the digital replica of the newspaper. Replica is the key here. A newspaper’s digital future starts with making the transition simple (familiar) for  print consumers to make. It’s the newspaper, only better…
  • What will sell the tablet service is all the new things subscribers will be able to do with their wireless digital newspapers. Pictures will come alive with video and audio, graphics become interactive with a tap of a finger, Text can be set to be read aloud. Subscribers should easily be able to customize the paper to fit their needs. Want the sports page as your front page? No Problem. Want more stories about your favorite pro baseball team? You bet!
  • The value to the tablet subscriber has to be so huge that they be crazy not to plunk down their cash.  The same goes for advertisers, whose ads will now have added value. Tap on an ad for a big-screen TV at Best Buy and get more info about the product. Tap a grocery store coupon to print it out.
  • Advertisers should be allowed to update their ads in real-time. Think about it. Let’s say you’re a local shoe store looking to move 1000 pairs of shoes. You place the ad in the morning showing the shoes at 20% off. By 2 p.m. you have 500 left and you want to sell them faster, you log into your account and update the ad yourself, dropping the price to 30% off. Don’t you think a whole bunch of those types of ads would draw traffic to a digital newspaper?  How about subscriber-only deals? Advertising will be targeted to subscriber’s tastes and talents.
  • Everyone talks about how they can’t make any money in online. The simple truth is most newspaper Web sites are not easy to navigate. They can’t display ads as effectively as a print newspaper. If newspapers are going to make this digital transition successful, then making the viewing experience for former print subscribers and advertisers as elegant as possible is paramount.

Finally, a few words about content. Our journalism is what’s most important and will no doubt have to be upgraded. Words and multimedia will need to work better together. The strength in the touch tablet is in its multimedia capabilities. Visuals like photo galleries, graphics, and hi-def video, will add value. Like your current Web site, the front page of the digital newspaper will change as stories are updated throughout the day. The page design will slowly change to integrate new content features.

Once this happens,  the true digital media revolution will begin to take place. Yes, the presses will eventually stop, which will only strengthen digital media’s position. Freed of the cost of printing and distribution, more resources will go to content creators. This is when the fun really starts. True innovation will kick in with each new tablet version. New types of devices will drive even more innovation and hopefully a super-renaissance of journalism. My vision may be utopia to some, but the internal optimist in me really believes there is a future in professional journalism.

November 19 2009

20:44

Thought for the Day

Be better than you were yesterday.
Jack Cheng, where have you been all my life?

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl