Articles in Tutorials

Handy Shortcut - Email A Link With A Key Command

by Nate Croft in Tutorials

When you find a cool site and want to send it to someone, here is a handy key command to know:


This will open mail and put the title of the Page as the subject and the URL in the body of the message. It is very convenient.

You can also set it up to use Gmail or other mail service by setting it as your default account inside Mail.

Keep Reading

CSS Faux Browser Style on Your Images

by Jonathan Longnecker in Design, Tutorials

Faux Browser CSS

While working on the new 47m site we decided that we wanted our portfolio images to look like they were in a browser. Easy enough, right? But I didn't want to save out every image with some fake browser thing at the top. That would be a huge pain if we ever wanted to change the style in the future. CSS to the rescue!

Let's start with your markup:

<div class="faux-browser">
   <img src="/images/image.jpg" />

I've opted for a pretty simple browser design, but you could totally get crazy with url fields, back/forward buttons. That would probably require an image, though and I was trying to avoid that. To get the browser are at the top we need the containing div to use the :before CSS selector.

Then add some CSS:

Keep Reading

CSS3 Buttons with Icons

by Jonathan Longnecker in Design, Tutorials

css3 buttons

During the process of coding a web app we’ve been working on for a client, I decided that was time to go CSS3 with their buttons. After using the accessible CSS button technique for a while, it still felt really complicated and maintaining all those images was a pain if you had different sized buttons throughout your site.

So I started coding them up and realized that all the examples I had run across didn’t have icons! “That’s weird,” I thought. So I tried adding a background image and quickly understood why. In CSS3, the gradient background uses the background-image tag. So throwing an icon kills your gradient background.

Psst…If you’re really impatient you can see the demo here. Otherwise read on…

Keep Reading

Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine

by Jonathan Longnecker in Tutorials, ExpressionEngine

I still remember the day I found the ImageSizer plugin from Lumis. “Holy crap, I can upload any file and this thing will crop it and resize it on the fly in multiple places throughout my whole ExpressionEngine site?” To say I was psyched would be an understatement.

We often use ImageSizer in conjunction with the FF Matrix FieldFrame field type to let users add as many images as they want with captions. Then we pull at the first one and give a link to view the rest in a lightbox gallery. Works great! Until my clients started putting images in themselves.

Oh no! The lightbox is too big for the window.

Keep Reading

Creating a Tell-a-friend Pop-up Form with jQuery and ExpressionEngine

by Jonathan Longnecker in Design, Tutorials, ExpressionEngine

I recently had a reader ask about the pop-up contact forms and lightbox scripts we’ve used on some of our client sites - were they built into ExpressionEngine and how did we get them to work? Well the answer to the first question is generally no. EE lets you setup whatever js effects with whatever libraries you want. So can choose exactly how you use it. It really is a different way of thinking about putting together dynamic websites, especially if you’re used to most of the other CMS’s out there.

So for this example I’m going to show you how to create a “Tell a Friend” box that fades in and auto populates with the page you’re currently on. It’s a bit of HTML & CSS, a bit of jQuery, and a bit of ExpressionEngine. Ready to get started? Let’s go!

Keep Reading

Repeating Footer Background Image Scrolling Issue

by Jonathan Longnecker in Design, Tutorials

One of our astute readers discovered a flaw in our footer design implementations recently and I thought I’d share it with you. Turns out that we have a penchant for using a background image repeating on a 100% wide footer. Also turns out that when you squash your browser window down to anything smaller than the content and then scroll over to the right that background image stops repeating! See what I mean here:

footer problem

Keep Reading

Styling Right-To-Left Text with CSS on a Multi-Lingual Site

by Jonathan Longnecker in Design, Tutorials

We recently had the pleasure of working with CD Baby creator Derek Sivers on a new project called MusicThoughts. It’s a great collection of quotes from musicians on everything from the music industry to life in general. In short, pretty kick-awesome! Go check it out already!

This was a challenging project from start to finish. First of all, we couldn’t modify the HTML at all, only the CSS. And second was the support for multiple languages. 10 to be exact! This had several ramifications:

Keep Reading

IE7 Bottom Border Bug on Text Links

by Jonathan Longnecker in Design, Tutorials

text underlineI just found a simple solution to a bug in IE7 and wanted to share it. I hadn’t run into this problem before, but apparently IE7 doesn’t usually show a bottom-border attribute on text links. No reason, it just doesn’t feel like it. Insert rant about Internet Explorer here if you wish, but I’m just here to provide solutions, baby.

Keep Reading

sIFR 3 Hard Drop Shadows

by Jonathan Longnecker in Tutorials

I love sIFR, but man, their documentation is really difficult to figure out. There’s multiple synatxes you can use and all kinds of hidden variables they just expect you to know. I’m just saying for us who don’t live and breath Javascript, it could be a little easier right?

So I’ve been working on a site where I want to use the drop shadow as an effect to make the text look inset. Just a 1px white highlight on the bottom right. Problem is, the drop shadow filter in Flash defaults to a nice, smooth fade. Well, that’s not usually a problem, but it’s not what I wanted. For some reason I spent hours looking for this and finally ran across the syntax in case anyone else was wondering.

