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.

October Quickie: A Little Bit of Everything

Well yeah, it started snowing today here in Moscow, but this post is not about snow. I remember I’ve done some quickie before, but couldn’t find it. Perhaps it was something I mentioned inside the blog post with a different title. But anyways, this is a short roundup of what I’ve been up to lately.

Let’s start with Python.. After reading a very popular book called Programming Collective Intelligence by Toby Segaran (review coming later), I had no choice but to peek at how Python is doing. I didn’t carry out much of the excercizes in the book while reading it, but I did run a few experiments afterwards. Some of the code examples were translated into PHP to immediately implement into my Twibots project, the juice was left for later.

This weekend I decided to gather some data from the Twitter Streaming API for some experimental purposes, and I decided to do this in Python. Of course I hadn’t had much time to read good books (still waiting from Amazon), but the plenty online tutorials, guides and articles out there are quite okay. So with a little trial and error I managed to write a script which gathers a little over 10,000 tweets in 30 minutes and dumps them into a database. That’s 20,000 tweets an hour, ~ half a million tweets a day. What am I going to do with those? I’ll give you an insight on this project a little bit later ;)

Twitter. I finally got #newtwitter. I thought it was a joke. It’s not a secret that I have multiple Twitter accounts, but I use them for development purposes, and guess what, those accounts were switched to the new Twitter three weeks before my account was. So yeah, I’m a little mad at Twitter, but their new look really rocks. They also need some updates to their mobile version.

.NET MVC. Some of you might be wondering (or not) what happened to that .NET MVC project of mine. Well it’s 99% finished, but we’re constantly coming up with changes to the content part, switching images around and other dirty work. Latest comment from the client was – okay so I open up Safari, click View and check the Zoom Text Only option. Then I zoom in and the whole design breaks! You guys promised me nice-looking XHTML in Opera, Safari, Chrome, IE and Firefox, what the heck?

PHP. I wrote an app in PHP that allows me to turn off my PC from my iPhone. I extended it to include volume up/down features a few days later. These are the kind of apps you write when you’re lazy ;)

And finally some goodies from all around the web for web designers and developers:

That’s it for today. Cheers!

5 Awesome Links for Web Designers & Developers

It’s July and it’s so damn hot back here! I think all the possible new records have been set last week in Moscow. Thank god we had those new air conditioners install in the office before the heat wave, otherwise it would’ve been impossible to work. Anyways, haven’t tweeted much this week, but I did go through my RSS feeds, and here are some interesting links for web design and development fans:

  • Browser Cover me – before you present your designs to your clients, make sure you give them a cool border with this online app. There are several different systems and browsers you can pick from, which makes it even more awesome!
  • phpQuery – how many times did you have to screenscrape a web page and dig something out of it? Yes, XPath is cool, but it doesn’t work with HTML people write these days ;) phpQuery gives you the power of jQuery selectors and functions in php!
  • 15 Must-Have Minimalist Icon Sets – an awesome freebie set for your new web designs. It’s quite important to keep using the fresh stuff, so posts like these are quite handy
  • 10 Useful WordPress Security Tweaks – a very nice article on Smashing Magazine about WordPress security. Very informative and awesome!
  • Konstantin’s Notes – okay okay, this is my Tumblr page which I use to post stuff on the fly, sometimes quite interesting ;) which makes it awesome too!

This was the short list for today. Stay tuned and thanks for sharing!

Driving the 960 Grid System

CSS frameworks are unflexible, overbloated and confusing. Whoever said that, never used a CSS framework, or at least the 960 Grid System. I used to think that too, some time ago, but I did use the 960 Grid System to draw my templates. I didn’t care about the CSS, the columns, etc. All I used were the Photoshop templates with a preset grid of 960 pixels, which was pretty convenient for designing purposes. I had no idea that layouts performed in such a grid could be sliced that easily.

Driving the 960 Grid System

Maybe I didn’t take enough time to read all the info about the 960 Grid System, maybe I was just afraid of CSS frameworks, or maybe I thought that CSS is so simple that there’s no need for any pre-written code except for the Reset CSS. A few days ago I decided to take one more look at what the 960 grid really is, how it works, and why people like it. I found a couple of tutorials which explained the system, mostly in text and images, but I was too lazy to read, so I searched for some videos.

