Found Objects
This is Keith's collection of interesting things he has found on the web.
-
A Simple Responsive Exercise
This is a quick example, see links at bottom for more in-depth tutorials.
Here’s a simple little responsive page I created… it’s one page and optimized for the normal web, retina-display iPhones, and non-retina iPhones / iPod Touches.
When resizing the page on your laptop / desktop, you won’t see anything shift around. That’s because I’m targeting a device-width of 320px with either a device-pixel-ratio of 1.0 or 2.0 (original iPhone resolution, and retina display resolution).
Setting the Viewport Width
Mobile Safari assumes a width of 980px for any website (by default, the browser doesn’t know the width of your device’s viewport). You need to make sure to include a meta tag that will set your site’s width to either 320 or 640 pixels:<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Using Media Queries
Setting up media queries is actually quite easy. In the example below, we’re targeting devices with a max width of 320px (this includes BOTH non-retina and retina iPhones) and a pixel density of 2. This can be a bit confusing at first, I know, but this is how it’s done.@media all and (max-device-width: 320px) and (-webkit-device-pixel-ratio: 2.0) {
/* css rules go here */
}Visual Differences
In the examples below (click through to see them full size) you can see how I’m adjusting the content’s display simply by using some CSS media queries. I’ll briefly discuss the variations below these examples.
Variations
There aren’t any dramatic differences between each variation, and that’s the point - to create a page that retains a similar aesthetic between each device (with the exact same functionality). I’m simply tweaking and optimizing the page for mobile devices.- The “profile” pic disappears on mobile devices
- The header text shifts around for each mobile resolution
- Our contact button moves underneath the header text for mobile
- For the non-retina iPhone, our background image is getting quite large so I’ve shifted the image slightly to the left with background-position.
- We lose the background pattern and image borders / drop shadows for the mobile version
Further Optimization
In this exercise, I’ve only targeted the iPhone, but if I wanted to really optimize this for all phones, I would take it a bit further with some additional media queries targeting different device-pixel-ratios and screen widths. iOS has ratios of 1 and 2, but Android has ratios of .075, 1, 1.5, and 2. You can see how this can get a bit complicated - the continuing fragmentation of device resolutions and pixel densities necessitates the need for responsive design.I’ve also neglected to load smaller images for our non-retina mobile users (in these examples, the images simply scale down to a max-width of 100% of their parent element). With CSS media queries, you can serve up different images to different devices - enabling you to save bandwidth for your users.
For more about Responsive Design…
- Read Ethan Marcotte’s book
- Read Ethan’s original article on A List Apart
- Think Vitamin - a beginner’s guid to responsive design
- Smashing Magazine has a tutorial here
- Web Designer Wall has a simple 3-step tutorial
- More links welcome, email me at keith[at]meetduo[dot]com
-
betashop: Behind the Scenes: How Fab Raised $40 million with a lot of data and not much pain »
Let’s face it, fundraising can be a real pain in the ass for the entrepreneur.
It takes up a ton of time that can be otherwise spent managing the business.
Sure, it’s a necessary evil, but it’s also typically a big distraction.
It’s also a lot like dating. You have to go on a lot of first dates…
-
One for the ladies pt.4
-
-
Gimme Bar: Day Three - Backups »
Day three. The midway point. Also known as the day on which we release our favorite feature: Backups. We know that when most of you think of backing things up you think of the dance floor so let’s take a second and break down what backups mean in Gimme Bar land.
We think of Gimme Bar…
-
the understatement: Android Orphans: Visualizing a Sad History of Support »
The announcement that Nexus One users won’t be getting upgraded to Android 4.0 Ice Cream Sandwich led some to justifiably question Google’s support of their devices. I look at it a little differently: Nexus One owners are lucky. I’ve been researching the history of OS updates on Android phones…
-
jmak:
Thanks, Steve.
Posting designs like this one makes me paranoid, because I can’t shake the feeling that it’s not original. I enjoyed the process regardless, but please let me know if somebody else beat me to the idea!
Thoughts?
-
(via Flashback: Time To Bring In The Earthquake-Proof Depthscraper!: Gothamist)
-
Really, Dominique, don’t touch my wife (by International Monetary Fund)
-
i make shiny things: Not cool Urban Outfitters, not cool. »
One of my lovely customers sent me a message today with this link.
And here is my United/World of Love line:
My heart sank a little bit. The World/United States of Love line that I created is one of the reasons that I was able to quit my full-time job. They even stole the…
