From WordCamp Norway 2012, earlier this year, an awesome presentation by Wilhelm, who takes us through the world of responsive wed design. It isn’t something new, I agree, and as he mentions media queries have been around for over 10 years. However, it’s very nice to catch up on things, since a lot of WordPress theme developers are still overlooking all of this.

One important aspect that Wilhelm mentions is that your printer is a device as well. Nothing to do with media queries, but reminds me of the importance of the print stylesheet. Also to keep in mind is that responsive doesn’t necessarily mean device, but the browser width too. It’s nice if you can shrink your browser width and still be able to read without scrolling left and right, I wish we had this in the PHP functions reference and the WordPress Codex — would save me a bunch of Cmd+Tab hits back and forth.

Anyway, how are you using responsive web design? What are your favorite examples? What grids and/or CSS frameworks would you recommend for responsive web design? Have you tried changing the browser width on my blog? Thank you for taking the time to read/watch this, and feel free to subscribe for more goodies!

It turns out that designers don’t really like feedback from other designers, at least at the concept stage, since everybody has different tastes. And if you’re quite an experienced designer, you don’t wanna know what others think about your concept, but you do want to get feedback when the project is complete, and that feedback will most of the time be from your clients.

Upon more detailed research of existing websites and startups, I came through quite a good set which let you collaborate on design concepts inside your team, but nobody’s going public. Others were the more popular online-portfolio websites, and only some were quite close to the ideas we initially had. Below is their list with a short description of each.

1. Dribbble.com

They’ve quite an interesting concept – Show and tell for designers in 120,000 pixels or less. They don’t allow big images, which makes the pages load much faster and designers concentrate on certain parts of their work. Each “shot” (it’s what they call them) can be tagged, faved and shared on Twitter, which is awesome. Members can leave comments to shots too, which is the actual feedback, then again, most of them are “great work”, “i like it” and so on. Not very useful ;) Dribbble is an invitation-only community, but artwork and comments are public.

[nggallery id=23]

2. Forrst.com

Forrst is an invitation-only community and in order to apply you have to show something that you’ve already made. The concept’s quite interesting though: not only you can share screenshots of your work. You can also share pieces of code and interesting links. So this seems to be a closed web designers and developers community. The screenshots show that images, links, questions and code pieces could be “liked”, commented and shared (yeah, you can share it on Twitter, but they have to have an account to view it.)

[nggallery id=24]

3. Notableapp.com

This is very, very interesting for collaboration inside your team. You don’t get much for the free plan and basic costs $24/month. This is good for companies with design and marketing departments. Their javascript widgets let you leave comments directly on top of uploaded images. They have the ability to comment inside source code, which is great. And as a bonus you can also get a rough SEO report of a certain website and comment inside that report. It seems that Twitter and Mozilla are using Notable.

[nggallery id=25]

Bounceapp.com is their sister which lets you grab a screenshot of a website, comment on top of the image and share with your friends online.

4. Behance.net

It seems to me that everybody is aware of the Behance Network, but unfortunately not everybody is using it to share their work. Since Behance is more of a portfolio, it’s not typical to see design concepts there, but feedback on finished work is as important as feedback on concepts. Although not as exciting ;)

[nggallery id=26]

Registration on Behance is private, but if you’ve got some designs to show off already, you can get your invitation in no time.

5. Lynchelka.ru

A Russian website for design feedback. The concept is taken from Artemiy Lebedev’s Business Lynch, hence the name. The community’s not very big and comments are not always decent, but it’s fairly easy to use, there’s a rating system and comments are allowed on top of the uploaded images. This was the closest concept to what I had in mind.

[nggallery id=27]

Well, that’s about it I guess. Do you share your work online? Code, design, poetry, music? If you have any other websites worth mentioning here in this list, please let me know via the comments.

Take a look at Mockflow. It’s driven by Adobe Flash, the interface is sweet, but meh.. You have to pay if you’d like to use it for more than 4 slides. And here’s an alternative that comes to rescue – Mockingbird! Totally awesome, free of charge, javascript driven, no limitations. Here’s something I managed to do based on my previous post. It took me about 1 minute and 50 seconds, sweet huh?

[nggallery id="17"]

By the way there’s also an option to share you mockup. Both in Mockflow and Mockingbird, so you wouldn’t have to print screen your slides like I did ;)

This is my first post in this series and I called it Web Design Showcase for October 2009. Since we’re talking about web design and design in general, I’ll keep this running in a gallery format, perhaps with a few comments for each entry (but not necessarily). I would also appreciate if you (the readers) would post a few links of something nice that you came across during the last few weeks, months, and perhaps you’ll make an entry for my next episode. But please, no offence, this is not a CSS gallery or anything, it’s stuff that I pick depending on personal tastes.

