Quick Tip: 3 Tools for Making “Instant” Custom Post Types

"
Custom post types are all over the place nowadays… but what if you want to get your feet wet with custom post types without all of the hassle of coding them from scratch? This quick-tip will give you 3 tools for generating (and managing!) your own custom post types without even firing up your text editor. Nothing will ever substitute being able to code these up from scratch, but this will get you started before your popcorn dings in the microwave…

---

Introduction

This tutorial has some basic knowledge requirements. First and foremost, you really should have at least some basic knowledge about what custom post types are and how they are intended to be used. If you don’t have a clue what post types are, please visit this tutorial to get started. This tutorial only intends to give you a faster way around to generate your custom post types and taxonomies without coding.

---

Tip #1 The “Custom Post Type UI” Plugin

I personally recommend this plugin because this is what I always use to manage my custom post types. It’s the perfect start for anyone trying to wrap their heads around what a Post Type can really do without needing to get elbow deep in code. Just fire up the plugin and start creating your own custom post types and taxonomies in minutes.

“This plugin provides an easy to use interface to create and administer custom post types and taxonomies in WordPress.”

This plugin is developed by Brad Williams from webdevstudios.com. Essentially, it allows you to create custom post types and taxonomies through the plugins user interface (instead of coding them from scratch).
Below is a demo on how to use this plugin, sorry for the lack of audio…

And here’s a video from Brad that includes his own voiceover of what the plugin is intended to do:

Custom Post Type UI Screencast from Brad Williams on Vimeo.

Download the plugin here, or visit the plugin homepage.

---

Tip #2 Use the online Custom Post Type Code Generator

This one is pretty self-explanatory – it’s the same idea as the plugin above, but it’s not integrated within WordPress, which means you can pull the code out directly and start playing with it on your own.

You can now easily, and within minutes, generate the code needed to register a custom post type for WordPress. It is done through an easy wizard-driven form that will output your code once you have filled in all the fields. No coding experience required. -Brad Vincent

This Generator was created using Gravity Forms, so we’ve officially entered the phase in WP where plugins are creating their own plugins… which begs the question, when will the Plugin Overlords stake their claim on the world? Ok, kidding, but this little app rocks.
What I love about this online code generator is that the developer explains what each field is for. It also gives you the option for menu position and the option to set the icon for your custom posts.

Sample generated code

add_action( 'init', 'register_cpt_portfolio' );

function register_cpt_portfolio() {

   $labels = array(
       'name' => _x( 'Portfolios', 'portfolio' ),
       'singular_name' => _x( 'Portfolio', 'portfolio' ),
       'add_new' => _x( 'Add New', 'portfolio' ),
       'add_new_item' => _x( 'Add New Portfolio', 'portfolio' ),
       'edit_item' => _x( 'Edit Portfolio', 'portfolio' ),
       'new_item' => _x( 'New Portfolio', 'portfolio' ),
       'view_item' => _x( 'View Portfolio', 'portfolio' ),
       'search_items' => _x( 'Search Portfolios', 'portfolio' ),
       'not_found' => _x( 'No portfolios found', 'portfolio' ),
       'not_found_in_trash' => _x( 'No portfolios found in Trash', 'portfolio' ),
       'parent_item_colon' => _x( 'Parent Portfolio:', 'portfolio' ),
       'menu_name' => _x( 'Portfolios', 'portfolio' ),
   );

   $args = array(
       'labels' => $labels,
       'hierarchical' => false,

       'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
       'taxonomies' => array( 'category' ),
       'public' => true,
       'show_ui' => true,
       'show_in_menu' => true,
       'menu_position' => 5,
       'menu_icon' => 'http://yourdomain.com/images/menuicon.png',
       'show_in_nav_menus' => true,
       'publicly_queryable' => true,
       'exclude_from_search' => true,
       'has_archive' => true,
       'query_var' => true,
       'can_export' => true,
       'rewrite' => true,
       'capability_type' => 'post'
   );

   register_post_type( 'portfolio', $args );
}

Visit the Custom Post Type Code Generator, you can also use the Custom Taxonomy Code Generator

---

Tip #3: The Post Type ReOrder Plugin

This handy little plugin uses drag and drop sortable Javascript, which is a fancy way of saying it’s user friendly. It allows you to reorder the posts for any custom post types you defined, including the default Posts and Pages. Also you can have the admin posts interface sorted per your new sort. Great, right?!