I instantly came across an awesome post by Jeffrey Way on NetTuts, written back in January 2009, called A Detailed Look at the 960 CSS Framework. It’s a short and informative screen cast, where Jeffrey explains what CSS frameworks are, why we should use them and shows an example layout done with the 960 CSS.

After viewing the video, I decided to try it out, of course on my own blog. I took the old layout and redone it using the grid system. Not sure about all the regions on the website, but everything now seems to work as expected. The layout didn’t change much, maybe a few pixels in the width and the sitemap, which I’m quite comfortable with. Tested in IE, Firefox, Chrome and Safari, seems okay.

One thing I didn’t expect is that the grid system breaks whenever you add a 1 pixel border around a grid block, or maybe it’s just me who’s unlucky, and their Reset CSS is quite awkward, or maybe I’m just used to others. Anyways, for simple 960 pixels layouts, the 960 Grid Systems is perfect, for easier, faster and browser-friendly development, which is why I recommend it. Feel free to share your thoughts on CSS frameworks in the comments.

Update: Here’s an awesome video by SitePoint called CSS Frameworks: Make the Right Choice:

[vimeo]http://vimeo.com/7530607[/vimeo]

CSS Tricks – Playing With Position: Relative

For some of you this post might be obvious, but I’ve been working with XHTML and CSS for years and haven’t figured out you could do such magic! We’ll be talking about the CSS Position property and it’s combinations with the Overflow property.

Let’s talk about each of these properties individually first. The position property could have five different values. I’m not going to explain each of them, as you can read about CSS positioning at W3Schools. We’ll be talking about one of the most useful – relative value.

I don’t see relative being used that much, instead people prefer absolute positioning, especially if we’re working on a left-aligned fixed-width layout. I agree, this is bullet-proof when your website is static. But what happens when you add that extra bit of text at the top? You drive to your stylesheet and adjust the top parameter every time something moves. Then again, absolute positioning is treated differently in some browsers, especially IE.

Relative Positioning

So why isn’t relative being used? Well there may be plenty of reasons for that, but personally I loved it when I had to overlap something, especially if it was being done vertically. Horizontal overlapping brings issues.

Perhaps the most irritating thing about relative positioning is that when you move it around, the block sort of remains in it’s own place but it’s content is moved. I’ll try to illustrate this in pictures. Let’s look at the following example:

CSS - Position: Relative

Three fixed-width blocks, floating left, everything seems okay. Now let’s try to move the green box outside of our content block using position: relative. Here’s what happens:

CSS - Position: Relative

We were really hoping that the red and gray blocks follow the green one, but meh!

Overflowing

This is where overflow comes in. W3Schools has got some specifications and examples on the overflow property too so I won’t be explaining the values. One interesting thing about overflow is that you can specify visible which basically means that all content that didn’t fit inside the box, is still visible outside of it.

Yes, may seem useless at first, but not in conjunction with the width: 0 property! This means that we could tell the browser that our block is 0 pixels wide, but using the overflow: visible property still display whatever is in the block!

CSS - Position: Relative

Alright, that seems to have done it. But what is it actually for? Well let’s try to make a little list here:

  • I’ve seen some javascript and CSS drop-down menus which look very sweet, but they’re using absolute positioning and counting pixels via javascript. Now that’s strange!
  • You sometimes need to place a block outside of the one it is actually written in without loosing that extra space (as in the examples above).
  • What if you need to place a block into another one, if in HTML it’s not supposed to be there? (example below)

Quick example – you have a big cycling picture, sort of a slide show in the middle of your page. Now that’s cycling via javascript which is replacing a block with another one, block by block. So in that slide-show you’d like to have a search box which should be on top of the cycling images.

Well, yeah, you could write 5 search boxes on each of the slides haha! Rediculous isn’t it? Draw your search right after the cycling block is closed and move it in using relative positioning:

CSS - Position: Relative

I hope that all makes sense. Oh and by the way, did I mention I haven’t tested this in all browsers? Well works in Firefox 3 and IE 7-8.. If you’ve got some time to test this in your browser, please leave a short note in the comments section below ;)