Faded drop shadow to sharp drop shadow

Here’s how. Just take the regular syntax in your sifr-config.js file:

Keep Reading

How We Use ExpressionEngine: Templates and Global Variables

by Jonathan Longnecker in Tutorials, ExpressionEngine

Template Area in EEContinuing in our series of how we use ExpressionEngine, I thought it would be cool to show you the power and flexibility of the templates in conjunction with global variables.

One of the main reasons we started using EE was it's flexibility. Other CMS's make you cram your design into their pre-defined templates and make you dig around in huge PHP files. Not so with EE! We code every site from scratch by hand, first creating a static version that we can test in multiple browsers. Then we chop it up into our own templates on our own terms inside EE.

Keep Reading

Top 10 Tips for Kick Awesome Web Application User Interface Design

by Jonathan Longnecker in Design, Tutorials

Top 10 Tips for Kick Awesome Web App User Interface Design

We’ve done our fair share of web app designs here, but often don’t get to share them for NDA reasons or the simple fact that the developers are still working on them somewhere! No worries, fair reader. For we shall approach these diplomatically as to protect the innocent. Behold, the top 10 list of yore!

1. Text Text Text

Web apps are huge, complicated beasts, even if you try to keep them simple. There are dashboards and login pages and edit profile pages and who knows what else. So do me a favor and keep everything text. Navigation, headers, everything. Because I guarantee you the developers are going to have to setup more pages once you’re done and they shouldn’t have to jump in photoshop to change your cool looking buttons (note, see this post about accessible, good looking buttons) or re-do the entire navigation.

Keep Reading

Making Accessible CSS Buttons Look Awesome

by Jonathan Longnecker in Design, Tutorials

css buttonButtons. They’re those little things that people really like to click and push. I personally think they’re pretty important to help guide a user through the actions they need to perform. But I’ll be the first to admit I’ve made my fair share of image buttons. Totally inaccessible; just an image with some alt text. Now depending on your site design and the type of site, that might be ok. For instance, if you’re dealing with a simple marketing site that’s kind of grungy; you’ll probably need to make that button look like it fits.

But there’s a problem if you’re dealing with a site or web application that will have 50 or 100+ buttons that all say different things. Now you’re looking at maintaining a ton of images and a lot of manual linking everywhere….not very ideal!

Keep Reading

Photoshop Tutorial - CBOO (What is that?!)

by Nate Croft in Design, Tutorials

You don’t know it yet, but you’re about to learn one of my favorite and most used Photoshop tricks. You’ve seen this everywhere but might not know it. It has, in some form or fashion, saved more lifeless photos than anything else. What is this awesomeness I speak of? I speak of the CBOO. But that’s Mr. CBOO to you.

No, I haven’t lost my mind. I just had to think of something to call “thing that I do.” CBOO stands for: Copy, Blur, Overlay, Opacity.

Here’s an example of a photo that could benefit from some CBOO:


Keep Reading

Testing a Rails Application in IE in Parallels and in Leopard

by Jonathan Longnecker in Tutorials

me being a champWe just wrapped up a kick-awesome web app design and I learned a ton of new stuff, so I’m going to be posting some new tutorials. Most of this can be found elsewhere, but it’s usually in multiple places so I’m trying to consolidate it for you. Aren’t I a champ (see awful picture)?

Yeah anyway, so since I was responsible for the integration of my HTML/CSS/Javascript into an already-in-progress Ruby on Rails application I knew I was going to have to test in multiple browsers outside of my static mock-ups.

Wait, I need to back up a sec. You’ll need to have rails installed and you’re going to have to use the terminal (scary, I know!). Usually what happens is you cd (change directory) in to the folder on your hard drive where the application lives. For me this would be something like:

Keep Reading

Syncing Your Sent Mail on Your Computer and iPhone

by Jonathan Longnecker in Tutorials, Apple

iPhone Sent MailI’ve had my e-mail synced up between my iPhone and Mac for a while now, but for some reason I could never get my sent mail to sync. I mus have missed the boat on this one because it’s actually not that hard, and I’ve found that Leopard makes it less panic-inducing (I’ll explain later).

So when I knew I was getting an iPhone around last November, I went ahead and changed my 47m mail to an IMAP account so it would signal read/unread e-mails on all my devices. Apparently living in the dark ages, I had pretty much just used POP mail before that, keeping regular backups of sent and received mail in manual folders. A lame system? Yes, but it worked for me and kept the mail server flowing freely. And so was my first stupid mistake: I just switched it and didn’t backup anything first. Since I had been using POP mail that pull the messages off the server and removes them after so many days, a bunch of my e-mails were gone! Whoohoo! Fortunately I got lucky; we were in the middle of switching hosts and the old host still had the mail servers active so I made an account tapping into their system and got the messages back.

Keep Reading
More Articles: ‹ First 1 2 > Last ›

Behold our Amazing Portfolio

Check it Out