After you successfully installed and activate the plugin, you will be prompted to configure and save the settings of the plugin.

Features of the plugin:

• You will be able to order all wordpress custom post types order including the default posts and pages.
• Easy to use Drag & Drop jquery style interface to allow re-order.
• Allow WordPress Admin Interface Order
• If your theme is not ready to use additional sort features, you don’t need to worry, the plugin will automatically do that for you, on the fly.
• The admin can set the minimum level for a user type which will be able to do sorts.

Download and install the plugin

---

QuickTip

Alright, so we’ve dished out three quick ideas for getting your feet wet with custom post types… in the weeks to come, we’ll actually be digging a lot further into the topic though. So the idea is that you can always come back to this post and “hit the easy button” if you decide to duck out of class when your brain starts hurting.
"

read more

Posted in: Plugins,Tools,WordPress

Get picky with the Google Picker API

" By Chris Thrasher, Software Engineer, Google Picker API Users have content across many Google properties: YouTube, Picasa Web Albums, Google Docs, and more. Now we have a common interface for your users to select Google content. The Google Picker API provides a familiar-looking dialog box that’s easy for you to integrate into your apps. Your users can quickly browse their own content without ever leaving your page or app. Perhaps you’re developing a blogging platform and you want your users to be able to embed their Picasa Web Albums photos. You can even let your users pick from public content, as found from image and video search. Once the Picker is invoked by your user, a modal dialog appears on the page. If the user is already signed in to their Google account, they’ll see their content in just a second or two. If not, the user will be asked to sign in.

Integrating with the Google Picker API is straightforward. First, you specify which Google services should show up as options in the Picker navigation. For example, if you’re a photo site, you may choose to show Picasa and Google Image Search, but hide Google Docs and other services. Then, you simply specify a callback function that will be called as soon as the user’s data is returned to your application.

var picker = new google.picker.PickerBuilder().
   addView(google.picker.ViewId.IMAGE_SEARCH).
   setCallback(pickerCallback).
   build();
picker.setVisible(true);

You can find more integration details and examples in the documentation. We hope you enjoy this new API! Chris Thrasher is a Software Engineer at Google Kirkland and is part of the Google+ team. When he's not writing code, Chris is usually watching old movies. Or quoting from them. Posted by Scott Knaster, Editor "

read more

Posted in: Google,Google APIs

10 Simple Website Changes that Will Increase Your Freelance Sales

"
Is your website delivering new clients on a regular basis? Is your site’s sales funnel optimized? Have you been meaning to make changes to your site that improve your bottom line? Realistically, how effective is your freelance business website today?
If you rely on the web for your business, then you worry about getting more people to your site, and converting more of them into clients. Most people worry a lot about the former, and a little about the latter. This is backwards, because a small amount of quality traffic combined with a high-converting website can yield much greater returns for a freelancer than lots of traffic and a poor website.
The good news is that there are many simple changes you can make to your own site to increase the bites you get from prospects. Let’s look at setting objectives, targeting headings and graphics, utilizing each page area of your site, calls to action, and more. Here are ten quick website changes that will take you no more than 30 minutes each to implement.

1. Figure out your site’s objective

What is the business goal of your website? Surprisingly few freelancers have a clear answer. If you don’t know the ultimate objective of your site, then the site is a liability rather than an asset. Any clients you get from it are purely accidental.
So the first thing you need to work out is the purpose of your site in terms of your business goals. Let me offer a word of hard-won advice here: the primary objective of your site is probably not to make sales. That’s because the vast majority of prospects will not decide to hire you on their first visit. Repeat visitors are more likely to hire you. So your site’s primary objective should probably be to get prospects to come back.

2. Figure out each page’s objective

Needless to say, each page on your site must have an objective that relates back to your central business goal.

Needless to say, each page on your site must have an objective that relates back to your central business goal. You need to map out how your pages contribute to this goal, placing their objectives into a logical thought sequence for prospects. For example, it doesn’t make sense to ask someone to hire you straight from your homepage—he won’t yet know enough about you to make that kind of commitment. It makes sense to ask him to learn about your services, maybe; or to learn about the problem that he faces which you can solve.
I suggest two objectives per page, because very often a prospect will be interested in achieving one or the other of them, depending on how informed he is. On your services page it’s smart to have an objective for someone who has seen enough to know he wants to talk; and another for someone who is still thinking and wants to learn more about you. By presenting an either/or decision, rather than a yes/no one, you are more likely to get a positive response and so capture both prospects.