Handling IE6

Great, I ran a few tests on different browsers, and every one worked fine except, of course, Internet Explorer 6. IE6 treats the block as a block, even if it’s width is set to 0, but there’s a fix for that too! Combining position absolute and position relative as child and parent, it seems to fix the problem. This is because absolute positioning works absolute to the browser window if there’s no positioning specified in its parent, this is why we use a relative position without any top and left options, so that the parent block stays where it is, and the child block’s absolute positioning is being counted from the parent.

This trick is helpful for relative positioning within a content block which is centered to the page for instance. So the code would be:

<div class="b">
    <div class="wrap">
        <div class="a1">
            <div class="a3">123 456 789</div>
        </div>
        <div class="a2">
        456
        </div>
    </div>
</div>

And the CSS would be:

.b {
	width: 100%;
	margin: 0;
	display: block;
}

.wrap {
	display: block;
	width: 300px;
	margin: 0 auto;
	background: yellow;
	position: relative;
	height: 100px;
}

.a1 {
	float: left;
	width: 0px;
	overflow: visible;
	position: absolute;
	left: -90px;
}

.a2 {
	float: left;
}

.a3 {
	width: 100px;
	display: block;
}

Don’t forget to specify the XHTML 1.0 Transitional Doctype!

The Web Development Cycle Explained

If you’ve ever been to software development classes you probably already know about the software development cycle: Pre-alpha, Alpha, Beta, Release candidate (Gamma, Delta), Release to Marketing and finally, General Availability. Well it goes pretty much the same in the web development world, except that there are a few other parties involved in the whole process, and today, in the dynamic era of the Internet, web development corporations, small and medium businesses and tiny web development groups often work from different places.

I’ve been working freelance for quite a long time, and most of my projects were solo or perhaps two or three people at max, leaving me as the leading developer. Since January this year I’ve been working on a few projects with a team of over 5 people and high-demanding standards. This raised the problem of project managing and a completely different view of the web development cycle. In this article I’d like to outline the major steps of the software development cycle and how they could be applied to the web development business.

Development: Pre-alpha Stage

As we all hopefully know, each web application starts from a project overview written by both the client and the web development company. After this overview has been approved, the designers start to sketch, the programmers start to write code blocks, and the content managers gather keywords and start writing short subjects, while the client sits back and gets ready to mock anything that is sent their way. This is probably the pre-alpha stage, sometimes called wireframing or mocking up (in general, not only design terms).

Development: Alpha Stage

This, perhaps, is the stage where the design layouts are shown to the client, some text is revealed by the content managers, and something gets approved by the client. In most cases this stage takes the majority of time dedicated to the whole project. It’s pretty difficult sometimes to convince clients why certain designs look better than others, especially if they have a bad, or no taste at all. Practice shows that it’s often a good idea to:

Present the client with two variants to pick from – a really aweful one that in general terms could be used, but with a probability of at least 95% that it wouldn’t; and a really good one that you and your company placed the bet on.

Sure there’s a chance that your client goes with the first choice and you’ll end up working on something that makes you sick, but hey, this doesn’t work all the time ;)

Development: Beta Stage

After everything has been approved by the client, the Beta development stage is where coders have some fun. There’s no reason to expect that they get it right from the first time, especially when working on a big project. This is where I suggest you use the three environments method – development, testing, production. Some modern IDEs such as RubyMine (for Ruby on Rails) have built that in, allowing you to switch from one environment to another with a click of a mouse. But unfortunatelly the browser problem persists.

Web Development Cycle

I came across a really useful Firefox addon a few weeks ago, it’s called SwitchHosts. At first sight it’s something that is unnecessary – development environments could be switched to different subdomains – dev.domain.com and test.domain.com, finally the production address – domain.com. This, in my opinion, is something that’s really difficult to tackle when working with software that stores options, etc into databases. For instance – WordPress, where the database is tied to a certain domain.

Sure you could go ahead and use your text editor’s Search and Replace function but:

  • Would you really like to do it every single time?
  • Would you like to teach your other employees to do that?
  • What if there’s an error checking algorithm involved? For instance WordPress widgets disappear after a Search and Replace run.
  • It’s so much easier to keep track of a single database dump than three.

