Digitalmash Journal

Ignorance Avoidance

2009-08-20T23:17:41+00:00

Well that was the title of an email I received last week. I thought I’d share it because I get a lot of emails asking this sort of stuff.

Dear Rob,

Just wanted to tell you I think your site is awesome, and I encourage you to post more tips & tricks, as it's very helpful.

My name is Jonathan, and I'm a student in Chicago. I've always been very into design, but have recently started finding an interest in designing for the web. I graduate with my Associates Degree (in design) this coming Spring. However, I've been fortunate enough to meet a local web designer, and I have landed some free lance work. Along with asking my friend/mentor about specific design questions, I like to bounce things off other fellow designers as well...two, three, and even four heads are better than one, right?

My question(s) is this. I feel I have a good handle on the design aspects of building an attractive website, I'm confident my creativity, and approach will yield great results. However, I am totally clueless when it comes to the development side. Outside of general HTML/Table crap, I really know nothing. I've attempted to teach myself CSS, however, all I find are a bunch of sites that tell me how to create a vertical drop down nav menu, kinda useless. I want to know how to design in a way that implements CSS, how to set up containers, things like that. I also want to know if it's truly important to know the development side or if I should pour my blood, sweat and tears into purely design. I want to be a well rounded designer, I want to build attractive sites, but almost as important, I want to know how sites work, and how they can function even better.

Any suggestions, tips, or other things that may point me in the right direction?

Yours Sincerely,

Jonathan

Dear Jonathan,

Hiya. Great to hear from you.

Firstly, cheers for the kind words. I agree – I could certainly post more – and will be making more of an effort to do just that.

Also, congratulations on the freelance work! The move into getting paid for the work you do definitely changes the vibe (mostly for the better). It's an exciting time.

There are certainly resources you can read and things you can do that will help you get your head around CSS. The good news is that pretty much anyone is capable of learning to build CSS driven, standards-compliant sites. The hard part – your ability to design good stuff – however, is something that is much more personal and perhaps less malleable.

Everyone's different, but for my 2 cents, it's very hard to be a front-end designer without a solid working knowledge of HTML & CSS. Whether you learn what I'd call real development (like client-side or even server-side scripting) is up to you. For me, I know my talent lies more in the visuals than programming, so that's where I spend most of my time. You may be different. And there's a rare breed of people who are admirably able to develop as well as they design. The bastards.

Changing from thinking in table-based layouts to CSS isn't as big a jump as you might think. Even though it probably feels more restrictive in terms of achieving your design, after a little while you'll feel much more able to achieve what you're trying to do with less fiddling. What you're going for is a separation of content and form. This gives you the ability to delivery the same content for different browsers, devices and media.

In terms of learning techniques, if you're like me, you probably need to actually apply what you're learning to truly grasp and remember it. So because you're already working in the field, once you've got a base level of understanding, perhaps the best approach for you would be to learn CSS on the job. I've certainly found necessity to be the best motivator for learning something new. That means designing page concepts without worrying if you're capable of building them and then digging in working out how to achieve them.

Getting Started

The are heaps of great books out there on this. Below are some online resources that can help you get going:

Basics

Positioning

Lists

Selectors

Image replacement/sprites

Lastly, you can run your sites through the HTML and CSS validators just to double check everything's right. That's not to say all your sites should always validate, because sometimes that might not be possible, but if nothing else, they're a great way to better understand web standards.

For most other things you can usually use Google if you're after something specific. The trick is being able to pick the resources you can trust and those that might not be teaching you 'best practice'.

More than all the resources above, you'll really benefit from simply being curious about how certain things are achieved on sites around the web. Deconstruct their CSS not to copy, but to learn. I guarantee all your favourite web designers do this all the time.

Best of luck with it!

Rob

Dynamic Columns

2009-05-25T08:10:11+00:00

I get a lot of emails asking how I output the comments in a column format. Here’s how.

Now the title is probably a little misleading. We're not really creating dynamic columns in the sense of something like this. I guess a more accurate title may be something like 'dynamic float clears', but that just didn't have the same ring to it.

The Problem

For those not sure what the issue is, let me explain. When you output information in floated columns (like my comments, for example), it's hard to clear each row when the content is dynamic and you don't know how many items you're going to have.