3. Fix your masthead

If you don’t have a masthead that clearly articulates where your prospect is as soon as he arrives on your site, you’re going to lose an awful lot of potential clients. Someone who can’t figure out where he is won’t stick around.
Nearly all websites do this wrong, and freelancers’ sites are no exception. Take a look at your masthead now. Does it articulate where someone has come from when landing on your website? Does it use the language your prospect would use? It’s generally best to have both a logotype and a tagline, even if your company name is self-explanatory (like “Mac’s Web Design”), just to set your prospect at ease.

4. Develop prospect-centered headlines for every page

As an average rule, only about 20% of the people who read a headline will read the copy. The purpose of the headline is to increase that number as much as possible. If you don’t have a good headline on each page, then prospects won’t read your copy.

Just as in real life, talking about yourself turns people off.

To ensure they do, you need to convey value. To do that, you must engage with what your prospect is thinking. When he arrives on your homepage, for example, he’s thinking about his problem, and certainly not about you. He doesn’t know you.
Yet, a huge number of freelance sites have giant headlines saying something like, “Hi, I’m James, and I love web design”. Nothing could interest your prospects less. Just as in real life, talking about yourself turns people off. Unlike real life, though, this faux pas will cost you a lot of money.

5. Speak normally

Assuming your headlines get your prospect into the page content, you now face another hurdle. If your copy doesn’t speak in the way your prospect would speak—and if it doesn’t talk about the things that are most interesting to him—then he won’t read it. In real life, if you walk up to someone and start talking in a very strange way like a brochure, or if you start talking about yourself, it turns people off; they think you’re a little bit special and they try to leave.
Don’t make people leave your website. Check that your copy is talking about your prospect and his problems. The number of times the words “you” and “your” appear should vastly outweigh the number of times the words “I” and “me” do.

6. Ask for an action

Calls to action are critical. If you don’t ask people to act, they won’t.

Calls to action are critical. If you don’t ask people to act, they won’t. People actually want to be told what to do on a website; they want to be given specific actions to take, so they don’t have to figure out what comes next and how to do it.
If you rely on your navigation to get people around, then you’re going to find that a lot of them don’t get around; they just leave. Calls to action that reflect the two objectives on each page, and move prospects through a logical sequence on your site, will dramatically increase conversions.
Make sure your calls to action are weighted, so one of them is visually dominant over the other. This helps prospects decide which to click. One orange CTA and one gray one will do better than two orange ones.

7. Make your navigation boring

One of the worst blights for prospects is branded navigation. For example, your about page has some cute name reflecting your obscure origins, or your contact page is called “Carrier Pigeon”. If prospects don’t know what a navigation entry means, they won’t experiment to find out.
People almost never click links if they aren’t confident about where they go. When prospects don’t find the word “Contact” in your nav bar, they don’t click the carrier pigeon. They find a freelancer who does have a contact link. So make your navigation as boring and predictable as possible.

8. Make it readable

Sensible typography is crucial to engaging prospects. If they can’t read your copy, they’ll leave. There are five things you need to check here, and although you might need the help of your web designer, most themes will let you do this stuff yourself:

• All your body copy should be aligned to a single left margin. If it’s not, it’s harder to read, harder to follow, harder to pick out as body copy in the first place—and people will read it less.
• Make sure it’s at least 16 pixels in size. You might think 16px looks big, but that’s just because you’re accustomed to smaller fonts, because a lot of web designers think 14 and 13px fonts look swish. If your audience is over twenty, you’re going to lose readers below 16px; it’s that simple. 16px is the minimum.
• Have a reasonable line-height: the distance between each line of text should be 130% to 150% of the text size.
• Check your measure: the width of a line should be no more than 75 characters. After this the eye has trouble following one line to the next, and your readership drops off again.
• Make sure your copy is set black or dark gray on white, and not the other way round—where fifty per cent of the people who would read it, won’t.

9. Check your images

Images have only two purposes: to tease a prospect, or convey value.

Images have only two purposes: to tease a prospect, or convey value. An image must present some kind of situation where your prospect thinks, “Ooh, what’s going on here? I want to read the copy and find out”; or it must convey value more clearly than the copy itself could—for example using a chart or a product image, where even if you used several paragraphs of copy you couldn’t get across the point as clearly and forcibly.
Any other kind of image is a waste of upload bandwidth, and a waste of your prospects’ time, because its visual dominance means prospects are looking at it, rather than reading your copy. And if they’re not reading your copy, they’re not buying your freelance services.