Convinced? Okay but why do you need SwitchHosts to keep one domain tied to three different addresses? Couldn’t you just use the hosts file for that? Well, sure, but then again, try to explain to your employees (I’m talking about the less coder-fellows) how to work with the hosts file, then of course they’ll forget to flush their DNS cache as soon as they’ve added that extra line. They’ll end up making changes to the production server, and you wouldn’t like that, would you?

With SwitchHosts for Firefox you could switch to as many hosts file as you setup in only a couple of clicks. Besides, it’s always there in your status bar, showing which hosts file is currently active which, believe me, solves plenty of problems. One more feature I love in SwitchHosts is that it flushes your DNS cache automatically as soon as you switch from one environment to another.

Make sure that you’ve setup version control systems (such as Subversion) on each of the environments. It’ll make it much easier when replicating from development to testing and back to development, as well as from testing to production.

The Beta Development Stage is probably the most important part to return back to when your client is not satisfied with the results, or perhaps would like to add a few minor changes to the layout, text or pictures. Of course they should be charged extra for this, and it’s extra work for you, but hey, it’s their money they’re wasting ;)

Testing: Release Candidate

Each Release Candidate should probably be located on the remote testing server, unlike the development, which should be kept locally for the developers. Of course it’s easier to do local testing, but:

  • All tests should be held in environments as close to the real world as possible, thus a remote machine, preferably on the same hosting plan as you production server. Don’t confuse “same hosting plan” and “same server” – your testing and production units should have different IP addresses.
  • Your content managers will need to polish their work, would you really like to educate them to install server software and deploy the project on their local machines, nah! ;)
  • After all our testing environment couldn’t be located on the same machine as the development. Wha? Run two different copies of Apache?

So, the RC is where you show off to the project manager, who asks the content managers to review their work on a working website. They could do this online themselves, or they could send reports to the developers.

Release to Marketing (from the general software development cycle) should be in the middle of this stage, where a decision is usually taken to go on and show the results or return back to beta development.

So if Marketing approves the whole thing, the end of the RC stage is where you should show the results of you work to the client. Of course they’ll need some hosts-file hi-jacking, and perhaps with the SwitchHosts addon it wouldn’t be as dirty as it usually is. If the client has good reasons not to do this, then of course you should drive it over to a sub-domain. But I really don’t recommend you showing off on the production server, especially if there’s an old website working there – clients don’t like their old websites to be taken down before the new one is 100% approved. Some of them don’t understand that there’s an option to restore their old website ;)

And when the Boss says yes …

Production: General Availability

This is the victory stage. It’s where both parties yell “Wohoo!”, drink champagne and drunk coders deploy the project to the production server overnight. What could possibly go wrong? Often takes less than a minute:

svn checkout svn/tags/1.0 .
mysql -uname -ppass db < include/db.sql

Great! Well this doesn’t mean that you can go ahead and delete everything you’ve done at the development environment. Yes, testing server can go to rest, but you should always keep a copy of all your work, preferably in an archived Subversion repository. Why?

  • The client could return in two weeks and say: hey, remember you showed me that second version before this third? Could we return to that if payed you some extra cash?
  • Your client could ask you for a backup copy of the work you’ve done. You shouldn’t have problems handing it over or restoring the website if they broke it within a few weeks. Keep a good reputation.
  • Parts of it (even those which were rejected) could be quite useful in future projects.
  • If clients are satisfied with the work you’ve done, they will probably return to you when they’ll need to add a few extra functions to the website that you made.

Well, that’s about it. Of course if you’re a solo-freelancer you wouldn’t need any of this stuff. You wouldn’t need version control systems at all, as all your work is done by you. A project backup is simply a copy-paste issue. Though it’s sometimes useful to imitate teamwork. After all, you can’t be sure that you’ll be coding solo for the rest of your life ;)

There are tonnes of free and open source tools out there to help you out in version control – Subversion; and in project management – The Trac Project (P.S. check out these 5 Really Useful Trac Reports).