[nggallery id=14]

If you would like to visit any of the above websites just Google their names – they should come up eventually. I wouldn’t like to stuff the post with useless links and adverts ;) And yeah, the gallery looks terrific on Lightbox! Poor people that go blind searching for the “next” and “previous” buttons on Thickbox ;)

My brand new creation: The Foller.me Theme for WordPress and I ain’t releasing it public ;)

• The Most 10 Common Mistakes Web Designers Make | Noupe
• 50+ Top Free Icon Resources and Icon Sets for Web Designers | tripwire magazine
• 500+ Free Adobe Replacement Dock Icons | Creative Nerds
• 25+ 3D Text Tutorials to Enhance your Photoshop Skills
• Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine
• Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine
• 25 Magazine-Style Layouts for Your Design Inspiration | Vandelay Design Blog
• 10 Free And Powerful Windows Text Editors For Web Developers
• 25 Classic Fonts That Will Last a Whole Design Career
• 16 Free Javascript Code Syntax Highlighters For Better Programming
• 16 Gorgeous Web Safe Fonts To Use With CSS
• 30 Examples of Extreme Minimalism in Web Design | SingleFunction

• Get yourself some paper and a pencil and start sketching. You may skip this, but you’ll regret it!.. Unless you’re a photoshop genius, master of disaster, creator of a devil..
• Imagine your theme while you sketch – not about the look, but about how it will work. You must keep in mind the menu, posts, posts headers, meta, content. You may also try to imagine the sidebar along with some widgets and don’t forget about the footer – don’t make it too complicated (and yes, you should include a “wordpress driven” link – it rocks!).
• Think about your future theme. If your posts and pages and main post-roll look alike, you are ready to draw your sketches on computer (photoshop or whatever). If they don’t then I suggest you sketch your other pages on paper. If your main page is done it shouldn’t take much time.
• Ready? So your theme’s on computer now and you’re ready to slice it…? No, you’re not. You wouldn’t want your mates to tell ya “it’s okay, but it could have been better” right? Feedback! Feedback! More and more feedback! Upload your drawing somewhere and post it around asking for comments, likes and dislikes. Don’t listen to everybody though, only those who you agree with (there are tonnes of pseudo-designers out there who’d like to spoil your work). Make changes, ask for more. Make sure you don’t get into an infinite loop, two or three times is quite enough.
• Coding time! This is the step where you want to slice your theme into one (or two) XHTML file (don’t forget about the CSS stylesheet). Don’t mix this up with wordpressizing. This is the time where you can make some final minor changes. Now, put on your sunglasses and get ready to rumble! 8)
• WordPress. Wha?! Okay, take off your sunglasses, I was joking… I hope you’ve got a local webserver up and running with a copy of wordpress installed with the default theme. If you don’t, stop right here. Go get some XAMPP Web Servers package for Windows or install Apache, PHP and MySQL on Linux, then setup WordPress on your machine, cause working with a remote server through FTP WILL be a pain in the ass. Done? Fine, make a copy of the Default wordpress theme into a new directory and start editing it file by file: style.css, header.php, index.php, sidebar.php, footer.php, post.php, comments.php, page.php, … That’s the order I like. Hope you got my idea…
• So you didn’t get my idea…? Remember the XHTML file you have? Split it up into four parts: the header, the footer, the sidebar and the content and fill in your wordpress files. Remember that you have to use the WordPress Template Tags, so keep your WordPress Codex nearby.
• Polish. Widgetize. Promote.

The last step is all about debugging. Install some plugins, see how they work (or don’t), make corrections – that’s called polishing. Mine were almost all in the CSS stylesheet, mainly for youtube videos, image alignment, etc. Once your theme is complete, show off! Write about it, tell your friends, post into galleries, submit on CSS galleries (if you think it’s good enough). I’m not saying that you should make the theme available for free download (I didn’t! Yet..), no, just post screenshots or live previews. Get more and more feedback comments that generate new ideas. You’ll be ready for version 2 development in no time. Once version 2 is up and running, you can publicize your first theme, making your second one exclusive!

I’ll try to get myself listed on minimalsites.com with this although the ones already listed seem much more minimal than this. Anyawys, I’ve also decided to open this theme up for public use and get it listed in the WordPress themes directory. That’ll be in a couple of months though – still need to polish some backend stuff.

Oh, and I’m also going to translate this into russian and use it on my russian blog, ’cause the current one is so lame and green and way too old.

By the way, I’ve also installed a couple of plugins for the Twitter & Flickr feeds. Check them out:

• Twitter Widget by Sean Spalding
• Flickr Widget by Donncha O Caoimh

Thank you all for your comments, suggestions and support. PS I joined Blip.fm and keep up with my 12seconds.tv channel. I’m also working on my very first video blog post. Peace!