In case you didn’t know, or haven’t refreshed enough, Resource Pile is sporting a new, light on dark design. Along with the design comes a few extra functionality boosts, plus many major changes from our old, more standard blog format. I’ll attempt to get through them all now, including why we made the decisions:

The design & logo

The design idea all started from the logo. I was playing around with the idea of resources, boxes, pixel art, and I came up with the simple logo. I soon had the font sorted and was playing around with the navigation. After that, a simple dark background (with light noise effect) and a layout was formed.

Why light on dark? Well, Resource Pile is mainly about resources, most of our content is in image form, and not in text form. All text is in smaller paragraphs. We felt a light on dark layout fits this better, since it helps make images stick out, and we won’t be effected badly by the hard reading of light text on black background (due to little text). However, you’ll notice the background isn’t a solid black, which also helps to increase readability.

Revised layout/organization

You’ll notice that Resource Pile now holds and displays content on the front page in a much more suitable way. Due to the nature of the site, with multiple streams of content, we really needed to separate features from resources and resources from asides. We have also included a new section, inspiration. Hopefully, the combination of featured articles, resources, article links (asides) and the new inspiration will serve as the perfect dashboard/panel for any web designer/developer in need of anything!

Feeds & the custom feed stuff

If you click the feed link in the main navigation (header & footer), you’ll not just get our feed, or even just some lowly options, no! I’ve played around with the idea, and, because of our wide range of content, feeds are now 100% customized and tailored to the users need. Simply check what you want, and what you don’t want, and my little PHP script will generate the feed link you need. The one disadvantage of this is no Feedburner, and also no selection of subscribe links, just you’re browsers feed system. However, I’m looking into expanding this idea, with these links, plus a “feed preview”. I will be posting the results and how to achieve this in a later tutorial.

Submitting content

Yes, you can now finally submit new resources, links and inspiration. These sections will be continually updated with your submissions as well as our own of course. However, this should allow us to concentrate more on the features, which are, obviously, the most popular part of the site.

So… how was this and this and this done?

Well, I’m afraid you’ll have to wait for now. Yes, the features javascript slider is fully automated via WordPress, the feeds system is *almost* fully automated, and everything else is run via plugins or other hacks.

Well, I guess that’s it for now, please comment if you find any bugs, and please excuse any obvious problems/errors, we’re still working on certain pages of the site, but we couldn’t resist releasing the design now.

An important part of any blog or website is the feed count and subscription part. It’s where webmasters gain their dedicated readership (or, sometimes, not so dedicated readership). A feed count is often taken as a sign of a sites popularity, particularly in the blogging world, and often the feed count is displayed in a special way to push attention towards it.

So, lets take a look at how some other sites (mainly blogs in this case) display their feed subscription links/feed info. Please note, that all of these sites are using FeedBurner to get their statistics (scroll down past images for some related statistics):

Sites with custom displays of subscribers:

(more…)

Running a blog is basically running a service, we write, plan, re-write, research and gradually we create new posts for the site. This service is free to the public, and makes money (or should) from advertisements. At this point, after running Resource Pile for just shy of a month, I’ve come to the conclusion that there are two main forms the people using the service take: visitors and feed readers.

Much pride is taken in showing off feed stats on blogs, huge areas of pixel real-estate are dedicated to large icons and strings of insanely large numbers. Yet, despite so much praise and ‘demand’ for feed readers, they are not the best for your blog. Why? Well, they don’t click your ads (feed ads have, so far, proved mostly ineffective) and they don’t comment so much. It is, of course, possible to just have excerpts in feeds, but this normally results in less subscribers.

Not only this, but feed reading people seem to be hard to impress. For the most part, they only click subscribe when they really enjoy the site, and they happily unsubscribe after one not-so-good article or a few days with no new content. It’s immediately obvious when I look at RP’s FeedBurner stats, they fluctuate massively within days of posting, with a constant ‘low’ level of the more patient.

So my question is, instead of trying to make a profit off feed readers, and boast our feed counts to the world, we might want to appreciate the standard visitor, one who sees the site as it should be seen, with design surrounding content. Yes, feed readers can create an important solid ‘base’ on which a blog stands, but the regular visitor and commenter is the true gem within blogging.

On a further note, I don’t believe in feed readers, I like to a see a site as it is designed, because that design should compliment the content placed within.

There’s been many a post about the best combination of developer addons for Firefox, the best browsers for designers and coders, the best this and that. However, I think I’ve found the ultimate browser experience. A couple of the features before I get onto the detail:

• Simple interface, minimal top bars
• Built in mail client, with notification upon receiving new mail
• Excellent developer tools
• Perfectly fast
• Looks amazing, runs amazing, is amazing

It is, of course, not Google Chrome. In fact, it’s good old Firefox. Lets take a look at why and how it’s possible to make Firefox the “ultimate browser experience”.

(more…)

It’s amazing, simply amazing. It took me about two minutes to get downloaded and installed (most likely due to my slow internet), and then I was up and running! Web pages load extremely fast, it’s pretty insane honestly. Anyway, let’s run through some cool features:

Interface. The Chrome interface is amazing, extremely minimalist, very tab focussed, with some neat little animations, but they’re not too overdone. It’s both beautiful and usable, it just works! Another thing I noticed was the address bar, check it out, highlights the url you’re on, with the actual sub-directory greyed slightly, genius, so simple, so good. Also, I immediately noticed a lack of a status bar, but soon realized it does exist, but it only exists when needed (nicely fades in, and out).

Speed. This browser is simply amazing, webpages are basically instant to load and be displayed, and when you’re using Tiscali internet, that’s a pretty amazing achievement. Not only this, but Chrome is using just 44mb of ram! Compared to FireFox (also running) which is taking a whopping 197mb. Now that’s amazing.

Features. Chrome boasts an “incognito” mode which basically records nothing, so yeah, that’s got a pretty obvious use, but I currently can’t see many other uses than that really, unless you’re buying gifts perhaps? The homepage is also different, showing your most commonly visited sites, but I simply set it to reload my tabs from last time.

The problems. It may be in beta, but it’s pretty good. I did notice a few things though, which are particularly annoying:

1. Checkboxes don’t seem to appear anywhere? (extremely annoying)
2. It doesn’t always offer to save password (didn’t on digg anyway)
3. No good bookmarking method, only a simple toolbar.
4. No mousewheel click scrolling, something I really, really need.
5. Update, found another error: Chrome doesn’t seem to support overflow: auto; in CSS OK, looks like this is now working, but not always for me. I’ll have to take a deeper look into this. My test file which is working is here.
6. No design on direct feeds. Also, the FeedBurner xml link doesn’t appear in Chrome (perhaps Google want to hide the fact it won’t display properly?). Direct viewing redirects to the original FeedBurner page.
7. Update 2: another, submit <inputs> backgrounds style don’t always work properly like they do in FF and  IE.

However, from what I’ve seen, it’s fast, it’s simple, it’s beautiful. I can’t wait for it to come out of beta, I can assure you, the final product will be amazing.

On a final note, this might be bad news for FireFox however, even if they can survive without Google’s funding, such an amazing browser like this might win-over many, many FireFox users (especially when we consider that a lot of FireFox users are more… tech savvy).

Update: one more annoying thing (not Google’s fault) is the lack of StumbleUpon for a while!

I’m sure almost everyone reading this site has something they have copyrighted, so i’ve decided that i should probably clear up the proper(and most legally binding) method of displaying copyright on your website(or artwork, music etc. etc.).

“Designers should always assert that their work is protected by copyright by using the © symbol on their page, in the format ‘© YEAR OF PRODUCTION, AUTHORS NAME’. This educates the public that you’re asserting your copyright over the work.”
Via: Sam Brown

The quote above is from Stephanie Burns of Withers & Rogers and was in the article ‘Thwart the design thieves’ in this months .NET magazine.

So basically the proper format is “© PRODUCTION YEAR-CURRENT YEAR, AUTHORS NAME”. If you are doing this in PHP you can make it update the current year automatically, using the string below.

&copy; 2007 - <?php echo date("Y"); ?>, Your Name.

I’ve always believed that, even if you work exclusively on websites, sourcing inspiration from things such as posters, stickers, books can be far more useful than just browsing the millions of identical CSS galleries. It can also be a great way of calming down if you’re feeling stressed out by work, just take 5 minutes to get inspired!

Let’s take a quick look at the hugely successful Dark Knight. These posters aim to convey dark things, dark feelings, evil feelings, towards both the Joker and Batman, since they’re both very dark characters:

(more…)

Choosing a domain name is tough, and the task is made even more impossible because so many excellent domains are either a) taken by a site or b) stolen by a domain squatter. Thankfully, there’s a whole bunch of useful tools out on the web which help in choosing a domain name:

1. Bust a Name combines words you enter and finds available domains. The tool can also add endings or prefixes as well as searching through many domain extensions. It can also look on Sedo for domains on sale.
2. Domains Bot is another suggestion tool, simply enter a few keywords and hit go. Can come up with some excellent results, but also contains many useless ideas.
3. Name.com is primarily a domain name provider, but you can get some great suggestions from their site, which you can then go and purchase elsewhere..
4. Ajax Whois and Who.is are both used to check if a domain is free for purchase (although they can be wrong in some cases). Who.is also lists suggestions from Name.com which is rather handy. Ajax Whois has a more advanced system where you can save your favorite domains, and it also provides “domain hacks” (like [del.]icio. us).

If you combine the use of the above tools with a little inspiration, a domain name is never too hard to come by. However, choosing a domain name is only half of the way to purchasing it. A good, well known tip is to always google the domain in question. It may be free now, but it’s possible it was used in the past, and therefore could have bad reviews/things associated with it, which could significantly harm your reputation. One last thing to check for is trademarks. If you purchase a domain which breaches a trademark, you may find yourself being forced to give it up pretty quickly. Lastly, some thinks you should want in your domain name:

1. Make it as short as possible, but also something that can be said. Having HarveysHoovers.com is better than HarveysHappyHovers.com, but it’s not better than HarvsHoovers.com, why? It’s just as brandable, but shorter, and possibly easier to remember.
2. Make sure it is brandable. Don’t pick a generic name like myubercoolwebsite.com, because that just isn’t going to form a brand. Think of Coca Cola for example, they didn’t call it theuberawesomedrink.com did they?
3. Always check the urbandictionary.com because a seemingly innocent word can potentially have so many “other” meanings.

Good luck in finding your new domain name!

I’ve gathered a list of websites I use almost every day in some form for web development and design, every site serves a purpose, and the collection of sites covers every single required resource in any web project I can think of (well, as long as PHP is the main backend language).

I’ve split the list into four categories so you can jump down to them quickly: Graphics, Photoshop, Tutorials, Inpsiration & General.

Graphics : icons, fonts, etc

Icons, one of the most over-abused things which websites LOVE to list in huge quantities in return for lots of diggs. Here are some real icon resources which have actually helped me:

1. http://www.iconlet.com/ - an archive of literally thousands of icons from many many popular sets online. A great place to find new iconsets when looking for one specific icon via the search.

2. http://www.iconarchive.com/ - although the site is overly cluttered, there’s a surprising number of excellent iconsets hidden within.

3. http://www.iconfinder.net/ - the third and final icon search site, this site tends to display larger icons than the above, possibly more useful in a desktop/large menu environment, yet still a good resource.

4. http://www.dafont.com/top.php - daFont is an excellent site, but more useful than all is the top 100 font list, a wonderful selection of some amazing fonts. However, be sure not to use the “free for personal use” ones on commercial projects, an easy mistake I have made in the past.

5. http://ilovetypography.com/ - it’s all about the sidebar for resources on ilovetypography. An excellent monthly updated list of top-notch fonts to get dug into.

6. http://www.textureking.com/ - a great resource for all kinds of different textures. Perfect for overlays, backgrounds, etc

7. http://www.tenbytwenty.com/ - as stated on their site, Ten by Twenty make splendid little pixel-based products: wordpress themes, icons &amp; fonts.

Photoshop: brushes, .psd files, etc

1. http://www.deviantart.com/#catpath… - deviantART’s photoshop brushes collection is the best in the world, that link goes to the most popular of all time, there’s some amazing stuff there.

2. http://www.deviantart.com/#catpath… - another deviantART link, this time to their all time popular photoshop .psd files, more excellent work to use and play with in there too.

3. http://www.psbrushes.net/ - a relatively small collection in relation to deviantART, but this means that generally, the brushes are of higher quality.

4. http://myphotoshopbrushes.com/ - a site dedicated to photoshop resources including brushes, patterns, shapes, tutorials.

5. http://www.brusheezy.com/ - one of the larger sites dedicated to photoshop brushes and patterns, some excellent stuff is to be found here.

Tutorials: design, code, etc

1. http://psdtuts.com/ - excellent site you most likely already know. Instead of many mid-quality photoshop tutorials, the site contains less (although there’s quite a lot now) amazing quality tutorials from many well known photoshop - genii.

2. http://nettuts.com/ - from the same people as PSDTUTS (above) comes NETTUTS, an excellent tutorial site with more code and website related tutorials.

3. http://webdesignfromscratch.com/ - some excellent tutorials on everything you need to know to create a website from scratch. Including many under-talked-about topics such as wire-frames, information architecture and marketing/SEO.

4. http://tutorialdog.com/ - more quality tutorials accross a range of subjects: photoshop, javascript, max osx, html & css

5. http://w3schools.com/ - apparently some people hate this site, but I’ve found it extremely useful as a very quick little markup reference, especially when learning a new language (javascript for me).

Inspiration: css galleries, art, etc

1. http://cssmess.com/ - my own gallery tops the list, but seriously I believe we show the most inspiring sites on the web (as well as the messy ones too)

2. http://cssmania.com/ - probably the most updated gallery, but recently the sites have lowered significantly in quality, most new sites get put on it, which is a shame really.

3. http://bestwebgallery.com/ - one of my favorite css galleries, the sites are always very inspiring and of great quality.

4. http://webcreme.com/ - the last gallery, with again, some excellent quality sites.

General: other useful sites

1. http://www.smashingmagazine.com/ - a site I constantly read for their long, well writen articles relating to design and design on the web.

2. http://designreviver.com/ - one of the better roundup sites, with some quality tutorials too.

3. http://www.webdesignerwall.com/ - amazing tutorials, excelletn design analysis, a must read.

4. http://www.sxc.hu/ - an awesome and more importantly, free, stock photo website

This is just a giant collection of Tutorials on learning different web based programming languages. Just going to get my plugs in at the top of the post. Resource Pile is run by Kerplunc so feel free to check them out. If you want shared hosting I recommend checking out Web Hosting Search, or our hosts: Fanatical Host for shared hosting and for Virtual Private servers you should check out SuperBytes. If you plan on learning any of these languages and want to try out your skills in a live server environment then check out the two hosting sites above. It really depends what language you want to learn to choose between the two. Hope you enjoy the post!
(more…)