One Website That Works At Your Desk And On A Smartphone
Posted August 11th 2011 @ 5:29 pm by JerodOur web guy and I have had some interesting, and at times heated, discussions lately about mobile web strategy. While we’re not 100% sure what we’re going to do for a Church Juice mobile site yet, something interesting came up that I’d never heard about before. It’s called progressive enhancement or responsive design. To get a little technical here, is uses some JavaScript to change the style sheet for content based on the detected size of a browser window. Basically content is rearranged, or deleted, when a screen goes from full size to something smaller like a smartphone. And you can have stops in between for tablets or smaller desktop screens. Instead of displaying content by what device people are using, the screen size is the only thing that matters. I like this idea because you’re designing and developing a single site that has multiple variations. You’re not looking at two different, inconsistent things or building separate desktop and mobile sites.
Beyond the practical, user benefits of progressive enhancement, I like the way it forces you to think when you’re in the early stages of developing a website. You have to have a mobile first approach, which is important as smartphone use continues to grow. Whatever is the most important content to a mobile user becomes the basis of your design, because that’s what’s seen when the adaptive site is in its minimal size.
Second, in progressive enhancement, you have to organize information in boxes or clusters. Pieces of content will move to different places based on browser size. Not only are you better organizing content, but you’re also assigning each cluster a level of priority.
Finally, this kind of design is future proof. You’re no longer dependent on what devise people are using and you’re not necessarily out of date when someone like Apple comes out with something new. Since adaptive design only cares about browser size, the actual device is irrelevant. It adapts the style by giving the best option for the size of the screen.
Here’s an example of what this looks like from stephencaver.com:
And here are some more links, too. When you open these sites, start changing the size of your browser by dragging up the bottom left corner. You can see the site change.
Anyway, it’s a cool idea, but takes some technical savvy to do for sure. What do you think about it?
Comments (3)
I think it’s a professional touch that separates the pretenders from the contenders. Mobile web usage is only going to increase in times, as well as tablets, small screens, etc. Having the browser and site in proper proportion is nice attention to detail.
Love the concept. We’ve been trying to now take our newly designed website (and building a church app currently) and move toward a mobile version after app is built. But I’d totally rather make it based on browser size. Can I call you more about this technology?
Great idea. And let’s not forget that browsers are also getting bigger with Smart TV. How well will sites translate onto a 50-inch HD flat screen TV?
Regardless, when it comes to church sites, it still comes down to simplicity, doesn’t it? And routing people quickly and easily to the places you want them to go. To me, it’s about getting them to spend less time online and more time engaged with each other and with their communities in the flesh. A church site should fish for people in the ether and reel them back into the real world.
Already a member?
If not, take a moment to
register for added benefits