Right now, responsive pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.

People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.

Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)

The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need.

Wire frame your desktop and small-screen version before writing any markup. This allows you to know where and what order your markup (HTML) will be need to be in to achieve correct placement in your desktop version and your small-screen version. If your site demands efficiency, you can subtract and add navigation elements with JavaScript, just make sure you have enough of the basic navigation to go to every page first.

Make use of position absolute, relative-absolute and fixed. And know the difference. You might want the logo above the menu in one version and below the menu in another. Short of moving your markup around (remove/insert) with Javascript. This is the only way to visually re-order your markup.

Become familiar with fluid layouts. Knowing what adds up to 100% is helpful. Don’t forget to use percent margins and padding. Using percentages is called liquid layout or flexible layout.

Decide what content is important for small screen (which are often mobile and thus have a low connection speed). If you are a brochure site–that is your main purpose is to inform, not complete a task, then don’t hide content if you are downloading it anyway.

Make buttons big. If it’s something that most people are going to click, add some padding if it’s a text line. Avoid fat finger syndrome by making action item large enough for fingers.

Plan on adding around 30% more CSS design time for a typical brochure site to be responsive also. You wil probably be more for your first responsive site.

Use min-width over max-width for the width of your elements. Remember to scale media. Image, embedded objects (embed, object tags, video) should be scaled. Make them have a max-width of 100%. Read about creating CSS Elastic Videos. I usually limit this CSS rule to the children of a #primary div. Another possible route is to use JavaScript, via FitJS.

Use the correct video format for your device. The simplest way to achieve this is use a video distribution service (I like Vimeo for their minimal layout–if you pay) that will change the format for you.

Style rules outside any media query is the default style. You need to make the choice of whether you are going make small or large (read desktop) the default CSS style sheet. I think that small first will become dominant in the long run, but you will need to a JavaScript media query polyfill/shim for browsers that don’t support media query, and if you are using HTML5 already, then you probably already have a polyfill like Modernizr running anyway. Modernizr uses Respond.js to allow min/max-width CSS3 media queries. I would claim that creating a desktop first style sheet would be best if you are editing an existing site to be responsive or working on your first responsive site. If you want an detailed overview of the desktop or small screen first debate, I suggest  Essential considerations for crafting quality media queries.

Use the most appropriate size image if possible. If you are going to use JavaScript, to create content that uses images (read slideshow, gallery, etc.), you might as well check the width of your browser window and request smaller images than the “desktop version” in order to speed up their download. You might considering lazy-loading related content also.

And finally…

Forget about being perfect. Yes, it’s your job–you SHOULD have a close to pixel-perfect layout for the two or three devices that the majority of your audience uses, but for all those in between accept a less than perfect layout. And while I’m on the topic of perfect, these are guidelines that I’ve discovered in my small amount of responsive work, and are by no means rules or laws.

What guidelines have you discovered that aid in responsive design?

Update 06/11: PostRank appears to still work, but they have been bought by Google (not a big surprise…). We are waiting to see if the Social First top-down strategy that Page is implementing will cause PostRank to atrophy or shut down anytime soon. There is a Chrome/Safari plugin that works with Google Reader, too.

Update: FeedHub is dead. It’s been deceased for almost a year now. Their parent company mSpoke shut the free news feed authority weighing system. I have replaced FeedHub with another free feed weighing service, PostRank. It’s not as convenient to use. All your feeds are not combined into one feed. If you have over one hundred feeds that you subscribe to, you will want to export an OPML file (collection of feed URLs) and import that file into your feed reader. You do however have the option within each feed to allow either all, good, great, or only the best ranked news feed articles.

