#future friendly

[je553]

We’re finally realizing that the web isn’t a 960-pixel-wide box and are taking steps to return the web to its inherently fluid nature.

http://alistapart.com/article/for-a-future-friendly-web

[danajwright]

A Starting Point For Mobile-First Development: The Meta Viewport Tag and Small-Width Layout

The meta viewport tag is typically the first step in building any responsive site. The key principle here is that when it comes to devices, a pixel is not necessarily a pixel. The meta viewport tag sets the width to the reported device width. The iPhone for example has an actual width of 640px. However, because of pixel density, the iPhone width is reported as 320px. So the following code (inserted into the head of your markup) sets the width to 100% of the reported width of the device, whatever that happens to be:

meta name ="viewport" content="width=device-width, initial-scale=1;"

Building mobile-first means beginning with a mobile first media query, which gives you a small-width layout as a starting point:

@media only screen and (max-width: 20em) { /* applies to devices with less than or equal to 320px width */ }

Once that looks good, you use min-width media queries to build out from there. This is because each media query is built on top of the rest, beginning with one column and working up to traditional desktop layouts. Next up: Achieving pixel independence with relative units.

[danajwright]

For Resolution Independence, I Use SVG Images with PNG Fallbacks

While you may not notice the difference in quality between SVG images (vector-based) and raster-based images on a desktop, you definitely will on high-res/ retina display mobile devices. For a while there, there was no easy way to use SVGs and fallback to PNG on older browsers, that is, without using Javascript. Then, just this summer, Alex Ten came up with a solution:

svg width="96" height="96" image xlink:href="svg.svg" src="svg.png" width="96" height="96"/ /svg

This simple and elegant approach works because browsers alias image tags to our beloved img tag and browsers that recognize SVG fetch the xlink:href instead of the src (as this is non-standard). You can have your SVG markup inline and it will be ignored by browsers that don't support SVG, while the src attribute is ignored by those that do.

[danajwright]

What is Mobile First and How do I Build Stuff That Way? I'm Doing a Series of Tutorials on the Most Useful Things I've Learned

Building a site mobile-first forces the developer to prioritize and put content above all else. For those who are new to responsive work flow, I'm not sure any amount of convincing will persuade you to try this right off the bat. I myself built two responsive sites the backwards way before seeing the virtue of building mobile first. Since then, I've come around and am now a true believer. Focusing my energies on the mobile experience at the outset has allowed me to figure out quite a few tricks to make the mobile experience exceptionally good. Here are the techniques I plan to cover in a little series, which I hope will benefit other people just starting out: The meta viewport tag and mobile first media queries, relative units, responsive images, detecting touch events/ scrolling, using matchMedia (the javascript media query), minifying files, even more cool stuff with media queries and, for super-badass mobile sites, application caching.

[superfine-de]

Via Future Friendly via Brad Frost

[superfine-de]

[uxmorsels]

Over half of the world’s population lives in urban areas - a number that is expected to grow to about 75% by the year 2050. This fact is becoming exponentially clear to urban planners, architects, builders, and designers the world over. But what does this mean? It means that in the next 35 years we as humans will have to reshape the way we live and work together.

As a web developer I was quick to draw a correlation between urbanization and the current state of the web. A few years ago it was assumed that the average user was comfortable, stationary, and had a high speed connection. However now we live in a world where just about every device has the ability to connect to the Internet. We no longer can dictate how our users consume our content. And in that vein it has become extremely important for those of us working in the web to understand the ubiquity of our content.

In this way we as web designers and developers are facing the daunting role of adapting to how humans interact with our content. A role not too different from urban planners and designers facing rapid urbanization.