This was the web development cycle outlined based on my experience. Sure some individuals and companies work using modified versions of this cycle, some use a completely different model. But, whichever one is picked, it all comes down to three major phases – development, testing, production. So, what’s your case? Which model is used by your company and why do you prefer to work that way? Feel free to give a word in the comments area below.

Short Note About HTML Anchor Bookmarks

This is totally rediculous, but it’s a fact. Some version of Microsoft Internet Explorer do not handle empty anchors at all! Unlike Firefox, Safari and the rest, IE simply doesn’t see them, so anchors lead to nowhere (top of the page). This is just a note for you (and me) to keep your anchors filled with something, at least a whitespace character ;)

<a name="bookmark"></a>Bookmark Text <!-- Bad! -->
<a name="bookmark">Bookmark Text</a> <!-- Good! -->

Keep that in mind ;) Cheers!

Facebook-style Lightbox with jQuery and Facebox

I recently came across an awesome plugin for jQuery which is called Facebox. Facebox produces a clean lightbox that can be a container for popup images, text and basically any HTML layout as well as AJAX powered content.

The problem with Facebox is the lightbox placement. The dialog itself is placed in the center of the page horizontally with a preset margin from the top, which looks good, but what I did notice is that the box containing the loading icon is being placed somewhere to the left part of the page. Well at least on Firefox 3.5.7.

I couldn’t help but noticing that FamSpam and StaffTool are using a different set of functions and styles for the lightbox placement and copying them into my code solved the issue.

The two functions are called getPageScroll() and getPageHeight() and are marked as quirksmode.com inside the code. The #facebox style in the CSS lacked a width: 100% which seems to have solved the issue for now. There’s also a certain overlay in the original version which includes an interesting IE6 hack:

height: expression(document.body.scrollHeight > document.body.offsetHeight ?
	document.body.scrollHeight : document.body.offsetHeight + 'px');

The versions at Stafftool and FamSpam however don’t mention any overlays in there code. Pretty messy, huh? Well, other than that, the plugin is very lightweight and cross-browser, works well in IE and closes the popup when pressing Esc, which unfortunately has to be hand-coded in other versions of the Facebook-style dialog boxes.

Grab the code at GitHub and enjoy: Facebox for jQuery.

jQuery Cycle: Pager and pagerAnchorBuilder

One very awesome and useful plugin for jQuery is jQuery Cycle, which pretty much works out of the box, but browsing through the second part of the Intermediate Demos we’ve seen a click transition called Pager, which is somewhat tricky.

Pager is nothing but a few links next to your cycling block with page numbers, which switch the cycle upon click. It’s very useful when you have to create, say a list of services a company provides, with sweet lightboxes (don’t confuse with the Lightbox plugin), perhaps with some images, cycling through their descriptions, yet we’d like our visitors to be able to switch through the services manually, without having to wait. This is exactly what the Pager transition does, but hey, who the hell would want page numbers instead of their services names?

This is where pageAnchorBuilder comes in, and it’s not quite obvious what has to be done to make this work. According to the jQuery Cycle documentation it’s:

pageAnchorBuilder – callback function for building anchor links: function(index, DOMelement)

So here’s a demonstration of how this would work. Let’s setup a quick cycle, with a few options. Perhaps you’ll need more than I listed below ;)

jQuery('#fade').before('<div id="nav" class="nav"></div>').cycle({
	pager: '#nav',
	pagerAnchorBuilder: paginate
});

So paginate is a callback function which takes two arguments, the index and the DOM element. Using the index will work just fine. Let’s see how this works with text:

function paginate(ind, el) {
	if (ind == 0) return '<span>Service One</span>';
	else if (ind == 1) return '<span>Service Two</span>';
	// and so on
}

I think that’s pretty straightforward once you understand how it works. Let’s try some images:

function paginate(ind, el) {
	return '<img src="http://whatever.com/services/service' + ind + '.jpg" />';
}

So name your images service0.jpg, service1.jpg, etc. And my favourite, CSS classes:

function paginate(ind, el) {
	return '<div class="service' + ind + '"></div>';
}

Then just add a few .service0, .service1, etc. classes in your stylesheet, voila! Hope that helps, and don’t forget about the other useful options. Cheers!

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