Custom Colors on WordPress.com

Custom Colors on WordPress.com

Now that’s an awesome way to leverage the WordPress 3.4 theme customizer! The Custom Design upgrade on WordPress.com gets a Custom Colors update — it allows you to color your blog to your taste, with those awesome predefined color palettes, color matching recommendations, or complete control with manual color picking.

Let’s hope the whole Custom Design package makes it into Jetpack sooner or later, though it’s going to be quite a challenge to support themes you have no control of, unlike WordPress.com. I’d really love to use these features with the self-hosted version. What about you?

Automattic.com Goes Mobile Friendly

Yes, so now we’re cool, just like everybody else in town :) By the way, the new Twitter embeds are working like a charm in WordPress 3.4 (as you can see), so I had to disable my Twitter Embed plugin, which you can still use if you want to embed tweets with shortcodes and embed code reversals. Have a great Thursday!

Wilhelm Joys Andersen: Responsive Web Design

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!

5 Websites To Get Feedback For Your Design Concepts

I was thinking of launching a similar startup in October. I thought of making it easier for designers and photographers to share their work online with their friends, co-workers and people they don’t know in order to receive good feedback. I did some research and spoke to some of my friends online about where and how they share their work.

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.

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.)

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.

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 ;)

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.

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.

Creating Mockups with Mockingbird

Everyone these days knows that creating any user interface should start with a mockup. Whether it’s something drawn on a piece of paper or almost designed in Photoshop. When speaking about application UI, software like Borland Delphi or Microsoft Visual Basic would be just fine, especially if you need to create some simple click events. The web though is slightly different, and creating mockups with online web applications is way cooler (and faster too) than VB.

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?

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 ;)

Inspired: Web Design Showcase October 2009

Browsing the Internet, reading Twitter streams, RSS feeds… I see billions of websites everyday (kidding) and there’s lots of stuff out there that inspires me everyday, so I’ve decided to run a new series called “Inspired” where I’ll post the most interesting stuff I come across (monthly, weekly, yearly, I don’t know yet, maybe I’ll close this down the very next day ;)

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.

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 ;)

Powered by Delicious: Web Design, Coding & HTML5

This is my first “Powered by Delicious” post, but I plan on writing similar posts at least once a month or so, depending how many links I bookmark. Here’s a list of some of my latest delicious bookmarks, with goodies on web design, coding, html5, photoshop, javascript and a bunch of other stuff.

WordPress: Theme Design Tips & Tricks

Greets. If you never did a WordPress theme before, then this post is for you. As you may already know, I released my very first wordpress theme a couple of weeks ago and it’s the one you’re looking at right now (unless you’re reading this from last year’s archive). I can’t say it was very easy developing it, but I noted down some tips that would make the process quicker for you whenever you decide to create one yourself.

  • 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!

Blog Redesigned: Hi, This is the New Me!

Done! Wohooo! That seemed to take forever but my brand new WordPress theme is now complete and polished. Apperantly this is my first ever WordPress theme done from scratch. I started sketching like a week ago in Corel PaintShop Pro X2 (btw I don’t like to do Photoshop ’cause I’ve been using PaintShop Pro for around 6 years and got pretty much used to it. Looking forward to Adobe Fireworks CS4 though!). I got some good feedback on Twitter, DeviantArt and from some of my local friends, so I made some changes, sliced it up, wordpressized & widgetized and here we are!

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:

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!