Earlier this month I completed a redesign of a long-time client’s site that I first worked on in 2008. Because the client always has loads of great imagery (she’s an interior designer), we decided to incorporate full-screen backgrounds. I’m using the lightweight jQuery plugin Backstretch to handle the resizing.

I had some problems getting this working in WordPress, so I thought I’d post my process here. The main issue turned out to be that the version of backstretch.js I got from the demo site was not working; I have a correctly-functioning version here to download.

This little script makes images stretch to the full size of the browser window and resize as needed; it works fine down to IE7. I’d recommend an image width of no less than 1440px, this seems to work well.

Adding the Script

Add this to your theme’s functions.php, this registers and loads the backstretch.js script.

Then add this function, this one adds a backstretched image to individual pages which you can control. This one is placed in the footer to make sure it loads after jQuery.

I hope this helps someone else!

If you’re working on responsive websites, you may already be familiar with FitVids – a nice little jQuery plugin that allows for fluid-width video embedding. This morning I found there’s also a FitVids plugin for WordPress. Very easy to use, just install it, activate it, then go to Appearance > Fitvids.

FitVids settingsIf you’re not already using jQuery 1.7+ – and you should be fine if your WordPress install is 3.4 or above – tick the checkbox to add jQuery 1.7.2.

Then under jQuery Selector, enter the container element you want to apply FitVids to. It’s probably .post, but if you’re not sure .body always works. Then save changes and you’re done – FitVids should now be resizing videos as browser size changes.

Side Menu screenshotEarlier this week I built a little menu for a client using some CSS3 animation techniques – no Javascript. The client decided on Thursday she’d rather have the menu at the top, so… I liked mine quite a lot and turned it into a tutorial here so I reproduce it quickly when the need arises.

The menu was designed to work nicely with a full-screen background image. You can easily customize it to work with a variety of sites though.

The demo linked below shows the menu based on the one I made for my client.

View Demo

Basic Menu Setup

The parts that are highlighted are key, the rest is just a very simple menu structure.

In line 13 I’m using a semi-transparent white .png for the background of the menu items. In line 21, I move the a to the left 20px, the same distance I’ll be sliding the a’s to the right; this is so the left side of the menu item stays at the edge of the browser window when the menu item moves right, otherwise there’ll be a gap there.

Lines 27-31 control what gets animated when the user moves the mouse away from the menu item – what happens when the menu item slides back to the starting point (both the color and the translation movement) and how long it takes (0.4 seconds).

Hovers and Current Menu Item

Lines 4-6 control the distance moved (20px in the X direction, 0 in the Y) for hovered and active menu items. Likewise, lines 17-19 do the same for the current menu item.

The rest of the highlighted lines control what transitions when the user hovers or clicks a menu item. The current menu item is moved to the right (X) by 20px, but it doesn’t need a transition statement because no animation is needed.

A pretty simple example, but it works effectively and looks pretty nice. Enjoy!

I’ve been using ActiveCollab for years, but today I discovered something that might change that. Trello is free, and is super-easy to set up and customize for any kind of use. I signed up and created a board for a sample WordPress project in about 10 minutes.

Trello sample project

There is no built-in chat tool, but there is a ‘subscribe’ option for every task, or ‘cards’ in Trello speak. Subscribe notifies a member of the board whenever the chosen card gets updated.

Tasks or cards can be anything, and contain lots of info:

  • a color-coded label
  • a set of members assigned to the card
  • checklists
  • uploaded files and images
  • due dates

I like the simple interface – a board consists of a set of lists, each list has one or more cards (tasks) assigned to it. Cards and lists can be rearranged by dragging and dropping, and cards can be archived when the task is complete.

Here’s a sample board with a general web design process theme, and another that shows Trello’s own development flow

I’m going to try Trello for my next project; I think my clients will have an easier time with it than with ActiveCollab.

Oh – almost forgot. There are mobile apps for iPhone and Android too; the Android one looks pretty good. I don’t think you can upload files/images into a board on a mobile device, but that’s the only difference I see so far.

I finally came to my senses and decided to get something different, and get away from my years-old Dreamweaver+TopStyle Pro+WSFTP ‘workflow.’ I had no idea how much time I was losing…

So last weekend I installed Sublime Text 2. Getting the hang of the way themes and packages and preferences worked took a few hours, but it looked really good. I loved the wide variety of themes available. I really liked the ability to split the screen into multiple columns or rows, so I could view my HTML and CSS at the same time. This article provides a good overview of the things Sublime Text 2 does well.

Sublime Text 2 columns

I tried it out on a tiny HTML5 project I’m working on; this was on Monday. I found that it was pretty easy to convert a folder of the project files into a true Sublime project. I also found it pretty easy to set up SFTP so that every time I click CTRL-S to save, my changed files get uploaded. That was a big time-saver. However, it seemed like every few minutes I was having to change something or install a new package. A lot of features I was used to in Dreamweaver are not in Sublime Text 2, but you can get many similar ones in the form of packages. I got a little tired of this, so I set it aside for a bit and planned to come back to it later.

Today I blocked out a few hours of time and used Sublime Text 2 to hammer out a number of pages in that same project. I ran into a few hiccups, but for the most part, once I got going it became easier. I actually found my coding time today really fun – no more interruptions to go to a separate CSS editor or FTP program. It was fast, I’m getting the hang of the shortcuts and key bindings, and I’m starting to like it a lot. 

Sublime Text codeHere are the most important things I’ve found as I’ve been working with the program this week…

1) The themes are great.

Such a nice change… There’s a pretty large selection plus you can find others online, but I’d strongly recommend you get the Package Control plugin before trying to install any new ones.

2) Package Control is critical.

The Package Control plugin is essential for making finding, installing and removing addon packages (which you’ll be doing a lot when first setting up a custom coding environment) simple and fast. You can download and install packages from GitHub and other locations very easily without having to restart Sublime Text 2.

3) The minimap tool.

Although I don’t have it on all the time as it takes up space, it can be quite useful for a really large file.

4) Useful plugins so far…

  • Zen-coding – never used this before – what a time-saver!
  • Sublime Prefixr – runs CSS through Prefixr
  • SideBarEnhancements – lots of basic and not-so-basic changes to the default sidebar
  • Tag – collection of tab tool packages
  • SublimeLinter – Linter package for lots of languages
  • HTML5 – HTML5 elements
  • SFTP – very fast, easy to set up
  • SublimeCodeIntel – code autocompletes

5) An important workaround for color picking.

The color picker in Topstyle Pro is wonderful, it allows you to choose any color on the screen with an eyedropper. There are no default color pickers in Sublime Text 2, and only a couple of packages. The best is ColorPicker, but it has no eyedropper. So, I use it for changing the value of a color already entered; it works fine for that. For picking colors from the screen, I’m using ColorZilla in Chrome or Firefox. It’s a small tradeoff for the advantages I’m seeing with Sublime Text 2.