Original Article: Whether you believe that micro-blogging and syndication feeds provide too much information and makes us either dumber or smarter, information overload has been here for a while. Even though, Microsoft Internet Explorer has had an RSS button for two versions, I would say that syndication feeds are still not mainstream, yet highly valuable that you can feast on such a cornucopia of information without browsing to a single web page. Think of syndication as requested email (in juxtaposition to the majority of your Inbox, right?). If you are in the anal-retentive 43 folders crowd, you’ve probably already have a syndication feed management process in place for two years. If you haven’t and the thought of having to browse through 100 new blog posts every day is overwhelming, I recommend FeedHub.

I use FeedHub to provide me with the “most popular” blog posts from over 80 sources. As a web designer, I have a plethora of blogs to choose from. Some recommend if you don’t regularly get to read your feeds you have too many in your feed reader that you should declare RSS bankruptcy (similar to email bankruptcy). Another option is to create categories so that one category is for your “read all posts from these providers” and some is your “if I have time, read these posts.” I do not prefer this latter method, since I like a well-rounded mix of graphic design, programming (mostly front-end, but a little back-end), social media, blogging, and user interface posts. It is difficult to draw upon raw feeds to receive a variety of information. Some websites can be quite prolific. Do you really want to browse the headlines of all 23 posts from Mashable yesterday?  Probably not, unless you are one of the thousands of social media experts on Twitter.

What’s most popular?

I mentioned above that FeedHub only provides the “most popular” blog posts. I don’t have the exact details–that would be similar to figuring out Google’s PageRank, but I know that you can set preferences for certain blog tags over others in order to customize your reading. You can also set that you want the articles with the most comments or links to them. It’s all part of a machine they call mSpoke.

I like the idea. Where do I start?

You can import an OPML of my “daily feeds” (Right Click/Save As…) into FeedHub, if you think we would have similar tastes. My original list of blogs to read came from a computer science department of a university that I’ve now forgotten, and I’ve slowly added graphic design and social media oriented blogs. You can find a sample of my daily feed reads at the bottom of the Interactive Llama sidebar.

Going forward

For most of us, how connected we are is a lifestyle decision. You can always unplug to hike through the Canadian Rockies or to spend time with your children, unless your job mandates you reply to be “on call” and reply within five minutes. If you are in a creative, forward-thinking job (like a web designer at an agency) then, I highly recommend this hybrid of reading RSS feeds–but not too many, so that you are not overwhelmed, but do stay informed.

The writer, Stewart O’Nan, once said “The two hardest things about writing are starting and not stopping.” Programming at its essentials is writing. When I’m wearing my web developer hat, it seems that I spend over a quarter of my time browsing around the OS-X Finder. So what better way to start programming then having a file framework. Not only can you start more quickly, but your structure will stay consistent. Think of the last time you edited someone else’s project and that person placed all their files in one folder. Oh, the horror!

Introduction to my file framework

The guiding principle for my file framework is:

Either precisely title all files with hierarchical prefixes or create sub folders to categorize your files.

With video projects and print projects that output to one file, file organization isn’t as essential. With web design, you do not want the files you publish getting mixed up with your source files. Yes, we all have at least once uploaded a 100MB Photoshop file to the online server and wondered why it was taking so long. This file framework focuses on web production and output.

Balance is key to file organization–it’s a means to an end. Besides SEO of a static web site or ease of future editing, most of the time your file organization isn’t going to impact the final product. I’ve seen both sides of the coin:

• Artistic Pilers: one folder file organization where that person has taken the visual metaphor of the desktop a little too far, “creating a well-named folder is not very creative”
• Obsessive Compulsive Filers: the overcompensation that there are too many files in a folder if you have to scroll or look for a file.

The source folder

My source folder has an abbreviated name of the project. All the subfolders within my source folder start with an underscore. This is because under OS-X folders are not sorted first (this is very annoying!).

