Home Directory Services Articles Get Listed Login

Building a Responsive, Future-Friendly Web for Everyone

*Attention PHP Programmers* - Add A Free Listing! Get more clients.

This week’s Consumer Electronics Show in Las Vegas has seen the arrival of dozens of new devices from tablets to televisions. Some of these newfangled gadgets will soon be in the hands of consumers who will use them to access your website. Will your site work? Or will it end up mangled by a subpar web browser, odd screen size or slow network connection?

No one wants to rewrite their website every time a new device or browser hits the web. That’s why approaches like responsive design, and the even broader efforts of the future-friendly group, are trying to develop tools and techniques for building adaptable websites. That way, when a dozen new tablets suddenly appear on the scene, you can relax knowing your site will look and perform as intended, no matter which devices your audience is using.

Even if you aren’t a gadget lover, CES should help drive home the fundamental truth of today’s web — devices, they are a comin’. Webmonkey has compiled helpful resources for creating responsive design in the past, but the field is new and evolving rapidly so here’s an updated list of links to help you get started responsive, future-friendly sites that serve your audience’s needs whether they’re browsing with a tiny phone, a huge television or the web-enabled toaster of tomorrow.

Basics:

• Use @media to scale your layout for any screen, but remember that this alone isn’t really responsive design.
• Use liquid layouts that can accommodate any screen size. Don’t simply design one look for 4-inch screens, one for 7-inch, one for 10-inch and one for desktop. Keep it liquid, otherwise what happens when the 11.4-inch screen suddenly becomes popular?
• Roll your own grids based on the specifics of your site’s content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don’t fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
• Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around. Starting with the smallest screen and working your way up means it’s the desktop browsers that need to handle @media, make sure older browsers work by using polyfills like Respond.
• Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
• Scale images using img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screens. Similar techniques can be used to scale video.
• Forget about perfect. If you haven’t already, abandon the notion of pixel perfect designs across devices. An iPad isn’t a laptop isn’t a television. Build the perfect site for each.

Further Reading:

• Future Friendly — An overview of how some of the smartest people in web design are thinking about the ever-broadening reach of the web: “We can’t be all things on all devices. To manage in a world of ever-increasing device complexity, we need to focus on what matters most to our customers and businesses. Not by building lowest common-denominator solutions but by creating meaningful content and services. People are also increasingly tired of excessive noise and finding ways to simplify things for themselves. Focus your service before your customers and increasing diversity do it for you.”
• Building a Future-Friendly Web — Brad Frost’s excellent advice: “Think of your core content as a fluid thing that gets poured into a huge number of containers.”
• There is no mobile web — “There is no mobile web, nor desktop web. It is just the web. Start with the content and meet people halfway.”
• Responsive by default — Andy Hume on why the web has always been responsive, but was temporarily sidetracked by the fad of fixed-width sites.
• COPE: Create Once, Publish Everywhere — NPR’s Director of Application Development, Daniel Jacobson, walks through how NPR separates content from display and uses a single data source for all its apps, sites, APIs and feeds. A great example of what Frost talks about regarding content as a fluid thing.
• Support Versus Optimization — It can seem daunting to support dozens of mobile browsers, but if you aren’t up to the challenge of a few mobile browsers now what are you going to do when you need to support car dashboards, refrigerators, televisions and toasters, all with dozens of varying browsers?
• The Coming Zombie Apocalypse — Not satisfied thinking a few years ahead? Scott Jenson explores further into the future and tries to imagine what the web might look like when devices all but invisible.

Techniques:

• Content Choreography — Trent Walton discusses various ways of collapsing content for small screens while still retaining hierarchy.
• The Current State of Responsive Images — There’s more than one way to scale an image.
• Fluid Grid Calculator — Once you’ve figured out the basics of your grid based on your content, this handy calculator can simplify the rest of your grid math.
• Responsive web design from the future — GitHub’s Kyle Kneath on the HTML5 History API and how it relates to responsive design.
• Debugging CSS Media Queries — Johan Brook on how to find and squash bugs in your @media queries.
• Responsive data tables — Chris Coyier shows you how to build flexible tables by ditching the grid layout of the table and make each cell its own line.

Source http://www.webmonkey.com/?p=53657
Thu, 12 Jan 2012 17:11:23 GMT
Tags: CSS, future friendly, HTML5, JavaScript, Mobile, responsive design, responsive images, UI/UX, Visual Design, Web Basics,

---

*Attention PHP Programmers* - Add A Free Listing! Get more clients.

---

CSS

---

future friendly

---

HTML5

---

Members:

Facebook and Others Aim to Make the Mobile Web a Competitive App Platform

Facebook, Mozilla and others have teamed up to create a new web standards group to work on creating

---

Google Throws New ‘Dart’ Programming Language at the Web

It’s not every day that someone tries to add a new programming language to the web. There̵

---

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 s

---

W3C’s New ‘Do Not Track’ Group Aims for Better Web Privacy

The web's governing body has embraced the "Do Not Track" header, which might one day stop advertiser

---

W3C’s New ‘Community Groups’ Give Everyone a Voice in HTML5

The World Wide Web Consortium (W3C), the web’s governing body, has launched a new "Community Gro

---

Article Tags
PHP Programmers Articles
Friends:
Live Help Chat Software
Web Design Quote
Web Design