10. Create a footer

This final suggestion sounds incredibly simple, but you’d be surprised at its effectiveness. A footer with your full contact information—that’s your physical address and your phone number (and even your fax number if you’re a time traveler from 1980)—will incline many people to trust you. They scroll down to the bottom of the page to make sure you’re a legitimate company that really exists in the real world, and not some kind of scam in cyberspace.
If you have this information in your footer, people feel much more comfortable with you—especially older people who, like my own father, are still a little bit concerned about using their credit card online because as soon as they enter it someone, somewhere is magically going to steal it.

Get to it!

So that’s ten things you can start doing today to increase your online sales. Go to your website now, and check it against this list. Make a note of the things that could be improved, and then commit to doing one thing each day. I guarantee you’ll see results within a week.
"

read more

Posted in: Freelance,Tips

Recently in Web Development (July Edition)

"
Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday.
In this semi-frequent series of articles, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump!

---

News

All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.

jQuery 1.6.2 Released

Almost every seems to be using jQuery these days and version 1.6.2 of the library is now out. This is the second minor release on top of jQuery 1.6 and lands a number of fixes for bugs. The version is already up on a number of oft used CDNs so using the new version is just a switcheroo away!
Read more

JS Bin 2.8.0 is Out

Remy Sharp’s JSBin is a fantastic tool for debugging — by yourself or with a team. JS Bin 2.8.0 brings with it live previews, resizable panels and autocomplete among many others.
Read more

IE10 Platform Preview 2 Released

Internet Explorer is on the path to standards redemption and they see IE10 as their asnwer. The IE10 Platform Preview 2 has been released and includes support for CSS3 Floats, HTML5 Drag-drop and File reader API among a lot more.
Read more

WordPress 3.2 now available

The new version of WordPress ships with a ton of new features including a super focused, writing mode, a refresh of the dashboard, a new HTML5 theme and performance improvements among others. Be sure to update your installations!
Read more

Code Release: Backbone.js 0.5.0

Along with a slew of tweaks and bug fixes, the most notable new feature is HTML5 “pushState” support, which you can see in action by trying a search in DocumentCloud’s public archive.
Read more

Google Web Fonts v2 Released

Version 2 of Google Web Fonts has been released. This release includes a ton of new functionality including better searching and filtering capabilities and, of course, many more fonts.
Read more

Google Releases Flash to HTML5 Conversion Tool

The tool, named Swiffy, was made available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari.
Read more

Node 0.5 Out in the Open

Version 0.5 of the highly acclaimed NodeJS environment is now out with a number of new features, bug fixes and performance improvements. Check out the link below to see the full changelog.
Read more

NodeJS on the way to Windows

In more Node related news, Microsoft has officially partnered with Joyent in porting NodeJS to the Windows platform. The resulting binary is expected to work with versions as far back as Server 2003.
Read more

Nettuts+ Releases Apps for Web Developers

Not to toot our own horn but recently we’ve started releasing custom made desktop apps that are tailor made for on web developers. Hit the link below to find out more!
Read more

---

New Kids on the Block

As web developers, the sheer amount of resources we can tap into increases exponentially with time. Here is just a quick look at some recently created resources that deserve your attention — everything from new books to scripts and frameworks.

Guider.JS

Guiders is a JavaScript library for visually enhancing your web application with guiders. A guider is a dialog box that guides a user through your application. This improves the user experience of a web application by visually introducing the user to important features.
Read more

Paper.JS

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
Read more

smoke.js

A framework-agnostic styled alert system for JavaScript. Lightweight, flexible,uses CSS3 animation and is easy to use.
Read more

CoffeeKup

If you like CoffeeScript, then you’re really go love CoffeeKup. It’s basically HTML markup as CoffeeScript!
Read more

jsPlumb

jsPlumb provides a way to “plumb” elements of a UI together. It can be used with jQuery, MooTools or YUI3
Read more

Meow

jQuery Meow mimics Growl notications. It supports all jQuery events and you can bind it to various sources for message input making it ideal for form validation, Rails flash notices, or a replacement for the alert() box.
Read more

SocketStream