We need a way of making every fourth (of third, or sixth or whatever) item drop to a new row.

Making Columns

Now the css involved with making things float as columns is really pretty simple. Just specify a width, and float and you're good to go.

For example, here's a really simple 6-column layout. Now if you know you're only going to have 6 items, then there's really no problem. But if that number is dynamic (like the number of comments on a blog post), when we add some more items, each with varying amounts of text, things start to fall apart as you can see in our second example (I've included red outlines so you can see what's going on).

Simple solution

Well I've built it up to be something amazing, but it's really a very basic solution using PHP. So if our example was an output from WordPress, we declare the variable before the 'loop'.

<?php $postcounter = 0; ?>

And inside the loop (at the end) as the items are outputted, we add the following (disregard the comments):

<!-- LOOP BEGIN -->
<div class="column">Dynamic content</div>
<?php 
   $postcounter++;
   if ($postcounter % 6 == 0) {;
      echo '<div class="clearfix"></div>';
     }; 
?>
<!-- LOOP END -->

Basically the postcounter variable is keeping count of how many items are being outputted (like the 'count' variable does in Expression Engine). Then it's outputting a clearing div if the item is divisible by 6 (because we're using six columns in this eg). So on the 6th, 12th, 18th etc... items it will drop in a clearing div to start a new row.

Now our third and final example shows how things should have been. The rows will work regardless of the number and length of our dynamic items. There may be slicker ways of pulling this off, but this is how I'm achieving it on this site.

UPDATE 22/08/09
Expression Engine users can use the method below to achieve the same effect in a more elegant way. Thanks to Nick Kutateli's comment for the heads up.

<!-- LOOP BEGIN -->
<li class="{switch="newrow| | | "}">
Comment
</li>
<!-- LOOP END -->

And your CSS would be:

.newrow { clear:both; }

Flat Shadows

2009-05-10T04:54:42+00:00

Another super-simple shadow trick in Photoshop for looking down on objects.

So last week I wrote about shadows for upright objects and this week I'll be running very quickly through shadows for objects sitting flat. The article I wrote for Smashing Magazine on light and shadow had a few examples that some people wanted explained more fully. So here we are.

Those with 'skills to pay the bills' in Photoshop may want to sit this one out. But for those not sure how I did the shading in the coke can examples, here is the second installment showing really simple shadow tricks you can use in Photoshop.

Step 1.

Make a drop shadow

Create a drop shadow using layer styles. In my example I've put the distance to 6px and kept the size and spread at 0 — later on, if we want to make the shadow more dispersed, we can groom it with the blur tool.

Put the opacity up to full (this simply gives us more darkness to play with should we need it).

TIP: Make sure your object is properly cut out (ie: no white edges) or this effect is going to fail.

Step 2.

Create layer

Right-click on the shadow and choose 'Create Layer'. This will put the drop shadow on it's own layer and let us play around with it.

Step 3.

Motion Blur

In the top menu go to Filter > Blur > Motion Blur

You'll see you've got just two variables to play with — Angle and Distance. The Angle should be determined by where your light source is coming from that's casting the shadow. So in my example, the light's coming from the top left, so it's at an angle of 45°.

The Distance should be how long you want the shadow to be cast.

Step 4.

Groom