• __jobNumber: (folder) Sometimes I receive job numbers for my projects after I began them. If you don’t have the job number before you begin work, then do not place the job number in the name of the main folder. This will invalidate all linked files within the folder. Naming a sub folder with the job number will still allow a search for that job number. Remember, do not change the name of the project folder!
• _copy: (folder) Place the Word Documents and the text files that you have created from them here. In general, you will want to create text documents before pasting copy into an HTML page to to rid yourself of the Word character encoding.
• _flash: (folder) Place Adobe Flash files here (SWFs and FLAs) and move the finalized SWFs to the “live folder.” If you have many external file dependencies, it may be more productive to work with the source files in the “live folder.”
• _flash_source: (folder) Place images and any files that your Flash files link to. If you keep all these linked files here, you can update them by overwriting the old files and clicking Update from within the Flash library.
• _fromSuper: (folder) Place original layout files (such as Adobe Illustrator and Photoshop) from your creative director here. There have been too many times in the past that I’ve overwritten the original and had to ask for it again from my supervisor. Another option could be a _fromClient folder.
• _layout: (folder) Place the edited layout files here, and take time to name these files correctly, so that you can refer to them later on.
• _old: (folder) Place any files you want to keep, but don’t want to clutter up the other folders here
• Notice to Future Designers: (file) If you want to tell future designers any important information, write a note here. Suggestions include your name and contact information and the path name to your working folder.

The live folder

When working with web sites, your “live folder” will need to be in your local servers document folder.

• images: (folder) Place your graphics here. I recommend naming them close to the DOM of their usage
• css: (folder) Place your IE hacks files, PNG fixes, and CSS files here
• js: (folder) Place your JavaScript files here
• index.html: (file) HTML template containing header information such as meta tags and structural markup such as frameworks/grids/wrappers

Current project folders

You are going to want to get to these folders as fast as you possibly can. If you work on a Macintosh, place your source folder and your live folder on the left side of the Finder window. If you work on a Windows computer, place place your source folder and your live folder on the Start Bar or the Places Bar. On my Windows XP machine my Start Bar looks similar to the OS-X dock, since I have so many folder shortcuts (large icons) on it.

In conclusion

I hope these ideas better prepare you for starting new projects and increase your productivity by not placing all your files in one folder–while also not having to create the same folders when you begin your project or while you are in the middle of working. If you have more suggestions to add to this file framework, please respond below.

You have the option to embed images into Adobe Illustrator or to link them. If you embed them, then your file will be large (a 500MB AI file is an everyday occurrence in my work). The other is to link to the image file, but if you hand the file off to another person, the linked images will not be stored with it. One option to is to have a central repository located on a network for images. All new images are placed there. This can sometimes be cumbersome not to have a copy of the image on your local machine–consider image manipulations and having to manage file versions centrally. This script solves the problem of collecting linked images for output. This script collects external image links into a single “Links” folder. You can then give that folder and the subsequent source file (AI) to another person and the external links will work.

Hopefully, you are not using Adobe Illustrator source files (AI) to pre-press print work, but if you are this will aid in collecting linked images for that purpose too.

Caveats

This script does not collect fonts or other files, only images. If your image is within an opacity mask this script will not be able to find it. Illustrator Package Script has been tested on Adobe Illustrator CS2 and Adobe Illustrator CS3 only.

I did not write this script. This script was written by Pavel Rassadin. You can download the original source for this Illustrator Package Script from his website.

Amazon WishList to RSS feed

To create my WordPress Reading List and my Twitter Reading List, I start with an Amazon Wishlist. Why? Because I (and probably you) read the largest list of book reviews, before you either buy the book or go to pick it up from the library. So now using my Amazon Wishlist to RSS Pipe you have an RSS feed of your Reading list.

RSS feed to Twitter tweet

At first, I was dismayed when I heard about TwitterFeed.  My gut reaction was: What idiot would place a bot within their feed? The whole point of Twitter is to have one on one personal interaction with actual people. Recently, I’ve been moving away from that view. Bots are helpful if not over-used. I update my book reading list: Stephen M James: Books (Planning or have read) just a few times a month. Not enough to make my followers annoyed. After all, reading books is a part of my online persona that I’d like to share. In order implement your own Twitter Reading List:

1. Visit Yahoo! Pipes and clone Amazon Wishlist to RSS Pipe and enter your settings into it.
2. Publish your pipe and copy the URL of the RSS feed.
3. Log into TwitterFeed (you will have to share your Twitter credentials with TwitterFeed) and create a TwitterFeed from your Pipe RSS
4. Add your book reading list into an Amazon wishlist.

For your TwitterFeed prefix I recommend “Will read #book soon: ” so that your tweet will end up in the hash tag twitter search for #book. You have a maximum of 20 characters for the prefix, so make it worth it. Twitterfeed will shorten the name of the book and add a tinyURL to the end that links to the Amazon page (hopefully with your affiliate tag–although you are more than welcome to use mine!) You might be interested in my post, Create a reading list in WordPress from Amazon Wish List using Yahoo! Pipes, It’s about using pipes to create an RSS from an Amazon Wishlist and pulling your reading list into WordPress.

The default title for Gallery2 item uploads is the file name of the image. It easier to name your files well from the beginning from the safety of either than edit the URL, titles, and keywords for your item after they are uploaded. My naming convention for a file name is photo_set-photo_subset-people_or_objects. For a photo of my parents, my bride and myself at my wedding, I used “wedding-party-parents-rachel-stephen.jpg”

When creating titles this script does the following via regular expressions:

• Removes ‘copy’ (a common OS-X filename suffix)
• Removes underscores at beginning
• Removes underscores at end
• Removes double underscores
• Removes left and right parenthesis
• Removes all single digit numbers and letters
• Replaces underscores and hyphens with space

When creating keywords from titles, this script removes the following common words and inserts commas between the remaining words:

a, about, above, across, act, add, after, again, against, all, along, also, amid, among, an, and, any, are, around, as, at, back, be, been, before, behind, below, beneath, beside, besides, between, beyond, but, by, came, can, cause, change, close, come, concerning, considering, could, cover, cross, despite, did, differ, do, does, down, draw, during, each, even, every, except, excepting, excluding, far, few, find, follow, following, for, found, four, from, get, give, go, grow, had, hard, has, have, he, her, here, high, him, his, how, if, in, inside, into, is, it, just, keep, know, large, last, late, left, let, like, little, long, look, made, make, many, may, might, minus, more, most, move, much, must, my, near, never, no, now, of, off, on, one, only, onto, opposite, or, other, our, out, outside, over, own, part, past, per, plus, put, regarding, right, said, same, saw, say, see, self, set, she, should, side, small, so, some, still, such, take, tell, than, that, the, their, them, then, there, these, they, thing, this, three, through, to, too, toward, towards, try, two, under, underneath, unlike, until, up, upon, us, use, versus, very, via, want, was, way, we, went, were, what, when, where, which, while, who, why, will, with, within, without, would, you, your

Usage

You can either edit the setup variables in the script or use URL variables (such as “?field=g_keywords&begin_id=3000″). That example would insert keywords (test insert, not commit) based on the titles of all items after item 3000.

Requirements

• Some familiarity with the PHP language
• Login credentials: server, username, database name, password
• Item ID to begin with (default is 0, that is “all items”)
• If you want to change my default title word removal listed above, familiarity with regular expressions

Download Gallery2 titles and keywords SEO script

NOTE: You will need to rename the “.txt” file to “.php” in order to run it on your server. Also this script will edit not only item names, but also albums. I’ve included copious comments in this script to aid in customizing it to your needs.

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

There are online CSS sprite generators out there. My Photoshop script is not as remarkable as these 20 image sprites, but it’s much simpler, and you can assign a keyboard shortcut to it. Also, all my sites are designed in Illustrator which is a slightly different work flow than most. I find that Photoshop is an awful layout program.

Download CSSsprite.jsx

Installation

A JSX script is similar to a Photoshop plugin or an action, but are commands in Photoshop’s JavaScript based script interface. Download and copy this script within the Presets>>Scripts folder of your Photoshop application folder:

• OS-X: Macintosh HD/Applications/Adobe Photoshop CS3/Presets/Scripts/
• Windows: Program Files/Photoshop CS/Presets/Scripts

The Script will appear under File>>Scripts>>CSSsprite on the menu. You can assign a keyboard shortcut to this script. I prefer Control+Command+S. This shortcut fits well with the Save for Web shortcut, Command+Alt+Shift+S.

Usage

Open two files (and only two files) with the same height and width (if they are different sizes, the offset of your hover button state will not be half of the height). Select the non-hover background image, making it active–thus making the hover background image de-active. Run the script from the Scripts menu mentioned above. This will place the hover background image on the bottom of the sprite. This script does not support adding a third state to the sprite, but you could add a third and fourth state. To do this, first combine the third and fourth state, and then combine that image with the normal/hover sprite.

For your information: States for this script

The following is a list of Photoshop commands that are executed in this script:

• Convert Image Mode to RGB
• Make horizontal guide at 100% of canvas height
• Switch to inactive document (-1 in document array)
• “Duplicate Layer. . .” Layer Menu via right click
• Switch back to inactive document (+1 in document array)
• Double canvas size vertically
• Transform/Move top layer down (50% of canvas size)
• Zoom In (twice)

Result
This gives you a two-layered Photoshop file with second layer the CSS hover layer. Save the file as GIF, PNG, or JPEG using File>>Save for Web.

Notes
Adobe Photoshop JavaScript is the only cross-platform scripting language for Photoshop. This script was only tested Photoshop CS3 Extended (Mac). Our firm does not use Photoshop for web layout–only for image manipulation. We use Illustrator for layout.

I would like to thank the creators of ScriptingListenerJS and ActionToJavaScript.

You may be interested in this PhotoShop script that creates a sprite from all the images in a folder.

My secondary browser: Safari

For over six months now, I’ve been running my web applications in Safari on my Mac at work and my PC at home (yes, you did read that correctly, Mac at work and PC at home!). I run Gmail, GDocs, Remember The Milk, and others within Safari while I use FireFox to browse the web. I have keyboard shortcuts that run safari.exe/safari.app with the URL of the service I want to use. I can’t imagine browsing the web without Web Developer, FireBug, Google Toolbar, spell checking and RSS feeds of specific tags of my delicious bookmarks as a LiveBookmark. It would be as if I want back to using Internet Explorer or something.

When Safari for Windows became available in early 2008, I decided to try it. It was fast, but I hated the interface (especially the dimming of the page when you try to Find a word). The interface was too minimalistic. If I wanted less crap on my browser window, I’d hit F11, thank you very much. What’s a fast loading, standards compliant, minimal interface browser good for? You guessed it: WebApps! I use Safari for my web applications.

Water-logged about logging in

One of the annoying aspects of web applications is authentication, you have to login. Things become even more annoying if you use multiple accounts. Anyone have more one Gmail account? Thought so.

Everyday scenario: I log into my secondary Gmail account that I send my WordPress web sites 404 errors to and new mail pops up from Gmail Notifier in Growl. I click the email and it launches my “primary web browser.” In this case it’s FireFox, and I’m already logged into Gmail with my secondary account. What happens? FireFox goes to my seconfary account’s Inbox. I have to log out and re-login in order to view my new email! Using a second browser that is only logged into my primary account solves this probem.

Advantages of using a separate browser for web applications

• It’s sand-boxed: Your browsing of other pages won’t crash browser and thus deleted the email to your mother
• It’s fast: WebKit renders HTML faster than Gecko (Mozilla)
• You’re primary user account is not logged out, it is always there when you need it.

Shrugging Chrome

I shrugged when Google announces its Chrome browser this week, I’ve practically been using it for months now. However, I look forward to see where this goes and will value any increase in performance and productivity a Google browser will give me when using their web applications as well as others.