A phenomenally fast real-time web framework for Node.js, SocketStream is a new full stack web framework built around the Single-page Application paradigm. It embraces websockets, in-memory datastores (Redis), and client-side rendering to provide an ultra-responsive experience that will amaze your users.
Read more

VisualSearch.js

VisualSearch.js is a rich search box for real data. It enhances ordinary search boxes with the ability to autocomplete facets and values for sophisticated searches.
Read more

---

Interesting Reads

Often, you’re not really looking for a tutorial as much as you’re looking for a rant, an opinion or just the musings of a tired developer. This sections contains links to precisely those — interesting posts from the developer community.

Can a local variable’s memory be accessed outside its scope?

A great discussion with an extra fun analogy to explain memory management.
Read more

Why is JSON so popular?

A quick look into why JSON gained so much marketshare compared to its more enterprise-y competitors.
Read more

JavaScript is Dead. Long Live JavaScript!

An indepth look at the JavaScript platform by Peter Michaux
Read more

Evolving the Google design and experience

The Google team writes about the recent redesign of the entire Google ecosystem. Not really developer oriented but a good, quick read.
Read more

The Node Beginner Book

A fantastic resource for the NodeJS beginner.
Read more

---

Monthly Spotlight

Every month we’re going to highlight a specific tool that we think deserves a special mention. This month it is…

Microjs

Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.
Read more

---

Wrapping Up

Well, that’s about all the major changes that happened in our industry lately. Since this is the first of its kind, everything is still up in the air — future editions will be shaped by your feedback.
Do you want us to cover more standard news? A focus on upcoming scripts maybe? Or just more interesting posts and discussions from the community? Let us know in the comments and thank you so much for reading!
"

read more

Posted in: Resources,Showcase,Web Development

Responsive Web Design Techniques, Tools and Design Strategies

" Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It.” Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of designing websites, it can be a bit overwhelming for those designers who have yet to try it.
To that end, we’ve compiled this round-up of resources for creating responsive website designs. Included are tutorials, techniques, articles, tools and more, all geared toward giving you the specific knowledge you need to create your own responsive designs.

Responsive Design Techniques

CSS Transitions and Media Queries Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basic premise is this: you use media queries to design responsive websites that adapt in layout according to browser width, and you constantly resize your browser to see how the website performs, but every time a query kicks in, there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooth the jump by animating the resize? A nice case study.

Responsive Data Tables Chris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. By default, data tables can be quite wide, and necessarily so. You could zoom out and see the whole table, but then the text size would be too small to read. You could zoom in to make it readable, but then you’d have to scroll both vertically and horizontally (sad face) to browse the table. One solution is to reformat the table for better readability. Another is to display a pie graph from the data. Yet another is to adapt the table into a mini-graphic for narrow screens (rather than interfering much with the content when the full table is displayed).

Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens Chris Coyier describes another technique for converting a regular row of links into a dropdown menu when the browser window is narrow. When the user is on a small screen and clicks the dropdown, they’ll get an interface to select an option that is nice and big and easy to choose. Obviously much better than displaying a tiny link.

CSS Media Queries and Using Available Space A tutorial from CSS-Tricks that discusses how to make subtle changes with media queries and how to use media queries in a single style sheet. For instance, if you have a fluid-width design in which the sidebar is 35% of the width of the page, depending on the width of the browser window, you could say, “If the browser is really narrow, do this. If it’s wider, do this. If it’s really wide, do this.” In the article, you’ll learn how to modify a list of links according to the browser’s viewport.

Responsive Images, Responsive Videos

Fluid Images Fluid images are a central aspect of a responsive design. This article by Ethan Marcotte gives a thorough overview on creating them using the classic img { max-width: 100%; } code snippet, as well as details to get you started.

Responsive Image: Experimenting With Context-Aware Image Sizing An alternative approach to fluid images by Filament Group. This technique allows designers to create responsive layouts that serve different image sizes at different resolutions. Effectively, it allows designers to create mobile-optimized images for smaller screens, and then serve higher-resolution versions to larger screens. Filament Group has developed this technique that uses .htaccess files and JavaScript to serve up different sized images based on the screen width. An alternative solution is to use tools like TinySrc which allows you to merely prefix all large images in your source code with a TinySrc URL, and the tool does the rest.

