Time for a Responsive Web: 11 Responsive Design Resources

This may come as a surprise coming from a designer, but I am done with mobile websites. It’s time we get away from creating two entirely separate designs — one for desktop browsers and one for mobile sites. If we really want a web that is accessible across all devices, we need to put aside technology that divides.

I’m ready to admit that responsive web design is not for everyone. There will always be a few niche situations that call for desktop-​​only delivery of content. These should be outliers, though. In the vast majority of cases, website users want to simply get on your site, get the information, and move on to their next point of interest. But, we seem to have bought into the cumbersome, problematic process of detecting mobile browsers and forwarding mobile users to a separate site.

This is counterproductive on many levels:

• Two separate designs must be maintained and updated. They can easily fall out of sync or out of date.
• Not all content is generally available to mobile users compared to desktop users.
• Often, two distinct sets of content must be maintained.
• User-​​agent detection doesn’t always work, so the wrong site gets delivered.

What Are My Options?

You have three ways to attack the problem:

1. Stick with the separate mobile site, since this is likely where you’re currently at right now anyway.
2. Design for flexibility, but don’t create a mobile-​​unique experience.
3. Design a responsive website that adapts based upon screen size.

The last option is my personal favorite and there are lots of tools available today to help you design a site that responds to users, but delivers the same content.

What Changes with a Responsive Web Approach?

Mostly you’re going to have to dump any web technology that doesn’t work on a mobile browser. This means that some jQuery and all Flash probably won’t work anymore for you. Minimalism becomes the primary methodology, and you’re going to have to think in terms of keeping your payload light. Avoid those 1MB PNG files, for example (small tear… they’re just so pretty!).

Tools for a Responsive Web Design

Building responsive websites can be a significant challenge, because it always starts with the site visitor and their needs. There is no one-​​size-​​fits-​​all approach, and if you’re the designer, you’re probably going to have a hard time selling this concept to your clients who want a glossy, flashy, graphic-​​heavy website that is tailored for each and every browsing device. You don’t have to give up creative designs, though. After all, this is about site architecture, not content.

The following are some tools that I’ve pulled together to get you well on your way to designing sites that are responsive to users, so you can get away from this dualistic approach of building and maintaining two separate sites. Whether you have a WordPress site, some other CMS, or just want to take your design methodology towards responsiveness, these tools will get you on the right track and open your mind to some new ways to handle responsiveness.All of these themes and tools are free.

Responsive WordPress Themes

If you’re like me, you’re managing websites running on a CMS like WordPress. Instead of a redesign, consider starting with one of these base themes and modifying it to fit your design and brand needs. The themes below are free, but don’t forget to check out premium themes that may get you a lot closer to your desired aesthetics and responsive functionality.

Renova

I like this responsive theme because it’s so easy to modify. And, it’s already stripped down, so it’s a lot easier to start adding my own brand.

Get It | Demo

Yoko

Another minimalist design that incorporates images that resize based upon the screen size. It’s simple and easy to modify.

Get It | Demo

Buttercream

Getting away from a minimalist design, this is an excellent example of a responsive theme with lots of character.

Get It | Demo

Design Tools

If you need some baseline tools for building your own responsive website, these will get you on the right track. Most of these are geared toward a pre-​​built system that you can use as a starting point for fast deployment of your site.

Gridless

A slick system for responsive sites, Gridless is a great bare-​​bones set of files that’s ready to go. There’s literally a blank index.html file to start with, linking to the appropriate CSS and JS files, and that’s it. The designs are very responsive and backwards compatible as well.

Get It | Demo

Get Skeleton

If you want to start with a solid set of CSS and HTML compliant files, Get Skeleton is a really nice place to start. Just start adding content. It doesn’t get much easier and Get Skeleton performs well on older browsers.

Get It | Demo

Adapt.js

So, maybe you don’t want to start over with a template like Gridless or Get Skeleton. Adapt.js is a very small JS file that checks the width of the screen — even after a resize such as rotating the screen — and delivers the content as needed. The advantage is that you can style for any screen size, allowing you to make adjustments for any number of mobile devices and screen widths.

Get It | Demo

Testing