Either way, I want to share my latest reading endeavors across my blogs. But how?

Originally I used Roblog’s WordPress Plugin, Now Reading, It’s truly a great plug-in. You can search Amazon for your book and grab the information. It has Now Reading, Have Read and Planned Reading sections. You can rate your books and write reviews. I discovered early on that I was not interested in writing reviews of the books. The other drawback was that it was locked into one blog. I placed it my Cultured Media blog where I list the podcasts and media that I listen to. I wanted to place my current reading in the sidebar or the footer of all my blogs–and why stop there? Why not Facebook, too? The other problem is that I didn’t want to search for the name of the book on Amazon, then log into my blog and paste the name into Now Reading to add it.

Portable list of information that can be subscribed to from multiple locations? Sounds like RSS feeds to me. I found an Amazon Wish List import for Yahoo! Pipes. It did an XML look-up on any public wish list and then published the information you wanted. I cloned it to my Pipes page, and soon found out it was an old version of Amazon Web Services. After a few hours spent parsing, the new version 4 web services offering from Amazon, I was good to go.

The limitation of my Amazon-Yahoo! Pipes RSS lookup is that you can only grab one page of items at a time. This isn’t a problem for my use. I didn’t want more than 10 items anyway.

Once, you have your pipes set up, then use FeedList to display your RSS feed from Yahoo! Pipes. An example of this is at the bottom of my blog. When I want to update my reading list, I add an item to my Amazon Wish List. And there’s nothing to limit this process to books. Whatever you add your Amazon Wish List will show up in the feed–not only books.

Anti-Spam Plugins

Math Comment Spam Protection

This plugin asks an additional question after a commentors name and email to prove that the commentor is human and not a comment spam bot. I currently have my websites set up to say “Enter numeral for the sum of two and nine. (e.g. 10).” There many other types of capcha’s but this is my favorite since, it doesn’t involve titlting your head sideways and reading backwards!

Simple Trackback Validation

This plugin scans any page that tries to add a trackback to your blog. If the link to your website does not exist, the trackback link is ignored. With modern blogs using pingbacks instead of trackbacks, you may want to disable trackbacks completely.

Category/Tag Plugins

Simple Tags

This plugin allows mass-editing of tags, and it can remove unused tags.

Batch Categories

With the advent of tags, many bloggers do not categorize their posts as strictly as they used to. This plugin allows mass-editing of categories. If you have many categories and need to move posts between categories, use this plugin.

Additional Content Plugins

Dagon Design Sitemap Generator

This plugin creates a sitemap for users (not a XML sitemap for search engines) that lists all posts and pages by category. You can use multiple pages, but I prefer only one page.

Popularity Contes

This plugin is great for listing the “most touched” posts. By “most touched,” I mean that views, RSS views, commenting and more statistics are used and weighted to decided which posts are most popular. It’s half science, half meta-science, since items on your home page will be viewed more than items that aren’t on your home page.

FeedList
You can create your own feed reader with the classes and code that come with WordPress (function wp_rss). This plug-in just makes it easier. I use FeedList to place my RSS feed from Twitter on all my sites and to place a list of the books I am now reading in the footer of my blogs.

WP Related Posts
This plugin lists posts that have the same tags as the current post. It suggests to readers other posts they might be interested in.

Sideblog WordPress Plugin
This plugin allows you highlight a post category to always be in the sidebar (for example, Tweets via Twitter Tools if you do not want to use Twitter Tool’s widget). This plug-in is used in the sidebar of RachelandStephen.

Twitter Tools
It took me a while to “get” Twitter. For me, Twitter is a subscription-based public chatroom. You pick who you want to interrupt your day. As someone who doesn’t post to his blogs that frequently, Twitter allows me to keep my website fresh with micro-blogging. This plug-in is used with SideBlog in the sidebar of RachelandStephen. I have a tutorial on how I prefer to use Twitter Tools in my sidebar.