Responsive Images and Context-Aware Image Sizing Craig Russell has developed a technique that uses a server-side script (in PHP) to serve up images of several different resolutions. The idea is that within the PHP script, a nested array is used that lists image files and their relative percentage scales. In HTML, the image’s src attribute would be set to get the requested image’s id, but with no scale specified. A JavaScript calculates the percentage width of the image relative to the maximum width of the container, and this figure is then appended to the end of the src attribute as the scale parameter. The comments in the article contain some nice ideas and suggestions on how the technique could be improved.

Responsive Images Right Now Harry Roberts’ idea is to use the img element for the smaller of the two images, the image that you want mobile users to download. You would also have a containing div to which you apply the large version of the image as a background through CSS. You then hide the img from desktop users, and show them the large CSS background, and hide the background image from mobile users and just serve them the smaller inline image.

Responsive Images Using CSS3 Nicolas Gallagher’s method relies on the use of @media queries, CSS3-generated content and the CSS3 extension to the attr() function. By combining the content property with the CSS3 extension to attr(), you are able to specify that an attribute’s value should be interpreted as the URL part of a url() expression. In this case, it means you will be able to replace an image’s content with the image found at the destination URL, stored in a custom HTML data-* attribute.

Responsive Images Using Cookies Keith Clark suggests using cookies to serve smaller images to mobile users. Whenever a browser requests a file from a server, it automatically forwards any cookie data along with the request. If we use JavaScript to populate a cookie with the current screen’s dimensions, all subsequent requests made by the browser will pass this data to the server. In other words, the server would know the screen size of the device that is asking for the file.

Responsive Images With ExpressionEngine John Faulds presents a technique for responsive images that is different from the techniques presented above. It involves querying the device’s user agent string to determine whether it is mobile, and then setting a global variable that can then be used in templates to modify the size of the image output. Basically, only one image gets sent to the browser, but that image is different depending on whether you’re viewing the page on a mobile or desktop device.

CSS: Elastic Videos Nick La applies the max-width: 100%; snippet to videos and presents techniques that make HTML5 videos and object- and iFrame-embedded videos responsive. For the latter, the trick is very simple. Just wrap the embedding code in a div container, and specify a 50% to 60% padding-bottom. Then, specify the child elements (iFrame, object embed) and a 100% width and 100% height, with absolute positioning. This will force the embedded elements to expand full width automatically. Initially discovered by Thierry Koblentz.

Resizeable Images (At Full Resolution!) A quick tutorial from CSS-Tricks on resizing images while maintaining resolution.

Responsive Email Newsletters

Optimizing Your Email for Mobile Devices With the Media Query Wide emails often require horizontal scrolling, especially when there’s a large image. This case study by Campaign Monitor explains how emails can be optimized for mobile devices using media queries and offers a couple of useful techniques and snippets to be used right away.

Responsive Design for Email, the Largest Mobile Audience Another interesting case study that shows how the development team behind Beanstalk applied screen-size-specific media queries to target styles, and what design decisions were made to make the mobile email experience better.

Media Queries in HTML Emails This article covers using media queries to target specific mobile email clients.

Guide to CSS Support in Email Designing an HTML email that renders consistently across major email clients can be time-consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client. Campaign Monitor has put together a guide to save you the time and frustration of figuring it out for yourself. With 24 different email clients tested, it covers all of the popular applications across desktop, Web and mobile email.

Responsive Design Tools

You can build a responsive design from scratch, or you can use some of the tools listed below to speed up and smooth out the process.
Respond.js Scott Jehl’s fast and lightweight polyfill for min-width and max-width CSS3 media queries (for IE 6 to 8 and more). css3-mediaqueries-js is another script that enables IE 5+, Safari 2 and Firefox 1+ to transparently parse, test and apply CSS3 media queries.

WebPutty: Scientific Progress CSS Editing This tool is a Web-based CSS editor with auto-save feature and a real-time preview of your website. WebPutty also has CSS selector highlighting and SCSS support (for Sass and LESS), as well as Compass support. To use the tool, just embed a link tag at the end of your website’s head tag.

Debugging CSS Media Queries In responsive Web design, we’re working with different states, widths and viewport sizes. Johan Brook shares a quick tip for indicating (with pure CSS) which media query has kicked in. The article also provides a mixin for developers using Sass. A demo is available as well.

Responsive Design Testing This tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths. Change the defaultURL variable at the top of the responsive.js file to your own site and navigate your website from within the frames.

Responsive Containers: Selector Queries This JavaScript by Andy Hume allows you to add selector queries and responsive containers to your design. Essentially, you can apply different class values to an HTML element based on its width.