So you’ve got your design ready, how can you be sure it’s going to work? Here are a few testing tools that you can use to make sure your design functions responsively in the real world.

Responsive

Just type in the URL and see how the design reacts to various screen sizes. It’s easy and device agnostic.

Use It

W3C MobileOK Checker

The source of all things HTML, W3C is home base for validation testing, and their MobileOK checker makes it easy to make sure your responsive design works and will be supported.

Use It

Test iPhone

It’s pretty straightforward — if you want to test how your site will work on an iPhone, this is a great little site. You have to actually type in the browser of the iPhone, but it does a great job of emulating the interface.

Use It

iPadPeek

Like Test iPhone, iPadPeek lets you test how iPads will interpret your design.

Use It

Opera Mini Simulator

Opera Mini is a very popular browser on very small phones and is used almost exclusively in developing areas of the world (it’s also in a number of well-​​developed countries as well). It’s always worth testing your design on this device, especially if you’re using any JavaScript.

Use It

Shared from designfestival.com

Lorempixum – placeholder images for every case

This is a pretty cool tool for all you web designers/developers out there.

Ever struggled to find an appropriate placeholder image? And when you do find one you then have to crop it to the right dimensions.

Well this site at Lorempixum.com takes all the work out of it. It’s a placeholder image generator, you choose the size of the image and a theme, you can then copy and paste the image to your site.

Alternatively, just put this custom url in your code like this:

<img src=”http://lorempixum.com/400/200″ />

to get your FPO / dummy image.

via lorempixum – placeholder images for every case.

Facebook Auto-Tagging Now Outside North America

Facebook Auto-Tagging Now Outside North America.

Sophos, the IT security and data protection firm, has advised Facebook users to review their privacy settings, even as reports have stated that the social networking website has enabled facial recognition for photo tags for many users.

The Wilderness Downtown

Click here to see ‘The Wilderness Downtown’ by Arcade Fire.

Take a look at this, no flash needed so make sure you don’t use Internet Explorer as it’s done in HTML 5 showing the way forward. IE is slowing the web down by not embracing new technologies and open source – what are they waiting for.

This is the new video for Arcade Fire and is promoted via a clever viral, listen and learn!

Web Designers v Web Developers

Check out this fun illustration

CSS3 linear gradients – Dev.Opera

CSS3 linear gradients – Dev.Opera.

For as long as we can remember, we have used colour gradients on the Web to brighten things up, and add class to designs. If you want to create a fantastic looking button, panel, gauge, progress bar or other UI feature, a gradient is the way to go.

Up until now, we have always used repeated background images to create gradient effects. The CSS is simple, and creating a gradient using Photoshop, Fireworks, or another graphics tool is not hard. However, doing it this way is rather inflexible, given that if you want to vary the colour scheme or other features of the gradient, you need to go back to your graphics tool and create another image! Wouldn’t it be better if you had complete control over the gradients using CSS?

CSS3 comes to the rescue with the CSS Image Values and Replaced Content Module Level 3: part of this module defines CSS gradients, which allow us to create any gradients we want using only CSS. In this article I will explore how to use linear and repeated linear gradients, which are supported across Opera 11.10+, Firefox 3.6+, Safari 5.03+ and Chrome 7+.

Browser Support for CSS3: What’s the Current Status?

Browser Support for CSS3: What’s the Current Status?

Creating a website with HTML5 and CSS3 without having to worry about using techniques like progressive enrichment and polyfills is the ultimate dream for modern-day front-end developers.

But unfortunately, mainly because of the widespread use of IE6-8, that is still just a distant dream. But it is getting closer.

I thought it would be a good idea to summarize where CSS3 stands as far as browser support goes, so you can feel comfortable making decisions about what to use or abuse when incorporating CSS3 into new projects.

This outline will be divided up into sections beginning with the safest CSS3 features to use, and going down the list towards the not-so-safe. Of course, in all cases, you have the option to declare fallbacks and polyfills that will give nonsupporting browsers a similar and/or acceptable experience. Just remember to take care that your content is accessible and your brand isn’t negatively impacted by any design decisions you make. Also, for the purpose of this article, I’m only taking into consideration A-Grade browsers.

Click the title above for the more in-depth article.