Using the Eraser tool, gently remove all the shadow that's been blurred on side where the light is coming from. In my example, all the shadow that's on the top left needs to go (but notice I've left the shadow being cast by the arm).

At this stage you can also drop down the opacity of the shadow layer so it's a little more subtle and realistic.

Step 5.

A touch of shading

Lastly, in the layers panel Ctrl-click / ⌘-click the layer thumbnail with your object (to select it). Now create a new layer and with a softish round black brush on 30-50% opacity add a little shading to the side of the object where the shadow falls.

I've hidden the object layer to better show the shading.

Finito

All done

Hopefully you can reproduce this effect without too much trouble. Just remember it's all about making gentle changes. Good luck with it.

Upright Shadows

2009-04-29T14:07:13+00:00

A nifty trick for shadows on upright objects that’s dead simple in Photoshop.

In the recent article I wrote for Smashing Magazine on light and shadow, a few people complained in the comments that as wonderful as the article was, there were no 'tricks' to be found. In my defense, the title was changed (made more sexy) after I sent it through.

So for people wanting to know how I did the shading in the coke can examples, here is the first of two posts I'm going to make showing simple shadow tricks you can use in Photoshop.

Step 1.

Make a drop shadow

Create a drop shadow using layer styles. Keep the distance at zero and don't make the size too big — I'm using 7px here (later on, making a shadow softer/blurrier is easier than making it sharper).

Put the opacity up to full (this simply gives us more darkness to play with should we need it).

TIP: Make sure your object is properly cut out (eg: no white edges) or this effect is going to fail.

Step 2.

Create layer

Right-click on the shadow and choose 'Create Layer'. This will put the drop shadow on it's own layer and let us play around with it.

Step 3.

Transform

Use Ctrl-T / ⌘-T to bring up the transform bounding box.

Now Ctrl-click / ⌘-click one of the transform points (I'm using the top middle point) on the box and start to skew your shadow whilst still holding down Ctrl / ⌘. Where you angle it is up to you and depends on the direction you want the light to appear to be coming from (in my example it's coming from the front left.

Once you're done you may need to nudge the shadow a little so that its end meets up with you object's end (in my example that would be the wedgehead's feet).

Step 4.

Groom

Using the blur tool, gently smooth out the end of the shadow furthest from the object to give it some dispersion. You can also use a semi-soft eraser, to gently groom the shadow until it looks right.

At this stage you can also drop down the opacity of the shadow layer just a tad if you want (I did).

Step 5.

A touch of shading

I've hidden the object layer to better show the shading.

Finito

All done

Hopefully you can reproduce this effect without too much trouble. Just remember it's all about making gentle changes. Good luck with it.

The real Jim Shady

2009-04-10T07:20:08+00:00

Lately I’ve been getting pretty used to having my designs ripped. Doesn’t mean I dislike it any less.

But looking back at my reaction to the very first rip back in November, today I'd probably just be glad they didn't take my images / portfolio work too.

If you're following me on Twitter, you'd probably be used to the weekly links I post of the latest copycat sites. After the fourth or fifth rip in as many weeks, I'd actually decided I'd stop polluting my twitter feed with all that negativity.

This week the plagiarism / ripping debate seemed to get a bit of airplay. Jon Engle had his sorry story of plagiarism picked up and supported then dissected and possibly disproven (you couldn't write this shit).

Around the same time I was alerted to a rip of this site that was on a whole other level to anything I'd ever seen. I'll spare you the details, and just say the guy had taken absolutely everything on my site and replaced every occurrence of my name or connection to me with his own (images included). You can read the highly amusing commentary on Reddit and Digg.

Copycats

Todd Picquelle's case was so bizarre and pathological that I found myself swept up like everyone else with the sheer audacity of it. I had to agree, this was funny stuff.

And while Reddit made really quick work of tearing poor Todd to pieces, the whole mob justice thing is really only extended to the very worst cases (probably a good thing). The rest, I've got to deal with on my own.

Dealing with rips

You'd think having a sister who's a lawyer at Google would help me get some insider knowledge on some secret way to fight these copycats.

These are the current avenues available:

Direct contact with the perpetrator via email / written letter (tactfully)
Direct contact with their employer, boss, clients, parents
Public shaming (which will probably result in a lot of hate mail from people)
Get the offending site removed from Google search results:
Google DMCA
Get the offending site removed altogether:
A General Guide to Taking Action Against Site Rippers using DMCA Law
How to submit a DMCA takedown notice
Take them to court

You can use Whois to find the domain registrar and then find the registry details of the offending domain.

One last thing: If you see a site that you think may be a rip, don't be afraid to email the original site and let them know. Believe me—you may be delivering bad news, but they'll really want to hear from you.

Who are these people!?

Design with a point of view

2009-04-05T05:02:41+00:00

I’ve been thinking more about Scott Stevenson’s great post debating Google’s approach to designing by data.

When you're talking about companies with a certain design philosophy it never takes long for a company like Apple to pop up in the conversation, which they did in the comments of his post.

But why is a company like Apple touted as being so great at design?

Giving it more thought I've boiled it down to one key thing. If you strip away the gloss and marketing, they design with a clear point of view.

Good design always has a point of view — a philosophy that drives it. If the point of view is hard to follow and adopt, the design may fail. But if it lacks one altogether it can only ever be satisfactory at best. Design without a point of view leaves it up to the user. This sounds like it should be the most sensible approach to design, but I'd argue that it is actually a cop out.

Apple products think they know best. A lot of the time, they very well might. This is the reason (in part) why they tend to polarise people. Whether you like them or hate them they do a great job of educating their users into adopting their point of view.

But if we consider the alternative — a product that offers limitless options, powerful settings, endless control, you're left with a product that's really only half-way there.

Good design doesn't just facilitate, it directs, leads and decides. It makes tough decisions that risk polarising people. When you try to please everyone, you end up pleasing no one.

What are your experiences of design with / without a point of view?

TweetDeck icons

2009-03-30T08:27:17+00:00

TweetDeck is a great application with a pretty average dock icon. This morning I decided I’d whip up an pair of alternatives.

There are two alternative icons included in the .ZIP file: one is for people who are over blue birds, and the other is for those who aren't...yet.

Installation

Changing the TweetDeck icon to one of the new dock icons is a sinch:

Download TweekDeck_icons.zip from the link below and extract
Find Tweetdeck in your User > Applications folder
Right/Command click and select 'Get Info'
Drag the new icon over the top left icon in the 'Get Info' panel and release
You should now see the new changed icon
You may need to remove the old TweetDeck from the dock (by simply dragging it out), and dragging in the updated TweetDeck app to the dock

If you have any troubles installing you can leave a message below or get in touch via Twitter.

Download TweetDeck Dock Icons ZIP 292KB

Get creative, you hack

2009-03-23T19:24:52+00:00

So you’re reading this thinking it may be slightly interesting. Maybe because the title seemed catchy, but not because this applies to you.

This is not the case. I’m here to tell you this DOES apply to you. I’m writing to YOU. That’s right, it may seem like this is for someone else, but I’m talking to you, John.

—For the percentage of people who’s name is John reading this, hopefully I freaked you out.

So how do I know you’re an uncreative hack? Because I’m one superiorly creative person who’s almost certainly more creative than you. I’m an original renaissance man. I paint, I’m a writer, I build things, design things, have recorded musical albums. Yet despite all these amazing feats of creativity, I myself, am in actuality, an uncreative hack. So if we follow this logic, it’s not difficult to arrive at the conclusion you are too.

But being so much more creatively endowed than yourself, I’m here to help. These are five surefire ways you will be able to become just slightly less of an annoyingly banal, inspirationally defunct being. Here they go.

1. Be inappropriate

When delivered in an appropriate setting, inappropriateness is a truly underrated quality. The world’s artists are the most inappropriate beings on the planet.

This may seem like an obtuse piece of advice for a creative void such as yourself, but inappropriateness may be harnessed in all sorts of ways. Consider using a really awkward colour when starting out with a page design. Be excessive with proportion and treatment.

2. Embrace randomness

The amount of ideas I’ve had from accidentally misreading something or misunderstanding something is staggering. You've probably misunderstood way more than I. Again, the idea of leaving things in the lap of the gods probably seems way to uncontrolled for your feeble right hemisphere, but stay with me.

Think of a number between 1 and 10. Go to flickr’s 7 days of interesting photos and click the reload button that many times with your eyes closed. Open your eyes and focus on the first image that captures your sad little imagination. This is your new muse. Take this and use everything that makes it interesting in your own designs. Which leads me to my next point.

3. Steal it from others

Now we're cooking with gas, I here you say. Do you have access to a child? If so, provide them with crayons and paper and art direct from a corner. Even though you may not arrive at any sort of tangible solution to whatever creative problem you’re facing, just watch how they work. Look at how they’re so focused on zoning out from your stupid directions. They possess infinitely more creativity than you. Learn from this.

4. Talk to yourself

This point is really a lead-in to the next point but I’ve found to be very effective. Give yourself a running commentary on what you’re doing as if you’re a sports commentator. The key here is to use a voice completely different to your own, be it pirate, someone with a severe lisp or a Canadian. If you work in a public setting at the very least you will find you’re held in slightly less contempt as the uncreative, boring person you truly are.

5. Expand your mind (yes, with drugs)

At this point we’re really getting desperate. Perhaps this is the last resort to try to alter the chemistry of your dull disposition even for a short period just so you can experience something that’s not wholly controlled by that fascist zealot currently at the reins. Maybe you think a suggestion like this is inappropriate. I refer you to point #1. If peyote is not your thing or you’re afraid of doing anything illegal, the very least you can do is make yourself a ridiculously strong cup of coffee before your next attempt at creativity and buzz yourself into something.

Well there you have it. I know these points have served me well in becoming someone who’s so much more creative that you, so I can vouch for their effectiveness. Hopefully you’ve gleaned some sort of wisdom or knowledge from these. Probably not. How very uncreative of you.

MacUser Magazine

2009-03-23T13:40:22+00:00

So I just found out Digitalmash has been featured in last month’s MacUser ‘10 of the best online portfolios’. Huzzah!

What's really funny is this thing went to print and I only found out about it after receiving a random email from some guy telling me he's just bought a copy. C'mon MacUser...we're in this thing together now.

So I got a copy sent over here (not available in Japan...who'd have thought?) to see what all the hubbub was about (big shout out to Joel in Scotland for hooking me up).

Now really....I'm super flattered but how can I take an article like this seriously. There are so many cool online portfolios out there that I would have included in that list. Of course, I'm not complaining — and it's always nice when your online creations find their way outside of the grey boxes you made them in.

Anyway, here are the other sites which were included (congratulations to all who were mentioned in this most definitive of lists):

Feb 2009 Vol 25 No 05

ExpressionEngine: Quick & dirty

2009-03-15T20:42:35+00:00

So as I recently mentioned, I’ve finally made the move from WordPress across to ExpressionEngine.

After being hacked last week, I set out with the ambitious aim to learn ExpressionEngine and move my site across over the course of a weekend. I’m proud to say for the most part, I got there (although really I ended up needing most of Monday and Tuesday as well to smooth out the kinks).

After going through the whole business, I’d like to share a few concepts and resources that may save you some time and give you a bit of a general primer in EE. EllisLab do a great job with their user guide and forum, but at the time I remember being frustrated by how many different sources I had to use to get all the info I needed. I went in pretty much clueless about what I was doing, but having a site already built in WordPress definitely made things quicker.

Introduction

Is EE for me?

Before we get started, I thought this was worth mentioning: just because it's the right solution of one person / website, really doesn't mean it's the right fit for another. If I were setting up a basic blog which would just contain entries and a sidebar, WordPress or some such would probably be my weapon of choice.

Makin' screwdrivers

ExpressionEngine's flexibility makes it great when you've got specific needs that go beyond a basic blog, but if you don't, keep in mind it may end up being more work for less actual gain. All I'm saying is download the core and check it out for yourself before you fork out the money for it.

For me, I just needed little more flexiblity. I think Brad Dillon explained the difference between EE and something like WordPress best.

"WP is like a philips-head screwdriver. A beautiful, incredibly well-constructed screwdriver, made of solid gold, and encrusted with diamonds. It has a nice rubber grip that never slips and allows you to maneuver easily. EE, on the other hand, being that it has one foot in the CMS realm, is a much more modest, yet more powerful tool, which can be used to make screwdrivers. Screwdrivers of any kind or fashion. Flat-head, philips-head, torx, even hex-socket screwdrivers. It's a screwdriver factory, and you're in control."

Brad Dillon
Developer and recent convert

Step 1

Planning

Thinking in chunks

The first key concept I had to fathom was simply thinking about my website in terms of its groups of repeating information rather than its pages. So for me, instead of thinking in terms of Work, Journal, Bio, etc I broke up the site in terms of its chunks of information. Here's what I ended up with:

Journal articles (the blog)
Work items (the portfolio section)
Testimonials (bottom of a few pages)
Link lists (bottom of a few pages)

Pretty basic huh? Well that's because my site isn't all that complex. Which makes it great as an example. These are the groups of information in my site that can be broken down into individual repeating items (by repeating I mean they have multiple items that follow the same format). It's really a good idea to use weblogs as much as you can. The more you do, the more you'll be getting your money's worth from EE and the more dynamic and flexible your site will become.

Web...log?

In ExpressionEngine (pre 2.0) these groupings of information are called 'weblogs'. Now this is a major source of confusion starting out, so if it helps you, think of them as 'sections' or 'channels'. A weblog isn't the whole blog in EE, it's just a grouping of information. Of course, there are other things on my site that don't fit into these 4 'weblogs', but they're 'one off' items like a contact form, for example, so we'll leave them out for the moment.

Break it down

So the next step is breaking it down a little further. Each 'weblog' (group of information) can be broken down again into individual parts. For example if we look at the journal articles on the right, you can see the parts that make up each of my journal articles. Of course, mine's a little convoluted given my layout, but hopefully you can get an idea of how modular you're making the data.

If you're familiar with blogging systems like WordPress, you'll be thinking in terms of Title, Body and Excerpt. But if we've got another group of information that doesn't just follow this standard style format (for example a group of testimonials), we would normally run into trouble. This is where ExpressionEngine starts to earn its keep as we're free to make up the format ourselves.

Custom fields

Each individual input within our weblog is a 'custom field'. In EE, as you can see on the right, we can name these fields, choose whether they'll be made up of a little text (like a name) or a lot (like a blog entry) or even if they'll be a file or select list. These fields you've created will come together to make a form by which you can input your data in an organised way.

If you're still with us at this stage, you've really done more than you think. Now to really cement these concepts, check out ExpressionEngine's video tutorial on weblogs and custom weblog fields.

All the custom fields for the journal articles weblog.

Step 2

Inputting & migrating data

If you've planned things well, this stage should be pretty easy. Really, you just have to manually fill out the forms you've custom made for each entry within each weblog.

Movin' it over

However, in my case, I already had a bunch of journal articles I'd published in WordPress, so I had to migrate this data across to keep all the associated comments and details of each entry. For this I used the WordPress to Moveable Type exporter plugin. This plugin (more accurately a theme) outputs your blog in a flat text format which you can use to import directly into ExpressionEngine.

What's really cool here is if you've already planned out how the information is going to be broken up, you can edit the outputted HTML file to fit this format. Remember that while you've got all your old WordPress blog data in one HTML file, you can Find & Replace all the information that needs changing before you import it into ExpressionEngine (like convert links and paths for example). I got rid of a lot of WP-related css styles, all the image caption DIVs as well as sorted out the body text into left and right columns.

When it came time to import the data, I was able to simply match up the custom fields with the label on each entry and presto! we're migrated. Another thing to remember - when labeling your HTML file data, use up the provided fields (Body, Extended Body, Excerpt etc) before using the EXTRA FIELD-1 etc. EE will love you for it. You can find all the info you need on using the migration tool here.

If you're moving from somewhere other than WordPress or Moveable Type, ExpressionEngine has directions on that too.

Step 3

Templates

So for a quick-and-dirty on how templates fit into all this, I'd recommend heading back to the ExpressionEngine video tutorials for an explanation.

At their simplest, templates are just the pages which make up your site. As their name suggests, they don't have to be just single pages, as they have the ability be 'reused' depending on what is happening in the URL.

Embed and embed some more

A template also can also be embedded in other templates (much like PHP includes), which allows you to break up your pages into sections. For my site, I created a template group called 'includes' which were all the things that repeated in each page (header, footer, navigation and google analytics code). I then created another template group called 'modules' (which is a bit of a confusing name) for things like my testimonials panel, linklists panel, case studies panel etc).

These smaller templates can be uses many times throughout the site in other various templates. What's cool is if I want to change the site description in my header, for example, I only have to alter the single 'includes/header' file and that change will be reflected throughout the site.

Another really handy thing to know about is the ability to pass variables on to the embed. This adds yet another level of flexibility.

Using templates to grab certain pieces of information from your weblogs is where the magic of EE happens. I'd reallly recommend following EE's video tutorial on combining weblogs with templates (hopefully the penny will drop here).

I found it also really useful to save my templates as flat files so that I could edit them directly in Coda (my editor of choice). Incidentally, if you use Coda or another IDE, there's also a cool little .htaccess trick to allow live previewing of templates from inside the app.

Note the 'save template as file' at the bottom.

Step 4

Putting it all together

Training wheels come off

I've been moving pretty slowly up until now, but at this point, you really just need to dive in and go for it. The next thing to do is get properly acquainted with ExpressionEngine's modules and tags. To start off, you probably only need to worry about the weblog, and maybe comment modules.

You should have your weblogs stocked with data and now it's just a case of learning how to output this data amongst your HTML via your templates. When you start out working with ExpressionEngine code, some of the examples you'll find may look intimidating at first. You'll be surprised at how simple the whole thing is, especially if you've had any prior experience with using conditional statements, or variables (which you'll probably be using quite a bit here).

Handy extensions

So there are quite a few extensions out there. Some are free and some are quite pricey. Here are a few that I've found to be pretty handy:

PLAYA extends the number of fields you can associate with each other from one-to-one to one-to-many.

LG LIVE LOOK adds Live Look link to your sites edit pages.

LG DATA MATRIX lets you add multiple rows of information in one custom field. Very handy.

PUB PAGE IMPROVEMENTS lets you customise the publish page (and others in EE).

On this site, I'm also using Askimet Check and Linklist Module. This is a lovely change from the 14 odd plugins I was running with WordPress.

Getting date formating right

However you like to format your dates, you probably want to check out the EE date formats

Cleaning up the URL

How to remove the 'index.php' from urls on ExpressionEngine
LG .htaccess generator extension (this extension really just employs the include list method mentioned on the EE site, but does it in an automated way. Great stuff.)
URL segment variables (really handy to know about these)

The header & footer

Veerle on dynamic headers
Leevi's LG Better Meta Extension

Navigation

Dynamic css highlighting with CSS

Final tips

Some extensions don't play nicely together

Just something to be aware of. If you notice you're suddenly getting a blank screen or an error after enabling a plugin, it may be the extension's fault, or perhaps a clash with another extension. The old disable-one-at-a-time method is probably the best way of finding the culprit.

Use more than 8MB memory in PHP

This isn't essential, but if you're getting a blank screen occasionally, this could be the cause (as it was for me). If this is a problem, you need to change to "memory_limit = 32M" in your php.ini, or add 'php_value memory_limit 32M' to your .htaccess file.

Use the Admin search function

You'll find yourself using the 'back' button a lot and getting lost in the many, similarly named admin option areas. The fact they offer a search field in the first place is a bit of a worry, but seeing it's there, save yourself some time and use it.

Add new tabs

If you find yourself going to the same pages within you EE admin, click the 'add tab' link to add that page as a top level tab so you can get to it directly.

Digitalmash Journal

Ignorance Avoidance

Dear Rob,

Dear Jonathan,

Getting Started

Basics

Positioning

Lists

Selectors

Image replacement/sprites

Dynamic Columns

The Problem

Making Columns

Simple solution

Flat Shadows

Step 1.

Make a drop shadow

Step 2.

Create layer

Step 3.

Motion Blur

Step 4.

Groom

Step 5.

A touch of shading

Finito

All done

Upright Shadows

Step 1.

Make a drop shadow

Step 2.

Create layer

Step 3.

Transform

Step 4.

Groom

Step 5.

A touch of shading

Finito

All done

The real Jim Shady

Copycats

Dealing with rips

Design with a point of view

TweetDeck icons

Installation

Get creative, you hack

1. Be inappropriate

2. Embrace randomness

3. Steal it from others

4. Talk to yourself

5. Expand your mind (yes, with drugs)

MacUser Magazine

ExpressionEngine: Quick & dirty

Introduction

Is EE for me?

Makin' screwdrivers

Step 1

Planning

Thinking in chunks

Web...log?

Break it down

Custom fields

Step 2

Inputting & migrating data

Movin' it over

Step 3

Templates

Embed and embed some more

Step 4

Putting it all together

Training wheels come off

Handy extensions

Getting date formating right

Cleaning up the URL

The header & footer

Navigation

Categories

Lastly

Final tips