Resize My Browser If you need your browser to display content in a certain window size this is what you have been looking for. Just click on the size you need and check out what your size looks like. Does not work in Chrome and Opera due to issues with the “ResizeTo” event.

Media Query Bookmarklet A handy tool that shows you exactly what size the viewport has and which media query just fired. Drag it to your bookmarks bar and have it ready when needed.

Responsivepx Use the information this little gadget provides in your media queries to create responsive designs.

ProtoFluid A tool for rapid prototyping of responsive design. You can prototype CSS on a variety of popular device sizes, orientations and browsers, be they phones (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitors or televisions (720p, 1080p). You can preview designs right in the browser and use your development tools like Firebug. You might want to check an alternative tool ScreenFly as well.

Fluid Grid Calculator Harry Roberts has developed a calculator and generator of fluid grids for your responsive designs. Just provide the number of columns, the width of one column and the width of the gutters, and the tool will generate a fluid grid system in CSS for you. Handy!

Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

Scherzo, a Responsive WordPress Theme This WordPress theme is a fine example of responsive design, displaying nicely on almost all devices and screens.

Responsive Design Templates

320 and Up 320 and Up works on the “tiny screen first” principle, whereby designs are created for mobile screens first, and then expanded for tablets, desktops, and large screens. It works well as an extension to HTML5 Boilerplate and as a standalone kit.

Media Queries for Standard Devices Here is a useful template for media queries for standard devices: empty placeholders for targeting devices and attributes that you might be interested in when making responsive designs.

Mobile Boilerplate Here is a customizable template for creating rich, high-performance mobile Web apps. You’ll get cross-browser consistency among A-grade smartphones, and fallback support for legacy BlackBerry, Symbian and IE Mobile. You’ll also get offline caching for free, fast button clicks, a media query polyfill and many common mobile Webkit optimizations.

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development Skeleton is a small collection of CSS and JavaScript files that can help you rapidly develop websites that look beautiful at any size, be it a 17-inch laptop or an iPhone. Skeleton is a grid that is responsive right down to mobile. It is well organized and well structured and provides most basic styles as a foundation.

Responsive Design Frameworks

1140 CSS Grid 1140 CSS Grid is optimized to work on screens ranging from the size of mobiles to 1280 pixels wide. It’s a simple flexible grid system that uses media queries for smaller screens, essentially stacking columns on top of one another.

inuit.css This CSS framework is built to provide a solid foundation for designs on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort. It also has a custom grid system builder for creating fluid grid systems.

Flurid Flurid is a liquid grid layout with up to 16 columns.

FluidGrids FluidGrids is a fluid grid framework that creates layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.

Less Framework 4 A CSS grid system for creating adaptive layouts. It includes four basic layouts (including tablet, mobile and wide mobile), with three sets of typography presets.

Fluid Grid System This fluid grid framework includes a typographic grid and baseline grid.

Tiny Fluid Grid Tiny Fluid Grid helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximum widths, and percentage-based gutters.

Responsive Design Workflow and Strategies

The Responsive Designer’s Workflow Luke Wroblewski’s conference notes on Ethan Marcotte’s presentation about applying responsive Web design principles and workflows to the redesign of a major newspaper website. Among other things, Ethan explains how he approaches the responsive design methodology, what the design process looks like and how prototyping is done in the context of responsive design.

The Goldilocks Approach to Responsive Web Design The Goldilocks Approach stresses device-independent layouts that look perfect regardless of the device they’re viewed on.

Content Choreography Read up on how to properly plan your site to live up to todays standards. Begin to choreograph content proportional to size to serve the best possible experience at any width.

Structured Content First In this presentation, Stephen Hay discusses a couple of troubles you might run into when structuring your content and argues that properly structured content is portable to future platforms. Stephen suggests that we think about creating and designing structured content first that caters to the lowest common layout denominator, whether this be a small screen or a text browser. This content should be able to go anywhere.

Design for a Target Experience First Another interesting perspective on a responsive designer’s workflow; Nathan C. Ford focuses on experience of its users first and then derives user scenarios and media queries from it. “There are goals for sites that reach beyond simple readability, where a lack of features can actually diminish the experience. I am working on such a project now. Our approach has been to peruse the research and tailor an optimal experience for the most likely user scenarios. Working out from there, we judicially edit and hone for each media query.”

More Responsive Design, Please This article by Jason Things covers responsive design based on a layout/content/capability/user intent scheme, which sheds interesting new light on the challenges that responsive design can create. It’s a well thought out piece and is certainly worth a read.

Breaking Development Luke Wroblewski took notes at the Breaking Development Conference while Stephen Hay talked about the realities of designing for different device experiences.

Patterns for Multiscreen Strategies Have a look at this simple but effective slideshow to get an idea of which core factors play a role in multiscreen concepts.

Responsive Web Design from the Future According to Kyle Neath, responsive web design is about a lot more than the size of your screen. This talk is about about how GitHub handles links, the url bar, partial page updates, and explains why Kyle thinks the HTML5 history API is the most important thing to happen to front end development since Firebug. An inspiring presentation.

Developing a Progressive Mobile Strategy In this presentation, Dave Olsen presents a progressive mobile strategy that consists of audience strategy, content strategy and platform strategy. Dave argues that to develop a sustainable and scalable mobile strategy, you need to answer the questions, “What value will the targeted audiences get from this content?” and “How do we develop solutions to handle both mobile and native now, as well as the devices of the future?” An interesting presentation.

How to Use CSS3 Media Queries to Create a Mobile Version of Your Website In this Smashing Magazine article, Rachel Andrew explains how, with a few CSS rules, you can create an iPhone version of your website using CSS3 — one that will work now. You’ll see a very simple example and learn the process of adding a small device style sheet to a website to show how easily we can add mobile-specific style sheets to existing websites. You may want to consider reading Aaron Gustafson’s article “Adaptive Layouts With Media Queries” and Emily Lewis’ piece “Respond to Different Devices With CSS3 Media Queries” as well.

Discussions and Points of View on Responsive Design

While not tutorials per se, the articles here give you valuable insight into why you should use responsive design techniques (and when you maybe shouldn’t use them).
Responsive by Default Andy Hume explains what in his opinion responsiveness is all about. It’s what a website does when it’s loaded into an unknown browser on an unknown device by an unknown individual. It’s “how you deal with “the most hostile software development environment ever imagined” (via Douglas Crockford). Like progressive enhancement it’s a strategy that frees you to work with the web rather than fight against it.” An interesting point of view.

Responsive Web Design or Separate Mobile Site? Eh, It Depends An interesting article discussing the pros and cons of responsive designs vs. dedicated mobile websites.

The Case Against Responsive Web Design It seems only fair to include some dissenting opinions here about when responsive design is and is not appropriate. This article discusses why responsive design doesn’t always make sense from a user experience perspective. Take a look in the comments section, too. Luke Jones has a similar opinion.

A Responsive Mind A discussion on Jeremy Keith’s blog about the necessary parts of a responsive design and how to effectively create different layouts based on different screen sizes. Examples are included.
Responsive Enhancement An excellent introduction to responsive design as a way of thinking rather than as a tool or technique. Jeremy Keith argues that responsive Web design can’t be tacked on to the end of an existing workflow. Instead of pixel perfection, we should be thinking of proportion perfection. An inspiring read.
Mobile-First Responsive Web Design Mobile First Responsive Web Design is a combination of philosophies and strategies with the aim to achieve a wider application of best practices in the area.
Where are the Mobile First Web Designs? In this article Jason Grigsby presents the findings from his study on responsive designs, their features and appearance as well as general remarks on the state of art of Responsive Web Design.

Further Resources

Here are some additional resources for creating responsive designs that don’t fit neatly into the categories above.
Media Queries A growing collection of websites that use media queries.

Responsive Web Design, by Ethan Marcotte This book, written by Ethan Marcotte and published by A Book Apart, is a fantastic resource for learning how to design responsive websites. It covers the basics of the responsive Web, flexible grid systems, flexible images and media queries, and it gives insight into how to create responsive designs.

The Big Web Show Episode #9: Responsive Web Design Jeffrey Zeldman and Dan Benjamin sit down with Ethan Marcotte for episode 9 of The Big Web Show to discuss responsive design, among other topics.

Last Click

The Latest in HTML5 This slideshow covers some techniques and lesser-known HTML5 gems that could get implemented in browsers in the near future: among other things, server-side media queries with JavaScript and form-factor detection.

---

© Smashing Editorial for Smashing Magazine, 2011.
"

read more

Posted in: Strategies,Techniques,Tools,Web Design