Bokeh with CSS3 Gradients | Nimbupani Designs

Bokeh with CSS3 Gradients | Nimbupani Designs.

I like this a lot, CSS3 gradients, shapes and making it look like bokeh, quite an elaborate way though when you can just use an image but it shows what you can do with CSS3 and of course don’t expect it to work in Internet Explorer.

Bokeh is a photographic term for background objects/lights when they are well out of focus and look like circles and some lenses have good bokeh others don’t.

Want to know more about bokeh or whether your SLR lens has good or gad bokeh, then I hand over to the excellent Ken Rockwell.

iPhone Makes Up 50 Percent of Smartphone Web Traffic In U.S., Android Already 5 Percent

iPhone Makes Up 50 Percent of Smartphone Web Traffic In U.S., Android Already 5 Percent.

Heres a very good reason to be thinking very carefully about how we go about designing websites and making sure they are fit for purpose on different devices.

Yes, it’s going to take ages delivering for them all, but the good thing is just now that if we think about iPhones we are getting 50% of the Smartphones.

Most importantly, iPhones don’t support Flash so remember that when site designing. Include an iPhone style sheet if there is Flash and serve an image and some text instead, that’s always going to be better for SEO anyway.

The iPhone now accounts for 50 percent of mobile Web traffic from smartphones in the U.S., according to an AdMob Mobile Metrics report released this morning. Over the past six months, the iPhone has taken share from Blackberry and Windows Mobile. In August 2008, the iPhone made up only 10 percent of mobile Web traffic from smartphones. During the same time, Blackberry’s share has gone from 32 percent to 21 percent (with the Curve and the Pearl coming in stronger than the Storm), while Windows Mobile has taken an even bigger hit, declining from 30 percent to 13 percent. Palm is also down to 7 percent from 19 percent six months ago.

The only other smartphone operating system that is showing gains in mobile Web usage is Android, which has captured a strong 5 percent share just three months after launch. And that is up from 3 percent in January. The gains shown by the iPhone and Android show what is possible when phones are built with fully capable browsers and support a rich array of Web apps.

On a worldwide basis, smartphones running on the Symbian OS (mostly from Nokia) still dominate mobile Web traffic with a 43 percent share. But that is down from 64 percent in August. The iPhone has gone from 4 percent to 33 percent of mobile Web traffic on a worldwide basis. All the other mobile operating systems are down as well.

This data is extrapolated from AdMob’s mobile ad network and only looks at smartphone share. Overall, smartphones generated 33 percent of worldwide mobile Web traffic, up from 26 percent six months ago. The full report is embedded below.

Website Design Trends for 2011

Website Design 2011 | ShutterVoice Review.

by Arghya Chatterjee

Website design is the face of a website that tells the story about its body, previously it was done to stylize the site but with the advance of web technology, designing is a part of interface synchronizing the site with tabs and links. As the web technology is advancing with the invention and modification of languages, designing is getting a whole new role of improvising the website content with proper looks.

The changes are going to affect deigns in the coming future is the new languages and standards browsers going to adapt in the near future. Along with Apple, many of the web designers have deserted building animations in flash and instead they are using JavaScript which is far more stable and less buggy, another added advantage of JavaScript is the less size of application files unlike flash which takes time to load for slow connections. Designing in JavaScript has opened a whole new set of options which was not possible for any design in flash.

But as the time is moving ahead, programmers and designers are search for better productive solutions like CSS3 or HTML5 which has variety of rendering animation within the consolidated boundary of ethical designing but not limited to new definitions like advanced typography, in-built transitions and 360 degree virtual resolution. These new features are quite popular now in the beginning stage and have a bright chance to be adopted by the mass in the coming year of 2011.

Web 2.0 Design standards are popular now a day with glossy and shady outlook and may remain like that for some time until anything replaces that soon. Big texts with matching sets of color are fashionable for any website with proper navigation in the home page. Those days are gone when the introductory page of any site was made completely with flash and sometimes used to show loading resulting in keep the user waiting for a couple of minutes, speed and simplicity are one of the main criteria now and that is exactly why HTML5 standards are coming into main trend, its fast, stable and it can deliver in a wide versatile format.