Hostetter Designs » Blog

Ruby for Newbies: The Tilt Gem

Andrew Burgess — Thu, 12 May 2011 18:34:21 +0000

Ruby is a one of the most popular languages used on the web. We’ve started a new Session here on Nettuts+ that will introduce you to Ruby, as well as the great frameworks and tools that go along with Ruby development. In this episode, we’ll be looking at Tilt, an all-inclusive wrapper gem for Ruby template engines.

Video Tutorial

Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Rendering Templates

If you’ve used a Ruby web framework—like Rails and Sinatra—you’re probably familiar with at least one of the many template engines available: I’m about about options like ERB or Haml. When using them in the context of a framework, it’s pretty simple … but sometimes they seem very embedded; what if you want to use them in your own project? Is there an easy way to harness their usefulness?

Enter the Tilt gem. Billed as a “thin interface over a bunch of different Ruby template engines,” you’ll find it makes rendering templates a breeze.

Of course, we’ll install it first.

gem install tilt

If you’re not using RVM (which you should be), you might have to run that with root privileges (sudo).

Of course, you’ll need to start with a template to render. We’ll keep it simple:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
</head>
<body>
    <h2>A few of the Tuts+ Sites</h2>
    <ul>
    <% sites.each do |name, link| %>
        <li><a href="<%= link %>"> <%= name %></a></li>
    <% end %>
    </ul>
</body>
</html>

Save this to tutsplus.erb. Notice that the title text will be inserted with Ruby, as well as the list of sites. Now, let’s render it. We’ll do it this way (save this in using_tilt.rb):

require 'tilt'

sites = {
    "Nettuts+" => "http://net.tutsplus.com",
    "Psdtuts+" => "http://psd.tutsplus.com",
    "Mobiletuts+" => "http://mobile.tutplus.com",
    "Audiotuts+"  => "http://audio.tutsplus.com" }

context = Object.new
def context.title
    "Tuts+ Sites"
end

template = Tilt::ERBTemplate.new("tutsplus.erb")

File.open "sites.html", "w" do |file|
    file.write template.render(context, sites: sites )
end

Of course, we start by requiring Tilt. Then, we create our data for the template: a simple hash, as well as a plain vanilla object. We give the object one property: title. Then, we create our template object. Here, we’re creating an instance of the Tilt::ERBTemplate class but the whole point of Tilt is that you can use whatever template engine you want: for example, you could use the Tilt::HamlTemplate, Tilt::SassTempalte (for CSS), Tilt::CoffeScriptTemplate (for CoffeeScript), or whatever supported template engine you want However, it’s important to note that Tilt is just a wrapper: you need to require the appropriate library for the template engine you want to use. So, if you want to use a Tilt::HamlTemplate instance, you need to require 'haml'. You can see what libraries are required for each template engine in the Readme.

Finally, we open the file we want to write the output to. The HTML (or CSS, or JavaScript, depending on the template and engine you’re using) will be returned from the render method of the template object. The render method takes two parameters. The first is a context object: all the properties of this object will be available as variable within the template. So, our context.title property will be available as just title within the template. If there are any other values you want to pass into the template, pass them as part of the second parameter, which is a hash.

So, we can run this script on the command line:

ruby using_tilt.rb

Now, look in the directory that you’ve been saving these files in: you should see a sites.html file. If you view it, you’ll find that the template has been rendered:

Yielding for More Power

You can do more complex things with Tilt if you pass a block to the render method.

Tilt::ERBTemplate('other.erb').render(context, other_params) {
    "some text"
}

Inside your template, you can yield to the block; whatever is returned from the block will be inserted at that point in the template.

While you can, of course, just pass a string via the block, as above, there’s a more interesting use case. Recently, I’ve been using this functionality in Tilt to embed a page-specific template inside a site-wide shell. For example, we can split our above template into two files:

layout.erb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
</head>
<body>
    <%= yield %>
</body>
</html>

sites.erb

<h2>A few of the Tuts+ Sites</h2>
<ul>
<% sites.each do |name, link| %>
    <li><a href="<%= link %>"> <%= name %></a></li>
<% end %>
</ul>

Now, to render our page, we can do this:

template = Tilt::ERBTemplate.new("layout.erb")

File.open "sites.html" do |file|
    file.write template.render(context) {
        Tilt::ERBTemplate.new("sites.erb").render(Object.new, sites: sites)
    }
end

Notice that since we didn’t have any object we wanted to use as the context object, we just passed a plain vanilla blank Ruby object. The HTML that is returned from the rendering of sites.erb will be inserted where the yield keyword is. If you run the above code, you should see the same output as before.

Using Other Options

You’ll notice that, up until now, we’ve had to choose the template engine we want to use when creating the Tilt subclass object. However, Tilt will recognise the file extension of the template you pass it, so you don’t have to explicitly choose an engine: it will pick the right one, based on the file extension:

t = Tilt.new "tutsplus.erb"

t.class # => Tilt::ERBTemplate

If, for some reason, your templates have a file extension that’s not what Tilt would expect, you can register that:

Tilt.register Tilt::ERBTemplate, "some_extension"

t = Tilt.new "my_template.some_extension"

t.class # => Tilt::ERBTemplate

Finding out More

There are a few more niche things that Tilt can do; if you’re interested in finding out more, I recommend you check out the documentation.

Build your Own JavaScript Library: Premium Series

Jeremy McPeak — Thu, 12 May 2011 17:35:05 +0000

Advertise here

Over the course of the past few years, the JavaScript community has exploded exponentially. It it’s safe to assume that libraries are the primary reason we’ve seen such astonishing growth. Thanks to these libraries, the differences between the popular browsers are minimized, making cross-browser development much easier than it used to be. We’ll build our own in this series!

Become a Premium member to read this kick-butt tutorial and screencast series, as well as hundreds of other advanced tutorials and screencasts.

Included in this Two-Part Series:

A full, in depth, written tutorial for each lesson.
For visual learners, the same tutorial, in video form – hosted by Jeremy McPeak
Each lesson’s source code

Join Net Premium

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, Phototuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers

Michael Tuck — Thu, 12 May 2011 12:39:56 +0000

According to Brandweek, “brands are the express checkout for people living their lives at ever increasing speed. This article shows you how, and why, to add “app”-like icons to your sites for several mobile and desktop browser displays, to clearly and elegantly identify your site with an icon that stands out from the crowd.

Logo Presentation And The Nine Basic Ballet Movements

When I was a lad growing up in rural America, we only got four channels on television, all local affiliates of the four national networks (yes, four; you’re forgetting PBS, which I only watched when they did dinosaur specials). The ABC and CBS stations came in fairly clear if you adjusted the “rabbit ears” antennae just right, and wrapped tinfoil on ’em.

Not too far off from what sat in our living room. (Photo credit: David E. Bowman, used by permission.)

NBC’s station came in over the new-fangled and somewhat unfathomable UHF channels — we had to actually twiddle a dial that looked like an old radio selector to tune it in. That channel was always static-laden, and required not only tinfoil on the rabbit ears, but sometimes needed my brother or me to stand next to the TV, carefully grab one of the rabbit ears, and, in my wife’s words years later, assume one of the nine basic ballet positions. (Her dad did the same thing to her, until he got angry at something President Johnson said and kicked out the picture tube. True story.) If we did the grand plié just right, the NBC channel would come in nice and clear, at least until Don Meredith dropped back for the touchdown pass and the signal would go out.

The television was also a black-and-white job.

So, given all of that static and lack of color, the lack of a screen display and the inability of anyone who lacked sniper-quality vision to discern what the number was on the little plastic channel dial from across the room, how were we to know what channel we were watching at a glance?

Short answer, we didn’t. Longer answer, we depended on the networks, or the local station, to tell us. That involved the use of a logo, on the networks’ choice of identifying themselves — part of their branding.

The 1960s version of the ABC Network logo. (Photo credit: Kris Trexler, used by permission.)

In those days of low, low-resolution black-and-white signals, we sometimes had to depend on the network logos to determine what station we were watching. I wasn’t old enough to see the logo ABC used in the 1950s (the letters stenciled in light gray on the side of a television camera, very unreadable), but I do remember the 1960s version: three smaller-case letters in RGB colors (they looked like different shades of gray to us) in a black circle. Easy to see and understand. ABC still uses a variant of this logo.

The 1960s version of the NBC Network logo. (Photo credit: Fanpop.)

NBC flaunted its embrace of color by pasting a color-bedazzled peacock on screen. It gave us a rather undistinctive text block at the bottom of the screen, and we couldn’t see the colors, so it didn’t convey quite as strongly (besides, no one wanted to watch NBC programs if it meant you got to stand by the antennae in allongé position for more than a few minutes). The peacock survives, in a much more stylized form, today.

The 1960s version of the CBS Network logo. (Photo credit: Solar Navigator.)

CBS used the “Eye of Horus” (they still use a version of it) flanked by three nicely serifed letters in a different RGB arrangement of colors — again, easily identifiable.

Self-Identification And Browser Speed Dials

This blast from the static-riddled past came to mind when I installed Opera 11.10 (code-named Barracuda in Opera’s best double-naught spy naming tradition) on my machine the other week. I didn’t install it the day, or the week, it came out, in part because I’m lazy and in part because I like to read up a bit on how the new browser iterations are doing before I throw my doors open and invite them in. I installed it today, or more accurately Opera got tired of me ignoring it and installed it itself, and I instantly noticed a change.

I use Opera’s Speed Dial facility for my home page, and two things were different. One, there were more (and smaller) icon docks, requiring me to fill up the screen with a few more bookmarked sites (can’t have spots unfilled, it’s asymmetrical and my OCD wouldn’t like it). Moreover, I noticed that some sites didn’t use the usual half-random screenshots to serve as their icons. Instead, some of them, like SitePoint and Google Images, seemed to now sport spiffy, iPad-like icons (minus the glossy overlay). Previous iterations of Opera merely gave screen capture “icons.”

A portion of my current desktop in Opera 11. The variances in the icon displays are obvious.

It was obvious how useful the little icons are. The chunky SitePoint blue/orange stylized “S” for example, is instantly discernible, as is the colorful Google Images “logo” (like CBS, they use a tastefully subdued serif font along with an array of bright Crayola colors). On the other hand, some sites not using the icons didn’t fare so well. Mine, for example. I got a nearly-random screenshot of my LinkedIn and Twitter contact icons, nearly useless for identifying anything. A Facebook page I visit regularly got turned into a blurry mush, as the program squished the entire page down into a barely discernible thumbnail shot. The screengrabs for Six Revisions and Smashing Magazine didn’t do so hot, either; without the text blocks on the bottom of those icons, I couldn’t easily tell what page it was (though Smashing’s logo is more discernible than Six Revisions’s). And who wants to rely on a text block to identify something?

So, with a few minutes’ Googling, I found out that the icons are completely controllable from the client end — in other words, just like the Apple iPad/iPod/iPhone icons that we can also use on our websites (Apple calls them Webpage Icons; Android’s mobile browser uses something similar), we can add an icon that will stand out on Opera users’ Speed Dial. I also found that if we prefer, we can use Speed Dial-specific CSS or content, and even add a soupçon of HTML 5 goodness.

In other words, we control the appearance. I don’t know about you, but in this day and age of not rationally being able to design sites that appear pixel-identical from browser to browser, I’ll take a bit of control over appearance and presentation any time I can get it. And, as we’ll see shortly, the effect isn’t limited to Opera’s desktop Speed Dial, but translates to many mobile displays as well.

And doesn’t it look like a mobile desktop display? More on that later.

(Not sure how to get Opera to display Speed Dial as the home page? Online How To gives a quick and easy walkthrough, though as the article notes, Opera 11 uses Speed Dial as its default for the home page selection. Here’s how to change Speed Dial icons on your, and only your, browser. And if you are new to the whole idea of Speed Dial, Opera’s given us a slick, short YouTube video to peruse.)

Chrome with Speed Dial extension, in a screenshot from December 2009. (Photo credit: Technobuzz.)

Firefox has a Speed Dial extension that I started using after I got spoiled by Opera’s own feature. Firefox also offers a similar extension called Fast Dial, but it seems to have some workability issues. Chrome also has an extension that gives its users a Speed Dial, and in a fashion somewhat similar to Opera, it allows for the use of site logos as dial icons, though without the customizability.

Internet Explorer 9 has its own built-in Speed Dial feature that is similar to Chrome’s, though it doesn’t seem particularly customizable (I don’t use IE9, so I can’t say with any authority). Mac users have a reason to preen, as Safari has done Speed Dial for years, perhaps as far back as 2003, though I understand it’s an online app and not necessarily a browser inclusion (I don’t use Macs, either, so someone here can correct me). PCMag’s Michael Muchmore claims Opera did the Speed Dial first, for what that’s worth.

Going Mobile: Stealing A March On The Future

The question of “why bother?” is valid. After all, Opera’s desktop browser has less than a 5% market share no matter whose numbers you accept, and I’m certain most users of other browsers don’t use their Speed Dial facilities. But that’s not the entire deal. Opera is well known as a cutting-edge browser whose best features often find their way into other, more popular browsers down the road. (A list of Opera innovations going back to 1994 is available on Opera’s Wiki, if you’re interested. Opera has introduced such features as screen zooming, user-defined CSS, mouse gestures, pop-up blocking, and voice navigation, and it’s had Speed Dial since version 9.20 in 2007.)

I’m not going to start trying to sell Opera to you, you use whatever browser you prefer, but if Opera’s doing it today, Firefox and Chrome and the rest will likely do it tomorrow. So making an Speed Dial icon for your site now might only delight the very small percentage of users who use that facility for now, but chances are that icon, or a variant thereof, will come in handy for another browser’s own take on Speed Dial in the near future. Opera’s desktop enhancements often move on to the Opera Mobile and Mini browsers, which at last take have well over 100 million users between them. That’s a significant user share. And, as we’ll see along the way, the same technique can be used for placing your logo on Apple’s mobile touch-screen devices.

Speed Dials are nothing new, certainly. But the ability to customize them, now for Opera and almost certainly for other browsers in the near future, is something fairly different.

Apple iPad desktop, in a screenshot from April 2010. (Photo credit: Pat Moorhead.)

It’s also becoming axiomatic that if you’re designing for the future (even if that future is next month), you’re designing for mobile. If you’re not designing for mobile, you’re not serving your clients. Author and UI expert Luke Wroblewski points out that the trend towards mobile is already large and growing by leaps and bounds, and cites the stats to back it up.

A research firm made a bold prediction in December 2009 that by some time in 2012, global shipments of smartphones would surpass global shipments of desktops, notebooks, and laptops combined. That happened in late 2010, almost two years early. The gap will continue to increase. Since 2008, home usage of PCs has declined 20%, and will continue to shrink, as consumers increasingly rely on their smartphones to surf the Web.

In 2011, worldwide PC shipments fell over 3% and will continue to fall; US shipments fell over 10%. Many buyers who would have purchased a PC are now buying tablets such as the iPad. 22-25% of American and British mobile Internet users don’t bother with a desktop computer at all for Internet surfing. By November 2010, the number of visitors to web-based email sites dropped by 6%, while at the same time the number of users accessing their email by their mobile devices grew 36%. And of the mobile devices out there, Smashing Magazine author Nick Francis tells us that half of the smartphones being sold today run on the iPhone OS, and half of the remainder run on the Android OS. The Apple iPad tablet is selling like crazy.

Besides making me feel old (how about you?), these stats tell me that if I’m designing for a client and ignoring their mobile needs — and particularly failing to focus on the need to address their users’ Apple devices — I’m not serving their interests. The client may not even know that you’re not giving them what they need, but it’s on the designer and developer to know that needs exists, not the client. We know that more and more of our clients’ users may still be using a desktop or notebook to access the Internet today, but tomorrow they’ll be using a smartphone, and if not tomorrow, then check back next week, because they’ll have made the switch. Moreover, they think of websites less and less as “sites” and more as “apps” (even though we know the terms aren’t interchangeable).

The techniques we’ll learn here apply right now to Opera Speed Dial for the PC and for the Apple touch screens. Tomorrow they’ll apply to more devices, probably the Opera Mobile and perhaps the Mini. And, I believe, other desktop/laptop (think “fixed” computers, though the term isn’t quite accurate) as well: I have a feeling that in a year’s time, or perhaps two, a lot of browsers’ home-page displays will employ some version of a mobile-like Speed Dial facility. Let’s steal a march on the future (and on our competitors) and see how it works.

Step One: How To Customize Your Site For Opera’s Speed Dial

[Y]ou can offer [an icon] that can be displayed on the [Apple touch screen] devices’ Home screen using the web clip feature. — Alexander Dawson, Six Revisions

The new [Opera] implementation also allows site developers to choose what appears in users’ Speed Dial entries for their sites. — Michael Muchmore, PC Magazine

Dev Opera’s Tiffany Brown wrote a quick and well-detailed how-to guide for whipping out an Opera Speed Dial icon for your browser, or for customizing your dial icon via CSS or other content. Brown verifies that if you don’t do anything special, Opera’s Speed Dial will just use the usual screen capture, and we already know how poorly that can turn out for you.

Unsurprisingly, the process started with the idea of the “favicon,” or the bookmark icon. We’ve been incorporating those as far back as 1999, when Microsoft bowled us all over with their inclusion in IE 5. They aren’t part of the HTML 4 specifications, but that didn’t stop many people, and browser vendors not named Microsoft didn’t wait long to add support for icon as a value for the rel attribute of the link element. Apple built on the idea of the favicon for its touch-device icons through the apple-touch-icon value. And HTML 5 has added icon as a valid and standardized value for the rel attribute, unless they change it next Tuesday.

(Note: Opera will not pick up a favicon for Speed Dial bookmarks. If it doesn’t find some kind of icon dedicated to the purpose — Opera doesn’t require the Opera-specific coding, but it does require link rel coding specifically for an icon. It won’t default to displaying the favicon, but instead will give users a screen capture as an “icon.”)

The Basic Icon Code

It doesn’t take a lot of time or effort to code a new icon for yourself. Brown gives us the dirt-simple code needed for the head of your document:


   Spiffy page with Opera Speed Dial icon

It doesn’t get much easier than that (you can even leave out the type="image/png", as the PNG MIME type is assumed). You can see the rel difference from the Apple-specific code used for the Apple touch icons:

The icons themselves are a bit different from the Apple-dedicated icons, and may require you to take a run through Photoshop, GIMP, or your graphics editor of choice. The specs are simple. The minimum size is 114px by 114px (smaller ones, such as the Apple-sized 57×57 PNG icons, will be ignored, though Apple devices will use almost any reasonably sized icon, scale it down to 57×57, and add its own rounded corners — more on this in a bit) and the maximum is 256px in width by 160px in height. (Display sizes can be changed in the opera:config menu from your browser, but that only works for you and not the Opera user in Katmandu.) The file must be in either PNG, JPG, or GIF format — no SVGs.

(Web developer Mathias Bynens chided Apple for not “implement[ing] the standard and [coming] up with a more verbose proprietary link relation instead.” I have to agree.)

Using Multiple Icons

If you use an animated image, only the first frame will be used, so don’t bother. But, you can use multiple icons. What’s the difference? It will let you give users one icon to bookmark a page and a second for their Speed Dial. You’ll have to decide whether this is a nice plus or a source of potential confusion — we usually like some degree of uniformity among our logo presentations, for identification purposes.

If you want to go down that road, it’s not much harder than the first one. Here’s how:


   Spiffy page with Opera Speed Dial icon

The larger one will be chosen by Speed Dial as its icon, regardless of whether it comes first or second in the list. If both icons are the same size, Speed Dial will use the first and the second one will become the favicon.

So far it’s been easy. The next part is, well, easy too, but allows for a good bit more customization if you choose to implement it.

Using view-mode: minimized

Opera’s view-mode media feature lets you specify styles by viewing mode. If you use view-mode: minimized, you can do more than just provide a bigger, splashier favicon for your visitors’ Speed Dial. View-mode works like other media features such as device-width. You probably already knew the media query needs to be within an @media block. Here’s the code:

@media screen and (view-mode: minimized) {
   body {
      color: #fff;
      background: #b20000;
   }
}

This still has Opera use a screengrab as its “icon,” but it customizes the appearance: in this case, changing the font and background colors.

If you’d rather, you can link to an external style sheet (we’ll debate the pros and cons of that method some other time), and set the value of the media attribute to (view-mode: minimized):

If you use (view-mode: minimized), you’ll trigger a Speed Dial viewport that is 256 pixels wide by 160 pixels high. That may not be an issue for you, but it’s something to know.

What you definitely need to know is that if you use view-mode: minimized CSS, Speed Dial will use that as its first priority, over a more generically provided icon.

Other Possibilities

Brown gives examples of several other facilities: serving a different URL via an HTTP request, cycling through a number of pre-selected icons using auto-reload, using mod_rewrite to redirect Speed Dial requests, and using a server-side language such as PHP to serve different content at the same URL. If you find these interesting, I’ll leave you to review her article if you want to explore those aspects of Speed Dial.

Extras

The visual users among us might appreciate the YouTube walkthrough Opera gives us. Opera Mobile, very popular on Android and Symbian devices, also uses Speed Dial, as does Opera Mini, though neither Mobile nor Mini versions allow for client-side customization just yet. (Firefox and Chrome’s mobile versions have their own versions of Speed Dial, as does the Dolphin mobile browser.) If you’re up for taking a brief stroll into the weeds, the Dev Opera forum has a discussion on Brown’s article. And Opera’s planning on adding extensions to the Speed Dial in the new desktop release.

Gallery of Websites’ “App” Icons

An older Opera Speel Dial screenshot from early 2011. (Photo credit: Martin Brinkmann and Ghacks.net, used by permission.)

You saw how my computer looks with the new Speed Dial activated. For comparison purposes, this is how the Opera Speed Dial looked before Opera 11 on a desktop monitor without the use of the spiffy new customized icons. Not bad, but you can see how some of the screen captures don’t stand out very well. Even when I zoom the graphic, I can’t tell what sites all the screengrabs represent. The point? Many websites’ “app icons” still look the same in the upgraded Speed Dial. But, they don’t have to.

Opera Mobile screenshot from early 2011. Photo credit: Dev.Opera, used under Creative Commons license.

For comparison purposes, here’s what the Speed Dial looks like on an Opera Mobile browser. Obviously, all of the “icons” are screen grabs. I expect Opera will upgrade its Mobile Speed Dial facility to be customizable in the near future.

Let’s find some icons on the spiffy new Speed Dial and see how they look individually. Here’s a group of them from my desktop:

Four not-so-randomly selected Speed Dial icons from my desktop, circa April 2011.

I just chose four that represent the idea of the customizable icon or the well-selected screenshot: Google Images, SitePoint, Yahoo Mail, and Media Matters. SitePoint uses the apple-touch-icon value in its coding, and the others either use more generic coding or just let the browser do its screengrab without any intervention. (The blue border around some of the icons is triggered by mouse hover, and comes from me being a bit sloppy as I selected the icons for screenshotting. I left the borders on some of the shots because I rationalized that we need to see what the icons look like both with and without borders, but mostly because I was too lazy to redo them.)

The visual benefits are apparent. Google Images and Yahoo use their colorful text as their brand identity. The Media Matters logo displays clearly, though it’s apparent that the “icon” is a nicely, and serendipitously, selected chunk of the top left quadrant of their display (you can see the slice of navigation bar in the icon, though I don’t think that detracts from the strong visual impact of the brand presentation). SitePoint, with the usage of their Apple icon displaying on the Speed Dial screen, probably makes the strongest impact. Very clean and strong, and instantly recognizable.

Opera.com’s Speed Dial icon.

Here’s a shortcut to Opera’s own Speed Dial icon. Not surprisingly, they go with their big “O” logo, though I do miss the (apparently outdated) slanting shadow behind the letter. As with all the Speed Dial icons, the text is grabbed from the title of the page, explaining why it displays as “Opera brows …” We can, of course, control that with our own sites if we want to truncate or manipulate our titles to give a short, snappy text display, and users can configure their text to say whatever they want for the icon.

Apple.com’s Speed Dial icon.

This is a shot of Apple.com’s Speed Dial icon. Who expected this? I was expecting some version of the “apple” logo. It stands out nicely from the pack, and the title, the single word “Apple,” is effective, though I’m not sure the photo of the iPad does the trick for identification purposes.

Apple’s iPhone and iPad Speed Dial icons.

Surprisingly, neither Apple’s iPhone website nor its iPad site use a dedicated icon and don’t use the apple-touch-icon coding. The screen capture for the iPhone site is fairly striking; for the iPad, perhaps less so. Perhaps Apple doesn’t expect mobile users to visit these sites?

Microsoft.com’s Speed Dial icon.

Here’s the Microsoft Speed Dial icon. Or the screengrab that Opera uses for the icon. Obviously Microsoft isn’t trying to comply with Opera’s requirements, or Apple’s for that matter. Like almost everyone’s “icon” out there, it’s a screen capture from the top left of Microsoft’s home page. It’s serviceable, and that’s about all it has going for it.

Speed Dial icons from WordPress.com and Facebook pages.

Here are screencaptured “icons” from a WordPress blog and a Facebook page that I work with. You can see just how unsatisfactorily these serve the purpose of branding icons. They’re just two screenshots of incredibly compressed content. Even the identifying text blocks don’t help much.

Speed Dial icons from Six Revisions and Smashing Magazine.

These are the screencaptured “icons” from my bookmarks for Six Revisions and Smashing Magazine (showing then-current front page content). Although they’re not as bad as the two examples above, and Smashing’s logo is clearly visible, they’re not particularly pleasing. Six Revisions looks like a WordPress site, because the day I made the bookmark, the site was featuring an article about fine-tuning WordPress for SEO purposes. And Smashing’s article about achieving pixel perfection in Photoshop has long since gone off the front page, though a slice of the title remains in my icon. These icons don’t show fresh content, and don’t do justice to the sites they represent

NBC.com’s Speed Dial icon.

And ending where we started … While the other two major television networks just let Opera do a screengrab for their “icons,” NBC gives us the 21st-century version of the venerable peacock. They code a more widely applicable JPG to serve the purpose.

Step Two: Apple Plus Opera Equals a Sea Change In Browsing

An early version of a homemade “app” home page. (Photo credit: Geniosity, used by permission.)

The idea of a home page as a collection of “apps,” or more accurately links to a variety of user-selected websites, was not introduced with either Safari’s or Opera’s first Speed Dial. Computer maven John Dvorak has had a version of his “personal portal home page” available since 1999; all of his iterations use text links only, no icons, for faster loading time. More recently, a developer who blogs at Geniosity wrote about his own handcrafted, text-link driven home page he created for his copy of Firefox (image at left). The author tells me he still uses a version of this for his home page.There are other examples out there for the Googling.

I think the idea, lurking as it has on the edges of browser conventions for over a decade, is about to step to the forefront. If it does, it will be because mobile users want their desktop, laptop, and notebook browser displays to function in the same way as their mobile desktops — as a collection of personally selected, icon-based links to sites they use on a regular basis. This will be one of the first instances of mobile browsing conventions effecting a major change in “fixed” computer browsing.

I firmly believe (without any hard evidence, it must be noted) that sometime in the near future, desktop/laptop users will want to move to a Speed Dial-like browser interface that replicates what they have on their mobile devices. I see it as a sea change in browsing: instead of desktop/laptop browsers driving what mobile browsers are able to do, the reverse is going to happen. Instead of the traditional desktop “home page,” users will want a multi-app interface like they use on their phones and tablets.

If this does happen, then designers/developers who get ahead of the curve will be prepared when the changes come down the pike. We’ll already have our sites, and our clients’ sites, ready to display well in the near-future “desktop app interface” browser facility. (And if it doesn’t happen, we’ll have spent a very small amount of time on the preparation, with no harm to our sites. There really is no downside to this, as you can outfit a website for this new function in less time than it takes the local teenager to deliver you a pizza.)

So, if I have no hard evidence to show you, how can I convince you? Maybe I can’t. I may well be wrong. But I don’t think so. Years ago, science-fiction writer Robert Heinlein wrote, “It steamboats when it’s steamboat time.” (The historical reference is simple: while inventor Robert Fulton is credited with “inventing” the steamboat, there were a dozen guys on three continents working simultaneously on one variant of the steamboat or the other. Same thing with the telephone; while you and I learned that Alexander Graham Bell “invented” the contraption, there were a lot of guys working on one aspect or the other of voice-driven communication over a wire. It was the proper time in Western society’s technological development for steamboats and telephones; the need was there, and the devices’ creation and dissemination were inevitable.)

The wave of the future is mobile computing, and one of the most fundamental aspects of mobile computing is the app-laden desktop. The idea of opening a browser to a single home page is rapidly becoming obsolete, I feel. I started using Speed Dial on my browsers (all of them except IE) over a year ago, and I wouldn’t go back for a plateful of Grandma’s brownies. The usefulness and convenience of having (in the case of my Opera “home page”) 25 “apps” on my desktop as soon as I open my browser precludes me ever going back to a single home page again.

Still not convinced? Okay, open your desktop browser and stare at whatever home page you’ve chosen. Now flip open your mobile device and look at the array of apps and websites ready to be accessed. Which one gives you more options? Which one feels more modern? More useful? (There are certainly exceptions, particularly companies which require the employee to have the browser set to the company’s or department’s home page, other organizations such as libraries and community centers which have their home pages hard-set, and users who spend so much of their time working on a single site that for them, it wouldn’t make sense to have a “home page” full of icons to different sites when they will always go to the same site first.)

The Future Is Now

[I]n the coming years, more and more websites will have mobile incarnations that look a lot like applications. [P]eople won’t even realize that in the end, the next generation mobile web won.
— Kim Pimmel, Smashing Magazine

For now, the best way I see to prepare for this predicted oncoming mobile transformation is to combine the requirements of Apple’s touch-screen devices and Opera’s Speed Dial. Apple requires a PNG file of at least 57×57 for conversion to a touch-screen icon. Opera requires an icon at least 114×114. And Opera will recognize Apple’s touch-screen HTML code. I’d say create a PNG icon of 114×114 or larger, not forgetting Opera’s maximum size requirement of 256×160, and use the apple-touch-icon coding:


   Spiffy page with icon for Apple and Opera

Another viable option is to use two strings of code:


   Spiffy page with icons for Apple and Opera

to ensure full inclusion and forwards compatibility, especially if, as I suspect, Chrome or Firefox will incorporate client-side customization to their own Speed Dial (or dial extensions) in the near future. By doing it this way, you can design separate icons for the touch devices and the browser(s) that take advantage of each one’s individual characteristics.

The 114×114 icon will be scaled down for different devices. The guys at DevDaily remind us that the iPhone 4 uses the 114×114 icon, whereas older iPhones will scale the icons down to 57×57. An iPad (v1) will scale it down to 72×72. The same 114×114 icon will work perfectly nicely on all these devices. (Bynens gives some instructions on forcing Apple’s iOS4.2 to use multiple icons for different device resolutions, if you’re interested.)

Here’s the proof in that particular pot of pudding: a before-and-after pairing of my site’s icon in Opera’s Speed Dial. For the second go-round, I used the apple-touch-icon coding so that the icon will appear on Apple’s touch-screen devices as well as in Opera’s Speed Dial.

Comparison of my site’s old and new Speed Dial icons.

The difference is marked. The first icon presents little more than icon gibberish; since I use text and not a graphic as an

site heading in my site, Opera used some of the first graphics it came across (the three icon buttons) and went from there, providing a screen capture that does nothing whatsoever to identify my site as anything of consequence. It took me maybe ten minutes to whip out the new icon in Photoshop, write and insert the code line, and upload it. And that was with the assistance of tabby cats!

You guys could do it in less, I’m sure. I’m not entirely happy with it; it’s smaller than the bookmark canvas, the corners arent’t rounded, and where the icon canvas is rectangular, the icon itself is square (if the background were white, it wouldn’t matter as much). But whereas the first icon is almost entirely meaningless, the second one conveys.

Side note: There are tutorials out there advising us to create icons for Apple devices in Photoshop that include the rounded edges, drop shadows, and “gel” overlays. Don’t do it. Keep the icon edges sharp and don’t include the glossy overlays. Apple devices add those effects automatically. The icon I created will have the rounded edges, drop shadow, and glossy appearance on Apple devices. If you want to force Apple to use your own icon without modification, you can use this code:

allowing you to add your own effects as you desire.

Bynens writes: “I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.” He also notes that iOS1 and Blackberry’s OS6 do not support precomposed icons. He gives a somewhat more broad-based, cover-all-your-mobile-bases code snippet, which I’ll pass along:

Opera 11.10 supports precomposed icons as well as the Apple Touch icons.

Conclusion

Right now this works on Apple’s touch-screen devices and on Opera’s desktop browser. It’s my educated guess that within a matter of months, it will work on Opera’s Mobile browser and at a later time on the Mini as well. It wouldn’t surprise me if, by this time next year, the code string works on new Speed Dial facilities in Webkit and/or Gecko desktop and mobile browsers (be they actual browser inclusions or extensions). We might even see something of the sort in new IE versions; it’s never smart to count Redmond out. So: take a few minutes, steal a march on the competition, and add the feature to your sites right now. You and your clients will be glad you did.

There is a better way to do it. Find it. — Thomas A. Edison, who telephoned when it was telephone time.

Design a forest inspired Tumblr theme in Photoshop

Walter — Thu, 12 May 2011 11:30:13 +0000

Advertise here with BSA

Tumblr is a micro-blogging platform that allows users to easily publish snippets of information to the web, such as a photo or photo set, a video, a quote or just a paragraph.

It is often used as an online diary because of to its ease of use compared to other blogging platforms such as WordPress.

A lot of Tumblr themes are out there, both free and premium, but have you ever wondered how you’d go about designing your own?

In this tutorial, you’ll learn how to create a forest-inspired Tumblr theme, making use of wood textures, subtle patterns and modern techniques—a nice blend of natural and modern elements.

What we’re going to design

The theme we’ll be designing in Photoshop consists of four areas: wooden sidebar, main content area, right sidebar and header.

Step 1

The first step, as should be with all things you design, is the sketching stage. Using my Wacom Bamboo graphics tablet and a blank canvas in Photoshop, I sketched the following design, with some larger elements, just to get my ideas down on (digital) paper.

Step 2

With the idea roughed out, create a new document in Photoshop. (Keep in mind, this isn’t set in stone. It’s just something you can refer back to if you get stuck in the design. Personally, I tend to experiment and change a lot of what I initially planned.) I used the following settings in Photoshop:

Step 3

The next stage is to put some guides down on the canvas. This will help you keep the structure of the theme neat as you design it. I want the left sidebar to be 200 pixels, the main content area to be 600 pixels and the right sidebar to be 160 pixels, giving us a width of 960 pixels.

If you’ve used the same settings, you can place your guides at 200, 800 and 960 pixels horizontally. This design will be aligned left, so that the wooden sidebar always sits against the left side of the user’s viewport.

I also placed guides 200 pixels below the top of the canvas and 200 pixels above the bottom of the canvas. This is how my document currently looks:

Step 4

Let’s now add some pattern to our background. Go to File → New, and create a new document that’s 8 × 8 pixels. Draw some vertical lines with a width of 2 pixels. Your canvas should now be 2 pixels black, 2 pixels white, 2 pixels black, 2 pixels white. Go to Edit → Define Pattern. Save your pattern as “Vertical Lines 2px.”

In your original document, go to Layer → New Fill Layer → Pattern. Select the pattern you just created, and click OK. Drop the opacity of the layer until it looks something like this:

Merge the pattern with your background layer, automatically rasterizing it in the process. Go to Filter → Noise → Add Noise. Change the value to 5% and click OK. This will add some subtle texture to the background:

Create a new layer, and fill it with white. Position it beneath the original background layer. Lower the opacity of your textured layer pattern to around 40%, and then merge it with the background layer by going to Layer → Merge Layers.

Step 5

Select the Rectangle tool, and draw a shape that’s 200 pixels wide.

We’re going to slice off the bottom of our shape using the Polygonal Lasso tool, making it look like a ribbon. Create a selection over your shape, rasterize the shape layer, and then hit the Delete key to remove the selected area.

Place the shape in the left sidebar area that we marked using our guides.

Create a selection of the top portion of the shape, and go to Edit → Free Transform. Stretch the shape so that it overlaps with the top line of the canvas.

Step 6

Select the Ellipse Shape tool and, while holding the Shift key to keep it round, draw a circle, filled with white. Position it at the top of the sidebar, and rename the layer to “Portrait.”

Right-click on the new shape layer, and select the “Rasterize layer” option to turn it from a smart object into pixels. Hold down the Command key, and click on the layer’s preview image in the Layers panel. This will make a selection of your circle.

Locate a picture of yourself (or whatever your website is about) and copy it. Head back into Photoshop and, with the circle selection still active, go to Edit → Paste Into. This will paste the object in your circle selection.

Having done this, you have automatically created a layer mask on the image (i.e. on a new layer, not the existing circle layer). Go to Edit → Free Transform to resize and/or rotate the image. It will remain a circle; just be sure not to make it too small. Once that’s done, delete the layer named “Portrait,” and rename your new layer.

Step 7

Select the Type tool, and create a text box in the header area. I’ve given my theme a completely random name: “Kabooom.” I used a font called Reklame Script. You can download a demo of the font or purchase it for $30 from MyFonts.

Right-click on your type layer, and select “Blending Options.” Apply a color overlay to the text. I used a light gray that’s a little darker than the background, with the hex code #D6D6D6.

Apply an inner shadow to the type, using an opacity of 10%, a distance of 2 pixels and a size of 1 pixel. Leave everything else at 0. This will make the type look like it was engraved in the background.

To complete the engraved effect, we’ll add a drop shadow to the type, using the color white with a normal blending mode. Give the shadow a distance of 2 pixels and a size of 1 pixel. These settings will make the shadow appear as a highlight at the bottom of the type, adding more depth to the type and reinforcing the inner shadow.

Step 8

Reselect the Type tool, and create a text box that fills the width of the right sidebar, which we have marked with guides. Put a variety of categories under the category heading, as seen below:

Select the category heading, and change the typeface to one of your choice. I used Minion Pro. Experiment with sub-fonts (bold, italic, etc.) and point sizes.

Change the font for the categories (“News,” “Days out,” “Photography,” etc.) I used Myriad Pro. Lower the point size of the type, and adjust the leading (i.e. the space between the lines of text), so that the top line sits lower than where it is by default.

Copy the first heading and the links and paste them below in the same text box. Change the heading and categories. I used the headings “My Projects” and “My Friends.” Use whatever is relevant to your website, of course.

Step 9

We’re now going to make the text in the right sidebar a little more appealing. Select the text for sub-categories (i.e. not the headings), and change the color from black to a dark gray. I used #333333. Click OK.

Right-click on the type layer, and select “Blending options.” Apply a white drop shadow with a normal blending mode. Change the angle to 120° and the distance and size to 1 pixel. Leave everything else set to 0 pixels. This will add a highlight to the bottom of the text, just like we did with the heading.

Step 10

Select the Line tool and, while holding the Shift key to keep it straight, draw a line beneath the “Categories” heading.

Right-click on the line layer, and select “Blending options.” Apply a white drop shadow with a normal blending mode. Set the angle to 90° and the distance to 1 pixel. Set everything else to 0 pixels.

Duplicate the line layer, and position it below each of the headings.

Step 11

If you have the same number of headings as me, then you should have three line layers. Select them all, and duplicate them. With the three line layers still selected, nudge them down 10 pixels by holding the Shift key and pressing the Down key once. Lower the opacity of your newer line layers to 25% to end up with something like this:

Step 12

Grab the Rectangle Shape tool, and draw a rectangle similar to what’s below. Make the rectangle exactly 570 pixels wide. This will allow for a 10-pixel gap between the left sidebar and the edge of the new rectangle and a 20-pixel gap between the right sidebar and the edge of the new rectangle, as seen in the annotated screenshot below:

Step 13

Reselect the Rectangle Shape tool and create a much smaller gray rectangle, like the one below. Position it in the top-right of the large rectangle, offset from the large rectangle by 10 pixels. Position the shape 30 pixels away from the top of the rectangle.

Step 14

Duplicate the type layer in the right sidebar and, using the Shift key and Cursor key combination, nudge the duplicated type layer over the main content area. Do the same with the two line layers for your “Categories” heading.

Select the Type tool, and click on your duplicated type layer. Remove all of the text in the box, and change the heading to something more suitable. I just used some dummy text here: “This right here is called a title.”

Step 15

Go to File → Place, and locate a photograph to place in the document as a placeholder. Using real images here is always best because they make the mock-up seem more real and attractive. I used a photo of my sister.

Go to Edit → Free Transform to reduce the size of the photo and position it in the right spot. Make it a total of 20 pixels shorter in both width and height so that it fits nicely in the black rectangle, like so:

Step 16

Open up the Blending options for the large black rectangle. Apply a white color overlay and a drop shadow with an opacity of 10% and a size of 3 pixels.

Step 17

Select the Rectangle Shape tool once again, and draw a long shape below the white photo background shape. Make sure it is the same width. Fill it with a light gray.

Open the Blending options for the new gray rectangle, and apply a drop shadow. Set the color to white, with a normal blending mode, the opacity to 100% and the distance to 1 pixel. Leave everything else set to 0 pixels.

Also, apply an inner shadow, using the color black, with an opacity of 10%. Change the size to 13 pixels, and leave everything else set to 0 pixels. These two layer styles will make the new shape look like it was etched in the background, like our heading typography:

Step 18

Moving on to the sidebar, download some repeating wood textures. I’m using a set from GraphicRiver that includes three different wood textures: light, medium and dark.

Once you’ve installed the patterns in Photoshop (by opening each image and defining it as a pattern), select the sidebar in your Photoshop document. Go to Layer → New Fill Layer → Pattern. Select one of your wood textures (I selected the medium version), and click OK. By selecting the sidebar first, the pattern should fill only that area.

Right-click on the pattern layer, and select “Blending options.” Apply a gradient overlay, going from black to transparent to black:

Change the opacity of the gradient overlay to 10%, and give it an angle of 0°. This will add a subtle shadow to the sidebar, making it appear a little more realistic and less flat.

Also, apply a drop shadow to the sidebar. Lower the opacity to 30%, and change the angle to 180°. Change the distance to 1 pixels and the size to 5 pixels, leaving everything else set to 0 pixels. This will add a small and subtle shadow to the sidebar.

Step 19

Open up the “Blending options” for the circle portrait that we created near the beginning of this tutorial. Apply a white drop shadow using the settings below:

Also, apply an inner shadow using the settings below. This will make the circle portrait look as if it was placed in the tree, rather than just sitting on it.

Step 20

Duplicate the title layer in the main contents. Reposition it to the sidebar, and change the text to “About me.” Also, reposition and resize the two lines below the heading.

Open the “Blending options” for your new type layer, and change the drop-shadow settings to these:

Add some text to the “About me” section, using the same font and size that we used in the right sidebar text. Open the “Blending options” for this new text, and click on the “Outer glow” tab to apply an outer glow; change the opacity to 30%, the color to white and the size to 18 pixels.

This will make our text more readable against the wooden background.

Play around with the font size to make the text easier to scan.

Step 21

After some experimentation, I decided that the whole sidebar looked much better in the darker of the three textures mentioned above. I changed the sidebar pattern and the colors of the text. Use the techniques you have already learned to do this.

Here is what my design looks like so far:

Step 22

However much you have planned, you’re bound to make changes during the design process. Upon looking at the design as a whole (rather than piecemeal), I concluded that 10 pixels between the sidebars and main content area was nowhere near enough.

Using the Shift key and Cursor key combination, nudge your content across, making the two gaps 40 pixels instead of 10. This will make the design more usable and attractive.

Step 23

I also decided to change the style of the theme’s header.

Change the color (using a color overlay in the “Blending options” window) to one selected from the circle portrait. I picked a dark green-blue.

I also removed the inner shadow and changed the drop-shadow settings, making it look like the header is sitting above the background rather than set into it.

Step 24

Moving on to the main content banner (i.e. the rectangle we created earlier that sits in the top-right corner of our main content’s image area), select the rectangle by clicking on the layer’s thumbnail preview while holding the Command key.

Go to Layer → New Fill Layer → Pattern, and select the same texture you used for the sidebar.

Right-click on the pattern fill layer, and select the “Rasterize layer” option. Using the Dodge and Burn tools, add highlights to the left and top of the shape and shadows to the right and bottom of the shape.

This will add depth and give a slight three-dimensional feel to the shape. The Burn tool will darken the image, whereas the Dodge tool will lighten it.

Select the Polygonal Lasso tool. Select a shape similar to the one below, and fill it with a dark brown, selected from your texture.

Using the Rectangular Marquee tool, select the areas in the new shape that you don’t need, and hit the Delete key to remove them. You should end up with something similar to this:

Step 25

Grab our very own exclusive icon set called “Reflection.” We will use several of these icons in our design.

Insert the icons that you need in the document by going to File → Place. I chose the camera, heart, reload, edit and clock icons, which will serve as my photo, like, reblog, notes and time icons in the theme.

Step 26

Select the camera icon and resize it. Position it on the post type bar that we just created. Apply an inner and drop shadow to it, using settings similar to those we have been using throughout this tutorial.

Add some typography to the post type bar. I used the same Reklame Script that we used in the heading and the same blending options that we used for the left sidebar headings.

Step 27

Select the other four icon layers. Right-click, and select “Rasterize layers” to turn them from smart objects to pixel objects.

Use the Rectangular Marquee tool to select all of the icon’s reflections.

Hit the Delete key on each of the icon layers to remove its reflection.

Step 28

Reselect all four icon layers. Go to Edit → Free Transform and, while holding the Shift key to keep the icons in proportion, reduce their size, and position them on the bar below the main content area that we created earlier.

Space out the icons evenly using the cursor keys.

Step 29

Right-click on the heart icon layer, and select “Blending options” from the menu. Change the color to light gray using a color overlay, and apply an inner shadow using the following settings:

Now apply a drop shadow, using these settings:

Once the settings have been applied to the heart icon layer, right-click and select “Copy layer styles.” Reselect all four icons, right-click and select “Paste layer styles.” All of the icons in this bar should now have the same effect.

Step 30

Select the Type tool, and make a small text box next to the heart icon. Type “Like this post.” Apply an inner shadow and drop shadow using settings similar to those we have been using throughout this tutorial.

Repeat the previous step for the remaining icons, using the following phrases: “Reblog this post,” “1052 notes” and “Posted on 19/03/2011.” Be sure to copy and paste the same layer style onto each type layer.

You may also want to reposition some of the icons with the new text, making sure that the gap between the text and icons is consistent; because of the different text lengths, this may have changed.

Step 31

Duplicate all of the layers in the main content area, and position them below the original. Change the title, image and post type rectangle. As mentioned, the more realistic the mock-up, the better.

Step 32

Duplicate the heading and text in the sidebar, and insert some icons. I used the excellent social media icons known as Buddycons, another set exclusive to Webdesigner Depot.

The final product

After some more touch-ups (I removed the jagged ribbon-like cut at the bottom of the sidebar), I’m all done! Here is our final design, ready to be coded or sent off to a developer to do it.

This tutorial was put together exclusively for Webdesigner Depot by Callum Chapman, a freelance user interface designer trading under the name Circlebox Creative. Callum is also working on an inspiration gallery project called Vinspires.

Would you like to see another tutorial on how to slice and code this design into a fully working Tumblr theme?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Get 4 VisualFreaks Packs for only $29.95 (reg. $119)

Source

How to Work with PHP and FTP

Jarrod Oberto — Thu, 12 May 2011 00:26:09 +0000

Advertise here

In this tutorial, our goal is to create an FTP class with PHP that is well written, useful, and expandable.

Outlining our Objective

It’s always important to first outline exactly what functionality your class should include. In our case:

connecting to a server
create a folder on the server
upload a file
change directory
retrieving the directory listing
download a file

When Would I Use an FTP Class?

There are several instances when one might use this sort of class. A couple of scenarios could be:

Automate uploading of images, such as a gallery, to a client’s website (ideally, in conjunction with my image resizing tut)
Perform off-site backups by transferring a database backup file from your server to another. (Note: This isn’t recommended for sensitive information as FTP is not a very secure protocol.)

Note: It’s easy to run into issues with FTP due to different server configurations. This code has been tested on a number of FTP servers successfully.

What is FTP?

FTP: “A standard network protocol used to copy a file from one host to another.”

FTP, or File Transfer Protocol, is, as defined by Wikipedia: “A standard network protocol used to copy a file from one host to another over a TCP/IP-based network, such as the Internet.”

Essentially, it allows you to copy a file(s) from one computer to another.

Step 1 – Preparation

We’ll start off as easy as possible. In your new project’s root, create two files: index.php and ftp_class.php.

The index.php file is our main page that creates the object and calls the necessary methods. The ftp_class.php is just that: our ftp class.

In the next step, we’re going to create the skeleton for our class. Once this is in place, you’ll be able to follow along and try each step.

Step 2 – Setting up the Class

The strength of Object-Oriented Programming (OOP) is to give complex code an easy to use interface. By creating a class — think of a class as a pattern — you can encapsulate the data, which is simply jargon for a term that refers to hiding the data. We can then reuse this class over and over without the need to rewrite any of the code. Instead, you only need to call the appropriate methods (the term “method” is the same as function).

Let’s begin creating our ftp class. Open your ftp_class.php file, and add the following code. This is a basic class skeleton structure, which I’ve named ‘FTPClient‘.

The construct function, known as a constructor, is a special class method that is automatically called by the class when you create a new object, or instance of the class. This is typically a good place to add some initialization; but for today’s purpose, we don’t need it. Nonetheless, we’ll keep it here for future use.

	Class FTPClient
	{
		// *** Class variables

		public function __construct() {	}
	}

Please note that we’re using a double underscore for that construct method.

Step 3 – Class Variables

Next, we’ll set set some class variables, or properties.

	private $connectionId;
	private $loginOk = false;
	private $messageArray = array();

The “private” prefix defines the scope of the variable. In this case, it means that the variable can’t be accessed from anywhere outside of the class.

The $connectionId variable will store our connection stream. The other two store the status and any messages. $loginOk will be useful when determining if we’re properly connected.

Step 4 – Simple Message Logging

In nearly every method, we’re going to call a method, named ‘logMessage. This is a very basic message handler, that will allow us to capture any messages created by our class so that we can provide the user with feedback.

Note that we don’t return the actual messages from within our methods. Instead, we return true or false, based upon whether or not a particular operation was successful. This has its advantages, but also doesn’t detail to the user what’s happening.

Add the following two methods, so we can determine what’s successful.

This method accepts a variable, $message. The contents of this variable are then saved into our class array, thanks to the line: $this->messageArray[] = $message;

	private function logMessage($message)
	{
		$this->messageArray[] = $message;
	}

Because $messageArray is a class variable, we can access it, via the $this-> notation.

Within a class, $this refers to the object itself.

To retrieve the message, we call getMessages.

	public function getMessages()
	{
		return $this->messageArray;
	}

This method is a public method. As mention previously, this private/public business simply refers to the scope of the variable, or in this case, the method. A private method (or variable) cannot be accessed outside of the class, while a public method (or variable) can.

Because our variable is private, we need a way to access it. We do this by giving our class a public method, which we can then access outside of the class. You might wonder why we can’t simply make the messageArray variable public. We can; that said, it’s just not a good practice.

Note: There are plenty examples around the web of full blown message handlers, or classes dedicated to them. We’re working on a simple implementation for the purpose of this tutorial.

Step 5 – Connecting

In this step, we’ll add the connect method. This will allow us to connect to an FTP server.

	public function connect ($server, $ftpUser, $ftpPassword, $isPassive = false)
	{

		// *** Set up basic connection
		$this->connectionId = ftp_connect($server);

		// *** Login with username and password
		$loginResult = ftp_login($this->connectionId, $ftpUser, $ftpPassword);

		// *** Sets passive mode on/off (default off)
		ftp_pasv($this->connectionId, $isPassive);

		// *** Check connection
		if ((!$this->connectionId) || (!$loginResult)) {
			$this->logMessage('FTP connection has failed!');
			$this->logMessage('Attempted to connect to ' . $server . ' for user ' . $ftpUser, true);
			return false;
		} else {
			$this->logMessage('Connected to ' . $server . ', for user ' . $ftpUser);
			$this->loginOk = true;
			return true;
		}
	}

We pass in our connection information: the server ($server), username ($ftpUser), and password ($ftpPassword) to allow us to establish a connection.

The first line of code opens an FTP connection, with ftp_connect, to the specified server. We save our connection to the class variable, $connectionId described above.

The code, ftp_login logs us in to the specified connection, passing in our connection id, our username, and password.

You might have noticed the ftp_pasv line of code. This, as the comment implies, turns on/off passive mode. I’d suggest you leave it off, however, if you have any issues connecting, try turning it on. Passive mode can cause a bit of a mare when connecting via FTP.

We determine if the connection was successful. We then log the results by calling our simple message handler method, logMessage(), and pass the string to log. Remember: we use $this-> to access logMessage(), as it is a class variable.

Step 6 – Calling the Object

Now that our class is working, we can test it out! Open your index.php file, and add the following code.

You’ll need access to an FTP server to play along. If you wish to set your own server up, try Filezilla – it’s free, too.

You’ll notice I’ve added the FTP server details here. Ideally these would be stored within your config file. Change these to match the settings of your FTP server.

After defining our FTP server details, we include the class with include('ftp_class.php');. This means: make the class available from within this page. The next line creates an object of our FTP class, and stores it in the variable, $ftpObj. $ftpObj will now be used to access any public methods within our class. This is done by using the -> notation, just like the following line does by calling the $ftpObj -> connect method and passing it our server details.

		// *** Define your host, username, and password
		define('FTP_HOST', '192.168.1.88');
		define('FTP_USER', 'Blimpf');
		define('FTP_PASS', 'catfish');

		// *** Include the class
		include('ftp_class.php');

		// *** Create the FTP object
		$ftpObj = new FTPClient();

		// *** Connect
		$ftpObj -> connect(FTP_HOST, FTP_USER, FTP_PASS);

As you can see, once our class is in place, connecting to our FTP server is really quite easy!

Step 6b – Viewing the Output

In the last step we could wrap the connect call in an if statement, as demonstrated below. Then, if we fail to connect, the dependent code won’t be executed. We can then output any messages to the user, such as “connected” or “failed”.

		// *** Connect
		if ($ftpObj -> connect(FTP_HOST, FTP_USER, FTP_PASS)) {

			// *** Then add FTP code here

			echo 'connected';

		} else {
			echo 'Failed to connect';
		}

This is okay, though our code will quickly become rather bloated with IF/ELSE statements, if we add this to all our calls. Instead, I’d like to offer an alternative that will make things a bit cleaner and easier to follow.

Remember the message handler methods we added? If you wish to see the messages produced by the class – helpful for debugging/feedback – you can add the following code after any method that you call.

		print_r($ftpObj -> getMessages());

This will display the class message.

Step 7 – Making our First Directory

Excellent, now it’s time to do something useful. The first method we’re going to create is the makeDir method. As expected, this method will create directories for us on the server. The only parameter we will pass is the directory path and folder name; we’ll call it $directory. The magical line here is the ftp_mkdir built-in function. It uses our saved “connectionId” and the passed in $directory variable to create the folder.

Add the following code to your ftp_class.php file:

		public function makeDir($directory)
		{
			// *** If creating a directory is successful...
			if (ftp_mkdir($this->connectionId, $directory)) {

				$this->logMessage('Directory "' . $directory . '" created successfully');
				return true;

			} else {

				// *** ...Else, FAIL.
				$this->logMessage('Failed creating directory "' . $directory . '"');
				return false;
			}
		}

And, to call it from your index.php file, add:

		$dir = 'photos';	

		// *** Make directory
		$ftpObj->makeDir($dir);

The variable, $dir is set to the name of the folder we want to create on the server. In this case: “photos”.

The next line calls the method that will create the folder.

If you receive a “Permission denied” error, make sure that you can write in the folder specified. You might need to create the folder within a directory, such as /httpdocs.

Step 8 – Uploading a File

Continuing on, let’s upload a photo, called zoe.jpg. When uploading a file, we need to specify what type of file we’re uploading – binary or ascii? Basically, if you’re uploading a text file, we should use ascii; otherwise, it should be set to binary.

We begin by setting up an array with all the extensions that we should use for an ascii type upload.

$asciiArray = array('txt', 'csv');

Then, we retrieve the extension of our file, so we can test if it is one of the ascii types. We determine this by getting the extension of the file we’re uploading. The quick and dirty method I have used here is
by “exploding” the file using the ‘.‘ as the delimiter. This will split the file into pieces, and store them as an array. Using another built-in PHP function, “end“, we select the last array element that contains our extension. It’s a tidy little bit of code.

$extension = end(explode('.', $fileFrom));

Next, we test if our extension appears in the list (with in_array) of file extensions that should be uploaded as type ascii. If it appears in the list, we set the variable $mode to FTP_ASCII; otherwise, we assume it’s of binary type, and assign $mode the value FTP_BINARY.

in_array($extension, $asciiArray)

ftp_put uploads a file from your local location to a remote file on the ftp server. We pass it our “connectionId“, the path to the file we want to upload to ($fileTo), the path
of the file we want to upload ($fileFrom), and the mode ($mode) which we’ve just determined.

Next, add the following method to your ftp_class.php file:

	public function uploadFile ($fileFrom, $fileTo)
	{
		// *** Set the transfer mode
		$asciiArray = array('txt', 'csv');
		$extension = end(explode('.', $fileFrom));
		if (in_array($extension, $asciiArray)) {
			$mode = FTP_ASCII;
		} else {
			$mode = FTP_BINARY;
		}

		// *** Upload the file
		$upload = ftp_put($this->connectionId, $fileTo, $fileFrom, $mode);

		// *** Check upload status
		if (!$upload) {

				$this->logMessage('FTP upload has failed!');
				return false;

			} else {
				$this->logMessage('Uploaded "' . $fileFrom . '" as "' . $fileTo);
				return true;
			}
	}

Certainly, you can create or upload any folder name you wish! Add this next snippet of code to your index.php file, and adjust accordingly.

		$fileFrom = 'zoe.jpg';
		$fileTo = $dir . '/' . $fileFrom;

		// *** Upload local file to new directory on server
		$ftpObj -> uploadFile($fileFrom, $fileTo);

By now, you should be coming to terms with just how easy this class is to use! We’re merely making single calls to perform our tasks — all thanks to object orientated programming!

Step 9 – Viewing the Files

Let’s now confirm that our file is in the photo folder. We can do so by navigating to the ‘photo‘ folder on our server, and then display the contents.

The changeDir method uses “ftp_chdir” to changes the current directory on the ftp server. Simply pass in the directory to change to. Simple and sweet.

ftp_class.php:

	public function changeDir($directory)
	{
		if (ftp_chdir($this->connectionId, $directory)) {
			$this->logMessage('Current directory is now: ' . ftp_pwd($this->connectionId));
			return true;
		} else {
			$this->logMessage('Couldn\'t change directory');
			return false;
		}
	}

getDirListing will display the contents of the directory you’re in by using the function “ftp_nlist“. This function returns a list of files in a given directory. The current directory is set by default, so you don’t need to provide any parameters.

If you wish, you can override this by passing in the $directory path you wish to view the contents of. The $parameters variable defaults to ‘-la‘. This is a Linux command to display more information about the directory. Feel free to remove it or pass in an empty string.

ftp_class.php:

	public function getDirListing($directory = '.', $parameters = '-la')
	{
		// get contents of the current directory
		$contentsArray = ftp_nlist($this->connectionId, $parameters . '  ' . $directory);

		return $contentsArray;
	}

The getDirListing method returns an array which contains our directory listing.

index.php

		// *** Change to folder
		$ftpObj->changeDir($dir);

		// *** Get folder contents
		$contentsArray = $ftpObj->getDirListing();

		// *** Output our array of folder contents
		echo '
';
		print_r($contentsArray);
		echo '
';

Your result should look like so:

Step 10 – Downloading a File

As we push toward the conclusion of this tutorial, we next move on to downloading the file. The method starts with the same code as uploadFile, in that it determines if the file we want to download is ascii or binary.

For this method, you simply pass in the filename (and possibly the path, depending on if you’re in the same folder as the file you wish to download) of the file to download, and the name you wish that file to have on your client machine.

In order to download a file, you need to call ftp_get.

ftp_get($this->connectionId, $fileTo, $fileFrom, $mode, 0)

This downloads a file from a remote server to our local machine. It accepts the following parameter: our connection id, the path and filename to save as locally (will be overwritten if it
already exists) ($fileTo), the location and name of the file on the remote server ($fileFrom), and the mode ($mode).

ftp_class.php

	public function downloadFile ($fileFrom, $fileTo)
	{

		// *** Set the transfer mode
		$asciiArray = array('txt', 'csv');
		$extension = end(explode('.', $fileFrom));
		if (in_array($extension, $asciiArray)) {
			$mode = FTP_ASCII;
		} else {
			$mode = FTP_BINARY;
		}

		// try to download $remote_file and save it to $handle
		if (ftp_get($this->connectionId, $fileTo, $fileFrom, $mode, 0)) {

			return true;
			$this->logMessage(' file "' . $fileTo . '" successfully downloaded');
		} else {

			return false;
			$this->logMessage('There was an error downloading file "' . $fileFrom . '" to "' . $fileTo . '"');
		}

	}

We’re going to download the same file we uploaded by saving it with a different name on our client machine.

Note: Again, make sure that your permissions are set correctly!

Because we should now be inside our photo folder, we don’t add a path to the $fileFrom variable – only the file name.

index.php

		$fileFrom = 'zoe.jpg';		# The location on the server
		$fileTo = 'zoe-new.jpg';			# Local dir to save to

		// *** Download file
		$ftpObj->downloadFile($fileFrom, $fileTo);

Step 11 – Finishing Up

To complete our class, let’s add the class magic method, __deconstruct. This method closes our connection when the reference to our object no longer exists – maybe the page was closed. In any event, this code is run and the connection is closed. It’s always a good practice to include this, though it’s not entirely necessary.

	public function __deconstruct()
	{
		if ($this->connectionId) {
			ftp_close($this->connectionId);
		}
	}

Conclusion

Well that does it! I hope you now have a better understanding of how to use FTP with PHP. You should now have the necessary skills to further expand this class to support other common tasks, such as renaming or deleting files and folders.

Be sure to let us know if you create any cool PHP FTP clients!

Big vs. small: Challenges in responsive web design

Walter — Wed, 11 May 2011 11:51:40 +0000

Advertise here with BSA

As the number and variety of devices from which we access the internet increases, new web design challenges present themselves.

It’s no longer simply enough to have a mobile version and a browser version. Now, we have to consider whether the person visiting our site is visiting from a tablet, a smartphone (and whether that smartphone has a high-res screen or not), a netbook, a desktop computer or full-size laptop (and whether it’s one with a high-res or low-res screen), or some other device entirely.

And optimizing the experience for all of those different possibilities is becoming more expected among savvy internet users.

A few years ago, a designer would have looked at the list of devices they had to design for and then set about creating individual website designs for each device. But as the number and variety of devices increases, that becomes an impractical, time-consuming proposition.

Instead, designers should create designs that adapt to the needs of each browser, regardless of the device.

A lot of screens keep getting bigger

The screen resolutions of desktop and laptop computers keeps getting bigger. Only a couple of years ago, a 1280 x 800 pixel resolution seemed large. Now, that’s pretty much the bottom-end of common screen resolutions on laptops, and it’s not uncommon for new monitors to have full HD screen resolutions (1920 x 1080 pixels).

We’re reaching the upper limits of what’s practical for a monitor (with current interface technologies, though future developments may change that), but even designing for 1920 pixel widths is a lot different than designing for a screen that’s only 1024 pixels wide. Or at least it should be.

Adding to potential large-screen issues is that a lot of game systems and new TVs now come internet-ready. Some of these actually have very good built-in browsers, so it’s entirely possible that some of your website’s visitors will be viewing your site on their 55″ HD TV.

But then there are mobile devices

On the opposite end of the spectrum is the huge number of internet users who are now accessing the web primarily from their smartphone, tablet, or netbook. Screens on these devices can range from about 240 x 320 pixels (on some lower-end and older smartphones) to 1024 x 600 or 768 (on some netbooks and tablets).

Obviously, a site designed for a monitor that’s 1280+ pixels wide isn’t going to look right on a screen that’s only 320 pixels wide. Or even one that’s 600 or 800 pixels wide. Horizontal scroll, especially on touchscreen devices, is annoying at best.

Designing a mobile site used to be the favored solution to differing screen resolutions. But since now there’s a huge range of sizes, rather than just “normal” and “tiny”, that’s not the best idea anymore. Mobile sites designed for a 240 x 320 pixel screen aren’t going to look good on an iPad (or even a new iPhone with the Retina Display). And if you design for the Retina Display or similar higher-res device screens, you’re going to alienate a lot of visitors using other smartphones that don’t have such high resolution screens.

A flexible foundation

Starting with a flexible foundation is important. A fluid grid alone isn’t enough. You also need a grid or layout that can change based on screen resolutions and device types. For simple layouts, that’s not such a tall order. But if you’d like something that’s a bit more complex, with varying numbers of columns depending on the screen width, there are a few things you have to take into consideration.

Flexible layouts

Creating a fluid grid is a fantastic way to create a more responsive design. The best fluid grids will combine resizing and repositioning content as necessary, as the screen width changes. (Another great tool for creating fluid grids is the Tiny Fluid Grid, which lets you make grids with up to 1200px maximum widths, and is based on the 1kb Grid.)

For example, as long as your screen resolution stays above 800px wide, a 3-column layout would stay 3 columns, simple adjusting the width of each column to best serve the content. But when the screen width drops below 800px, your third column might drop under your second column, so that each column can stay an easily-readable width.

If the screen gets even narrower, let’s say 480px (typical on a lot of smartphones), the whole design drops to a single column, with the second and third columns appearing below the main content. If the navigation was contained within one of those columns, it might migrate to the top of the page, so that it’s still easily accessible.

Using CSS3 media queries lets us target not only a specific class of devices (such as mobile devices), but also particular specifications within those devices. So we could have separate stylesheets for a number of different sizes of devices.

The beauty of media queries in CSS3, though, is that they can also be used right within the CSS. So if all we need to change is the number of columns, or something similar, we can just define a @media rule within the stylesheet. WebDesignerWall has a great overview of how to use CSS3 Media Queries.

Fluid images

Creating images that adjust to the size of the column or div that they’re in is another important aspect of creating a more responsive design within a fluid layout. As columns resize, the images they contain can resize so that they still fit within the constraints of the column.

There are a couple of ways to go about this: you can have your image resize completely on the fly, or you can dynamically crop the image to only show the most important parts. In some cases, using a combination of these two techniques (so that above a certain size, the image just shrinks, but when it gets below that size it starts to crop) can provide the most desirable results.

Unstoppable Robot Ninja has a simple script that automatically resizes your images. If you want to selectively hide parts of your image dynamically (effectively cropping them), Zomigi.com has a great method for doing that. They also have a method for creating sliding composite images that can be useful for fluid designs.

Wider screen considerations

According to StatOwl, over 73% of non-mobile internet users during the past three months were using computers with a resolution higher than 1024 x 768. And if you look at the stats for 1024 x 768 specifically, you’ll see that it’s losing market share. It’s clear that there’s already a huge shift to higher screen resolutions—one that designers would be ill-advised to ignore.

Of course, just because there are some users out there who have moved on to wider screen resolutions doesn’t mean that every designer out there should jump on the wide-width bandwagon and start pushing redesigns to their clients. Mobile adoption is more important at the moment than wider widths. But since we’ve hopefully convinced you by now that responsive design is the way to approach new website designs and redesigns, it’s important to consider how to make websites work at wider widths.

Who’s using wider resolution screens?

Anyone working in design or creative fields likely has a screen resolution of at least 1280 pixels wide (if not much wider). This includes web and graphic designer, filmmakers, photographers, and others. Tech-savvy users are also more likely to be using higher-resolution screens, since they’re more likely to upgrade their computer equipment regularly.

Wealthy consumers are another group likely to be using higher resolution monitors. Like with tech-savvy users, this is due to the fact that people with more disposable income are more likely to buy newer computers on a regular basis. Of course, this effect is multiplied with consumers who are both wealthy and tech-savvy.

Mac fans would be another group more likely to be using a higher screen resolution, due to the fact that newer MacBooks, iMacs, and other Apple computers all have screen resolutions of at least 1280 x 800. Of course, this excludes the products they have running on iOS (the iPhone, iPod Touch, and iPad).

Who isn’t using wider res screens?

While there are plenty of users out there using higher resolution screens, there are still a lot of internet users who aren’t. These fall into a few different groups.

Students are probably one of the largest groups of lower-res users. Schools often have to make do with computers for five or ten years, and in many cases, the computers they have aren’t even state-of-the-art when they purchase them. If your website is aimed at educational users (including school faculty and administrators, in addition to students), you’re probably looking at a lot of users whose screens are only 1024 pixels wide, and maybe even some who still have monitors set to 800 pixels wide.

Netbook users are another big group that generally has lower-res screens. Most netbooks, especially the lower-end ones, have screen resolutions of 1024 by 600 or 728 pixels or so. The same is true of the iPad (1024×768) and many other tablets on the market, some of which have even lower screen resolutions.

People in less developed countries are likely using older or lower-end computers. If you’re targeting users who aren’t in North America or Western Europe, or in areas where internet cafes are commonly used for internet access (as is the case in many developing nations), then you’re likely looking at a majority of users viewing your site at 1024 by 768 or similar screen resolutions.

Business users often have lower screen resolutions, too. Many non-tech businesses will hang on to computer equipment until it’s absolutely obsolete before upgrading. And it makes sense, especially considering the cost of upgrading dozens or hundreds of computers at once. If you’re targeting business users, you may want to stick with a design based on the 1024 width.

The last group that is likely to have lower-resolution screens are people who don’t value technology. While these people used to not bother with computers at all, many are now seeing the value in having a PC at home. But they’re also unlikely to go out and spend more than a few hundred dollars on a PC, or they might get a used computer from a family member or the classified ads. If your website is focused on non-tech consumers, especially those in rural areas, you’ll want to carefully consider what the likely screen resolutions are, and design accordingly.

Track your visitors

Everything mentioned above brings us to one of the most important steps to take if you’re considering designing for a wider screen resolution: track the visitors who come to your site and look at what screen resolution they’re using. Any good analytics program will give you this information, and it’s incredibly valuable in making decisions like this.

If you find that the vast majority of your users are coming from computers with higher screen resolutions, then you can probably design your site for those users without seeing too much impact. But if you find that a large number of your visitors are still using screen resolutions of 1024 or narrower, then you may want to reconsider.

Wider widths are important for innovation

I’m sure there are a lot of designers out there who don’t really see the point in wider widths. They’re happy designing at 960 pixels. They’ve got systems in place for designing at those widths. They have pre-made CSS files all set for 960 pixels. Why would they want to go wider? Especially when a big chunk of internet users are still working with screens that 1024 pixels wide.

The simple answer is that as long as we keep designing for 1024, there’s no incentive for most consumers to upgrade. And that means there’s little incentive for manufacturers to create products with higher resolutions.

For example, if 1280 was the standard, and if the majority of websites out there were 1140 pixels wide or wider, it’s likely the iPad would have been developed with a resolution of at least 1280. But because 1024 is the standard, the iPad doesn’t need to be higher res than that. The same principle applies to netbooks. Since the web is designed around screen widths of 1024 pixels, devices intended primarily for web use don’t need to be higher res than that.

By pushing website designs to wider widths, we’re encouraging upgrades and innovation. Plus, those extra 180 pixels (the difference between 960 and 1140) can open up new possibilities in the world of user interface design and user experience. Just like the 160 pixels gained when we switched from 800 to 960 made more things possible.

The downsides to wide widths

While there are definite advantages to creating wider designs, there are also definite downsides to the practice. Some of these are easily overcome, but it’s important to be aware of what they are if you expect to prevent them.

Wide line lengths decrease readability

It’s tempting when creating a wider design to take advantage of all that extra screen real estate to make your main content area wider. This isn’t always a good idea, though. Longer line lengths are harder to read, as the eye has to travel further at the end of a line to get to the beginning of the next line, which means the reader can more easily get lost and end up on the wrong line. This is exacerbated by smaller type sizes. It’s important to strike a happy medium between line length, font size, and line height.

There are a couple of different methods for calculating the proper line length. The first one is the alphabet-and-a-half rule, which results in a line length of 39 characters (26 letters in the alphabet x 1.5). Adapt your font size so that roughly 39 characters fit on your chosen line length (or vice versa).

The second method of calculating optimal line length is to apply the “points times two” rule. This is a holdover from the world of print, but can be adapted to the web easily enough. With this rule, you take the point size of your font, multiply it by two, and then make your lines that length in picas (which, in print, are 12 points). So, to calculate your line lengths in pixels, you’d take your font size and multiply it by 24 (a 12-point font would have a line length of 288 pixels).

It can be helpful to calculate your line lengths with both of these methods, and then compare. Make your final line lengths somewhere between the two.

Information overload

Wider content areas can easily contribute to making your pages look cluttered and like there’s too much going on. It also makes it easier to add extra columns, widgets, or other content that might not really add any value to the page. It’s important to keep principles of good content design in mind when creating your site. Ample white space is also helpful in making sure your site doesn’t look cluttered.

Wider widths give you more options when it comes to design, but it also multiplies the chances that you’ll make poor design decisions. Go too minimalist and it can look boring and empty. Too much going on and it just looks busy and cluttered.

Pay attention to scale, white space, proportion, and hierarchy in your designs to ensure an excellent final product. And be careful that your wider designs don’t end up being “too much” in general.

So why isn’t everyone doing responsive design?

While responsive design does address a lot of the core issues presented by the wide variety of devices being used to access the internet, it can also create some new problems.

Take mobile devices, for instance. If a person is accessing a movie theater website on their smartphone, it’s likely their primary concern is show times, directions to the theater, or maybe the phone number to the theater. They want immediate access to that kind of information. Loading up the entire website, that also includes things like movie reviews and other information, only to hide a good chunk of it from that mobile user is a waste of resources.

So it’s important to look at responsive design on a case-by-case basis, to figure out if it’s the best solution for a particular website. In many cases, it is, but there are still some instances where a more traditional mobile site might be preferable.

As designers, though, it’s important to understand responsive design, and to be able to know when it is the appropriate solution for your projects. Since much of responsive design is built upon creating well-formed, flexible websites, it can serve as a sort of best-practices guide for designers as we move forward with web design and web standards.

More resources for creating responsive designs

Flurid: Flurid is a fluid grid design that will adapt across a variety of window widths. While not particularly responsive on its own (other than adjusting column widths), it can serve as the backbone for creating a responsive site.
Fluid Grids: This article from A List Apart discusses the advantages and particulars of working with fluid grids.
Fluid Grid System: Another fluid grid framework.
Hardboiled CSS3 Media Queries: Another great guide to Media Queries.

Examples of responsive website designs

Not all of the designs below adapt right down to mobile sizes, but some do, and they all can give you ideas of how you might adapt your website designs to be more responsive across devices.

CreativeDepart

The columns here will stack based on screen width, but are always at least 4-across.

Teruhiro Yanagihara

This grid rearranges itself and resizes the columns dynamically to best fit your browser window.

This Also

This Also rearranges the images to best fill your browser window.

CSS-Tricks

CSS-Tricks adapts to wider screen resolutions, while moving the sidebar under the main content for narrower screens.

Abduzeedo

The Abduzeedo shifts the content around on the homepage based on your browser width.

Psdtuts+

The Psdtuts+ website (along with all the other Tuts+ sites) resizes and restacks their sidebars based on the width of your browser window. They also change the width of the main content column to accommodate different sizes.

Simon Collison

The grid here shifts from four columns to two to one based on the screen width.

Hardboiled Web Design

The layout here adjusts image sizes based on width, as well as shifting columns around for narrower screens.

Art=Work

A great example of a layout where the columns change position for smaller screen resolutions.

Bureau

The Bureau design shifts from a fluid-width design with fixed column widths for very wide screens to a fixed-width design for most screen sizes to a different fluid one for narrower widths.

Written exclusively for WDD by Cameron Chapman.

Have your own take on designing for wider screens and responsive design? Share in the comments!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Get 4 VisualFreaks Packs for only $29.95 (reg. $119)

Source

The Future Of CSS: Experimental CSS Properties

Christian Krammer — Wed, 11 May 2011 11:35:25 +0000

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we wisll look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Some explanation: For each property, I state the support: “WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “Gecko” indicates the availability in Firefox and the like. Finally, certain properties are part of the official CSS 2.1. specification, which means that a broad range of browsers, even older ones, support them. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9.

WebKit-Only Properties

-webkit-mask

This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications.

-webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. The mask can either be a CSS3 gradient or a semi-transparent PNG image. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. For more info, see the Surfin’ Safari blog and the link below.

Example

Image mask:

.element {
	background: url(img/image.jpg) repeat;
	-webkit-mask: url(img/mask.png);
}

Example

Gradient mask:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Further reading: Safari Developer Library

-webkit-text-stroke

One of the shortcomings of CSS borders is that only rectangular ones are possible. A ray of hope is -webkit-text-stroke, which gives text a border. Setting not only the width but the color of the border is possible. And in combination with color: transparent, you can create outlined text.

Examples

Assigns a blue border with a 2-pixel width to all

headings:

h1 {-webkit-text-stroke: 2px blue}

Another feature is the ability to smooth text by setting a transparent border of 1 pixel:

h2 {-webkit-text-stroke: 1px transparent}

Creates text with a red outline:

h3 {
	color: transparent;
	-webkit-text-stroke: 4px red;
}

Further reading: Safari Developer Library

-webkit-nbsp-mode

Wrapping can be pretty tricky. Sometimes you want text to break (and not wrap) at certain points, and other times you don’t want this to happen. One property to control this is -webkit-nbsp-mode. It lets you change the behavior of the character, forcing text to break even where it is used. This behavior is enabled by the value space.

Further reading: Safari Developer Library

-webkit-tap-highlight-color

This one is just for iOS (iPhone and iPad). When you tap on a link or a JavaScript clickable element, it is highlighted by a semi-transparent gray background. To override this behavior, you can set -webkit-tap-highlight-color to any color. To disable this highlighting, a color with an alpha value of 0 must be used.

Example

Sets the highlight color to red, with a 50% opacity:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Supported by: iOS only (iPhone and iPad).

Further reading: Safari Developer Library

zoom: reset

Normally, zoom is an Internet Explorer-only property. But in combination with the value reset, WebKit comes into play (which, funny enough, IE doesn’t support). It enables you to override the standard behavior of zooming on websites. If set with a CSS declaration, everything except the given element is enlarged when the user zooms on the page.

Further reading: Safari Developer Library

-webkit-margin-collapse

Here is a property with a quite limited practical use, but it is still worth mentioning. By default, the margins of two adjacent elements collapse, which means that the bottom distance of the first element and the top distance of the second element merge into a single gap.

The best example is two

s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included.

Further reading: Safari Developer Library

-webkit-box-reflect

Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you.

It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property.

Examples

This reflection would be shown under its parent element and have a spacing of 5 pixels:

-webkit-box-reflect: below 5px;

This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

Further reading: Safari Developer Library

-webkit-marquee

Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping.

The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.)

Example

.marquee {
	white-space: nowrap;
	overflow:-webkit-marquee;
	width: 70px;
	-webkit-marquee-direction: forwards;
	-webkit-marquee-speed: slow;
	-webkit-marquee-style: alternate;
}

There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text.

The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment.

Further reading: Safari Developer Library

Gecko-Only Properties

font-size-adjust

Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust.

This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise.

Example

If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes).

p {
	font-family:Verdana, Arial, sans-serif;
	font-size: 12px;
	font-size-adjust: 0.58;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

image-rendering

A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs.

This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to and elements, as well as background images. It is a CSS3 property, but is currently supported only by Firefox.

It’s also worth mentioning -ms-interpolation-mode: bicubic, although it is a proprietary Internet Explorer property. Nevertheless, it enables Internet Explorer 7 to render images at a much higher quality after resizing which is useful because by default this browser handles such tasks pretty poorly.

Supported by: Gecko.

Further reading: Mozilla Developer Network

-moz-border-top-colors

This property could be filed under ‘eye-candy’. It allows you to assign different colors to borders that are wider than 1 pixel. Also available are -moz-border-bottom-colors, -moz-border-left-colors and -moz-border-right-colors.

Unfortunately, there is no condensed version like -moz-border-colors for this property, so the border property must be set in order for it to work, whereas border-width should be the same as the number of the given color values. If it is not, then the last color value is taken for the rest of the border.

Example

Below, the element’s border would have a standard color of orange applied to the left and right side (because -moz-border-left-colors and -moz-border-right-colors are not set). The top and bottom borders have a kind of gradient, with the colors red, yellow and blue.

div {
	border: 3px solid orange;
	-moz-border-top-colors: red yellow blue;
	-moz-border-bottom-colors: red yellow blue;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

Mixed Properties

-webkit-user-select and -moz-user-select

There might be times when you don’t want users to be able to select text, whether to protect it from copying or for another reason. One solution is to set -webkit-user-select and -moz-user-select to none. Please use this property with caution: since most users are looking for information that they can copy and store for future reference, this property is neither helpful nor effective. In the end, the user could always look up the source code and take the content even if you have forbidden the traditional copy-and-paste. We do not know why this property exists in both WebKit and Gecko browsers.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

-webkit-appearance and -moz-appearance

Ever wanted to easily camouflage an image to look like a radio button? Or an input field to look like a checkbox? Then appearance will come in handy. Even if you wouldn’t always want to mask a link so that it looks like a button (see example below), it’s nice to know that you can do it if you want.

Example

a {
	-webkit-appearance: button;
	-moz-appearance: button;
}

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

text-align: -webkit-center/-moz-center

This is one property (or value, to be exact) whose existence is quite surprising. To center a block-level element, one would usually set margin to 0 auto. But you could also set the text-align property of the element’s container to -moz-center and -webkit-center. You can align left and right with -moz-left and -webkit-left and then -moz-right and -webkit-right, respectively.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

CSS 2.1. Properties

counter-increment

How often have you wished you could automatically number an ordered list or all of the headings in an article? Unfortunately, there is still no CSS3 property for that. But let’s look back to CSS 2.1, in which counter-increment provides a solution. That means it’s been around for several years, and even supported in Internet Explorer 8. Did you know that? Me neither.

In conjunction with the :before pseudo-element and the content property, counter-increment can add automatic numbering to any HTML tag. Even nested counters are possible.

Example

For numbered headings, first reset the counter to start at 1:

body {counter-reset: thecounter}

Every

would get the prefix “Section,” including a counter that automatically increments by 1 (which is default and can be omitted), where thecounter is the name of the counter:

.counter h1:before {
	counter-increment: thecounter 1;
	content:"Section"counter(thecounter)":";
}

Example

For a nested numbered list, the counter is reset and the automatic numbering of

ol {
    counter-reset: section;
    list-style-type: none;
}

Then, every

is given automatic incrementation, and the separator is set to be a point (.), followed by a blank.
```
li:before {
    counter-increment: section;
    content: counters(section,".")"";
}
```
```
	item
			
	item				  
		
			item
	
			item
	
		
	
	item
			
```
Supported by: CSS 2.1., all modern browsers, IE 7+.
Further reading: W3C
quotes
Are you tired of using wrong quotes just because your CMS doesn’t know how to properly convert them to the right ones? Then start using the quotes property to set them how you want. This way, you can use any character. You would then assign the quotes to the desired element using the :before and :after pseudo-elements. Unfortunately, the otherwise progressive WebKit browsers don’t support this property, which means no quotes are shown at all.
Example
The first two characters determine the quotes for the first level of a quotation, the last two for the second level, and so on:
```
q {
	quotes: '«' '»' "‹" "›";
}
```
These two lines assign the quotes to the selected element:
```
q:before {content: open-quote}
q:after  {content: close-quote}
```
So,
This is a very nice quote.
would give us:
«This is a very ‹nice› quote.»
Supported by: CSS 2.1., all browsers except WebKit, even IE 7+.
Further reading: W3C
Question: To add the character directly, does the CSS document have to have a UTF-8 character set? That’s a tough one. Unfortunately, I can’t give a definitive answer. My experimentation has shown that no character set has to be set for the quotes property to work properly. However the utf-8 character set doesn’t work because it shows “broken” characters (for example, “»”). With the iso-8859-1 character set, everything works fine.
This is how the W3C describes it: “While the quotation marks specified by ‘quotes’ in the previous examples are conveniently located on computer keyboards, high-quality typesetting would require different ISO 10646 characters.”
CSS3 Properties You May Have Heard About But Can’t Remember
To round out things, let’s go over some CSS3 properties that are not well known and maybe not as appealing as the classic ones border-radius and box-shadow.
text-overflow
Perhaps you’re familiar with this problem: a certain area is too small for the text that it contains, and you have to use JavaScript to cut the string and append “…” so that it doesn’t blow out the box.
Forget that! With CSS3 and text-overflow: ellipsis, you can force text to automatically end with “…” if it is longer than the width of the container. The only requirement is to set overflow to hidden. Unfortunately, this is not supported by Firefox but will hopefully be implemented in a coming release.
Example
```
div {
	width: 100px;
	text-overflow: ellipsis;
}
```
Supported by: CSS 3, all browsers except Firefox, even IE6+.
Further reading: W3C
word-wrap
With text in a narrow column, sometimes portions of it are too long to wrap correctly. Link URLs especially cause trouble. If you don’t want to hide the overflowing text with overflow: hidden, then you can set word-wrap to break-word, which causes it to break when it reaches the limit of the container.
Example
```
div {
	width: 50px;
	word-wrap: break-word;
}
```
Supported by: CSS 3, all browsers, even IE6+.
Further reading: W3C
resize
If you use Firefox or Chrome, then you must have noticed that text areas by default have a little handle in the bottom-right corner that lets you resize them. This standard behavior is achieved by the CSS3 property resize: both.
But it’s not limited to text areas. It can be used on any HTML element. The horizontal and vertical values limit the resizing to the horizontal and vertical axes, respectively. The only requirement is that overflow be set to anything other than visible.
Supported by: CSS3, all the latest browsers except Opera and Internet Explorer.
Further reading: Safari Developer Library
background-attachment
When you assign a background image to an element that is set to overflow: auto, it is fixed to the background and doesn’t scroll. To disable this behavior and enable the image to scroll with the content, set background-attachment to local.
Supported by: CSS 3, all the latest browsers except Firefox.
Further reading: Safari Developer Library
text-rendering
With more and more websites rendering fonts via the @font-face attribute, legibility becomes a concern. Problems can occur particularly at small font sizes. While there is still no CSS property to control the subtle details of displaying fonts online, you can enable kerning and ligatures via text-rendering.
Gecko and WebKit browsers handle this property quite differently. The former enables these features by default, while you have to set it to optimizeLegibility in the latter.
Supported by: CSS3, all WebKit browsers and Firefox.
Further reading: Mozilla Developer Network
transform: rotateX/transform: rotateY
If you’ve already dived into CSS3 and transformations a bit, then you’re probably familiar with transform: rotate(), which rotates an element around its z-axis.
But did you know that it is also possible to spin it “into the deep” (i.e. around its x-axis and y-axis)? These transformations are particularly useful in combination with -webkit-backface-visibility: hidden, if you want to rotate an element and reveal another one at its back. This technique is described by Andy Clarke in his latest book, Hardboiled Web Design, and it can be seen in action on a demo page.
Example
If you hover over the element, it will turn by 180°, revealing its back:
```
div:hover {
	transform: rotateY(180deg);
}
```
Quick tip: To just mirror an element, you can either set transform to rotateX(180deg) (and respectively rotateY) or set transform to scaleX(-1) (and respectively scaleY).
Supported by: CSS3, only WebKit browsers, in combination with -webkit-backface-visibility only Safari and iOS (iPhone and iPad).
Further reading: Safari Developer Library (transform: rotate, -webkit-backface-visibility)
Some Last Words
As you hopefully have seen, there are many unknown properties that range from being nice to hav to being very useful. Many of them are still at an experimental stage and may never leave it or even be discarded in future browser releases. Others will hopefully be adopted by all browser manufacturers in coming versions.
While it is hard to justify using some of them, the WebKit-specific ones are gaining more and more importance with the success of the iOS devices and Android. And of course some CSS3 properties are more or less ready to be used now.
And if you don’t like vendor-specific properties, you can see them as experiments that still could be implemented in the code to improve the user experience for users browsing with the modern browsers. By the way, CSS validator from the W3C now also supports vendor-specific properties, which result in warnings rather than errors.
Happy experimenting!
(al)
© Christian Krammer for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, CSS Properties, Future of CSS

10 handy jQuery mobile tips and snippets to get you started

Walter — Tue, 10 May 2011 11:48:19 +0000

Advertise here with BSA

As with any new technology, getting started is often the hardest part.

With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library.

Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome.

Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful.

1. A full basic page

I find myself needing the full mark-up for a basic page over and over again. As such, here is all the code you need to set up a basic single page.




Page Title






 
  Header
 
 
  Content goes here
 
 
  Footer

2. Where to add traditional jQuery calls

When I got started using this awesome extension to jQuery, I immediately found myself wanting to modify things on the page before the mobile plug-in was triggered.

As it turns out, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. This way, your jQuery commands have a chance to run prior to the library being loaded. Here is the pattern to follow:

3. Disable AJAX navigation for all links at once

As awesome as AJAX navigation is, there are times where you’d just rather disable it. Use this bit of jQuery to tell the mobile library not to use AJAX navigation.

Place it after the reference to the jQuery mobile library in the header of the page. In other words, the library must already be loaded before this code is referenced.

4. Stop some key items from being truncated

One feature of the library (or flaw, depending on your needs) is that it intelligently truncates long items to fit into UI elements.

I have found two situations where this can be annoying. First, in list items, where I prefer to see the full text. And secondly, in the footer text. It seems once you have more than just a few characters down there, it starts getting truncated with “…”. Use this simple CSS to override both of these defaults.

For list items:

body .ui-li .ui-li-desc {
 white-space: normal;
 }

For footer content:

body .ui-footer .ui-title {
 white-space: normal;
 }

5. Use media queries to target devices

One of the first questions I had with this library was how to target devices in the CSS (based on screen size). For example, I wanted a two-column layout for the iPad and a single column for smartphones. The absolute best way to accomplish this is with media queries.

With some simple media queries in place, you can quickly make the CSS target screen sizes. And with this type of targeting, we can quickly set up different layouts based on the available screen space by relying on conventional CSS techniques.

Two fantastic resources for this are:

“CSS Media Queries and Using Available Space,” CSS-Tricks;
Hardboiled CSS3 Media Queries,” Stuff and Nonsense.

6. Target platforms with jQuery

Much as we might want to execute certain CSS for certain devices, we might also want to run jQuery only on specific devices. Here is an adaptation of some code from Snipplr that allows me to easily segment portions of jQuery to run depending on the user’s device.

 var deviceAgent = navigator.userAgent.toLowerCase();
 var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
 if(agentID.indexOf("iphone")>=0){
  alert("iphone");
 }
 if(agentID.indexOf("ipod")>=0){
  alert("ipod");
 }
 if(agentID.indexOf("ipad")>=0){
  alert("ipad");
 }
 if(agentID.indexOf("android")>=0){
  alert("android");
 }

7. Use full paths for the targets of form action attributes

One quirk of the library seems to be its difficulty in finding target pages to post forms to… that is, unless you use the full path from the root of the website.

For example, I’ve found that this form tag never finds its target:

Whereas a full path like this works as expected:

Also, be sure that the results from the form handler produce a full, valid jQuery mobile page, as shown in tip #1.

8. Create pop-up dialogs

One handy feature of the library is its built-in pop-up or dialog box feature. Setting up this handy feature is dead simple. Basically, add an attribute to link to, as follows: data-rel="dialog".

Note two things. First, the target page must be a full-blown jQuery mobile page, as outlined in tip #1. Secondly, this will only work for external pages; it must be a full separate page to work properly.

Pop up!

9. A “Cancel” + “Save” button combo

This bit of code accommodates two basic needs. The first is to have two buttons next to each other. Fortunately, the library has a built-in column structure that can easily be put to work using a fieldset tag and the proper classes, as seen below. The second is to have two buttons with different themes. This code is directly from the documentation, and I keep it handy for frequent use.

10. Create a column structure on your own

In my quest to optimally structure a single page for multiple devices, I found myself combining the media query tricks above with the “columns in any order” technique.

Fortunately, web developers figured out long ago how to move columns around. By combining this technique with media queries, we can very easily set up various structures depending on the screen size we’re working with.

Position Is Everything lays out one of the easiest systems to work with.

Conclusion

The jQuery mobile library is a blast to work with. It produces fantastic results with very little effort. And considering it is still in alpha, it is off to a great start. Hopefully, these quick tips will keep you moving forward as you dig into this new library.

Written exclusively for WDD by Patrick McNeil. He is a freelance writer, developer and designer. In particular, he loves to write about web design, train people on web development and build websites. Patrick’s latest book project is The Designer’s Web Handbook; learn about his other books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

What do you think of the jQuery Mobile framework? What handy code snippets have you found useful?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Get 4 VisualFreaks Packs for only $29.95 (reg. $119)

Source

New WordPress Power Tips For Template Developers And Consultants

Jacob Goldman — Tue, 10 May 2011 08:41:02 +0000

It has been a big year for WordPress. If there were still some lingering doubts about its potency as a full-fledged content management system, then the full support for custom taxonomies and custom post types in WordPress 3.0 core should have put them to rest. WordPress 3.1 took those leaps one step further, polishing custom taxonomies with multi-taxonomy query support, polishing custom post types with native template support for archives and feeds, and introducing features (like the “admin bar”) that make it easier to quickly edit and add content from the front end.

In the broader community, we’ve seen incredible plug-in suites such as BuddyPress mature, and even the emergence of independent WordPress-dedicated hosting services, such as page.ly. To celebrate WordPress’s progress, let’s review some new tips that can help template developers and consultants up their game even further.

Foreword for New Developers: What is a “Hook”?

Most of these tips take advantage of core WordPress “hooks.” Hooks are points in the code that allow any number of outside functions to “hook in” and intercept the code in order to add to or modify behavior at a particular point. Hooks are the fundamental concept that enables virtually all plug-ins. WordPress has two kinds of hooks: actions and filters.

Action hooks are intended to allow developers to intercept certain activities and execute some additional functionality. For instance, when a new post is published, the developer may want to add some extra functionality, such as posting the title and a link to Twitter.

Filter hooks allow the developer to intercept and modify data that is being processed by WordPress for display or saving. For instance, the developer may want to inject an advertisement into the content before displaying the post on the screen.

Learn more about hooks on the official WordPress codex.

The Underused Pagination Function

Many great plug-ins are in the official WordPress repository. But using fancy plug-ins to add fairly basic functionality to your theme is often like driving a tractor trailer to go around the block. There’s usually a lighter, smarter way: a bike or even a car. And while plug-ins are a fine solution for consultants who are staging a complete roll-out, they’re awkward solutions for theme developers who want to sell standalone templates.

WP-PageNavi is one of the most popular WordPress plug-ins; and no doubt it is well developed. It is ideal for those who are uncomfortable digging into WordPress code. But did you know that WordPress has a function built right into core that (with a bit of savvy about its parameters) can generate pagination links for everything from comments to post archives to post pages?

The function in question is paginate_links(). (For those who like to fish around in the source, it’s on line 1954 of general-template.php in the wp-includes folder as of WordPress 3.1.) Believe it or not, this underused function has been around since 2.1. Another function, paginate_comment_links(), is actually a wrapper for this function that is designed specifically for paging comments, and it has been around since 2.7.

The function takes an array of parameters that make it versatile enough to use for any kind of paging:

base
This is the path for the page number links, not including the pagination-specific part of the URL. The characters %_% will be substituted in that URL for the page-specific part of the URL.
format
This is the “page” part of the URL. %#% is substituted for the page number. For example, page/%#% or ?page=%#%.
total
The total number of pages available.
current
The current page number.
show_all
Lists all page links, instead of limiting it to a certain number of links to the left and right of the current page.
prev_next
Includes the “Previous” and “Next” links (if applicable), just as you might normally do with the previous_posts_link() function.
prev_text and next_text
Text to put inside the “Previous” and “Next” links.
end_size
The number of page links to show at the end. Defaults to 1 (e.g. 1 2 3 … 10).
mid_size
The number of pages to show on either side of the current page. Defaults to 2 (example: 1 … 3 4 5 6 7 … 10).
type
Allows you to specify an output style. The default is “plain,” which is just a string of links. Can also be set to list (i.e. ul and li representation of links) and array (i.e. returns an array of page links to be potentially outputted any way you like in code).
You can also add query arguments and fragments.

Because the function takes all of the information needed to generate page links, you can use it for pretty much any pagination list, as long as you have some key information, such as the number of pages and the current page. Let’s use this function to generate pagination links for an article archive such as a category or main post index:

// get total number of pages
global $wp_query;
$total = $wp_query->max_num_pages;
// only bother with the rest if we have more than 1 page!
if ( $total > 1 )  {
     // get the current page
     if ( !$current_page = get_query_var('paged') )
          $current_page = 1;
     // structure of “format” depends on whether we’re using pretty permalinks
     $format = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/';
     echo paginate_links(array(
          'base' => get_pagenum_link(1) . '%_%',
          'format' => $format,
          'current' => $current_page,
          'total' => $total,
          'mid_size' => 4,
          'type' => 'list'
     ));
}

Here’s the HTML generated by that code on the first of 10 posts pages:

Here’s a screenshot of the pagination on m62 visualcommunications, built using the em>paginate_links function.

“I Wish Posts Were Called Articles For My Client.”

Have you ever wished you could change the wording of a built-in menu item or notification? If you’re a bit WordPress-savvy, you may have considered generating your own translations file. But you might not know that you can actually “hook” the translation functions in WordPress, capturing their input and modifying their output.

Be careful with this one. The code you put in this hook will run every time WordPress runs a string through its translation filters. Complex cases and conditionals could add a considerable amount of overhead, especially when loading pages filled with translation strings, such as the administrative pages. But if you just want to rename one thing that confuses your client (for example, maybe changing “Posts” to “Articles” for that corporate client who doesn’t “blog” yet), then these hooks can be very handy.

// hook the translation filters
add_filter(  'gettext',  'change_post_to_article'  );
add_filter(  'ngettext',  'change_post_to_article'  );

function change_post_to_article( $translated ) {
     $translated = str_ireplace(  'Post',  'Article',  $translated );  // ireplace is PHP5 only
     return $translated;
}

Redirect Failed Log-Ins

Adding a log-in form to the front end of WordPress is pretty easy. WordPress 3.0 gave us the flexible wp_login_form() function, which displays a log-in form that can be customized with a number of arguments. By default, it will redirect the user back to the current page upon successful authentication, but we can also customize the redirect location.

wp_login_form(array( 'redirect' => site_url() ));  // will redirect back to the website’s home page

There’s just one problem: it will only redirect upon successful authentication! If your idea was to hide the default WordPress log-in screen, then sending users who fail at a log-in attempt back to the default log-in screen probably isn’t ideal. Here’s a hook and some code that you can put in your functions.php file that will redirect failed log=ins to any location of your choosing.

add_action( 'wp_login_failed', 'my_front_end_login_fail' );  // hook failed login

function my_front_end_login_fail( $username ) {
     $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
     // if there's a valid referrer, and it's not the default log-in screen
     if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
          wp_redirect( $referrer . '?login=failed' );  // let's append some information (login=failed) to the URL for the theme to use
          exit;
     }
}

Adding Excerpts to Pages

With the addition of support for custom post types, content types (including the built-in Post and Page types) are more like abstract objects. Each content type can support any number of core features, such as the HTML editor, titles, featured images and so forth. One of these core features is the “excerpt.” By default, Pages do not support excerpts. Did you know that adding excerpt support to the built-in Page type is as simple as adding a single line of code?

add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
     add_post_type_support( 'page', 'excerpt' );
}

Technically, that was a couple of lines of code, but many themes already hook init, so the hook might not be necessary.

Add Body Classes Based on Special Conditions

If a theme is well constructed, then it would use the body_class() function to automatically generate classes for the body tag based on the properties of the page being viewed, like category, category-3, and logged-in.

Some websites may have sections that should share some styling but aren’t unified by any of the default classes generated by body_class. Say we want page ID 7, category ID 5 and the archive for the tag neat to share the body class neat-stuff, so that we can add a number of styling properties to them all without cluttering the style sheet.

Luckily, we can hook the body_class() output!

add_filter( 'body_class', 'my_neat_body_class');
function my_neat_body_class( $classes ) {
     if ( is_page(7) || is_category(5) || is_tag('neat') )
          $classes[] = 'neat-stuff';

     return $classes; 
}

“You Can Have Settings Access, But Don’t Say We Didn’t Warn You!”

Clients often expect full administrative access (and rightly so), including access to settings pages. Let’s look at how we can hook admin “notices” (those warning boxes generated by some plug-ins) to send some warnings to administrative users when they are on settings pages.

add_action( 'admin_notices', 'my_admin_notice' );
function my_admin_notice(){
     global $current_screen;
     if ( $current_screen->parent_base == 'options-general' )
          echo 'Warning - changing settings on these pages may cause problems with your website’s design!';
}

Remove the “Links” Menu Item

With WordPress increasingly being used for full website implementations, the blog roll and links feature is being used less and less. Thankfully, a new, little-known function added in WordPress 3.1 makes it very easy to remove unwanted menu items such as “Links.”

add_action( 'admin_menu', 'my_admin_menu' );

function my_admin_menu() {
     remove_menu_page('link-manager.php');
}

Take Out the Dashboard News Feeds… and Add a New One of Your Own

If you build WordPress websites for clients, then the number of WordPress news feeds loaded by default in the dashboard might be an annoyance. If you’re clever, you might just inject some of your own client’s news.

add_action('wp_dashboard_setup', 'my_dashboard_widgets');
function my_dashboard_widgets() {
     global $wp_meta_boxes;
     // remove unnecessary widgets
     // var_dump( $wp_meta_boxes['dashboard'] ); // use to get all the widget IDs
     unset(
          $wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins'],
          $wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary'],
          $wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']
     );
     // add a custom dashboard widget
     wp_add_dashboard_widget( 'dashboard_custom_feed', 'News from 10up', 'dashboard_custom_feed_output' ); //add new RSS feed output
}
function dashboard_custom_feed_output() {
     echo '';
     wp_widget_rss_output(array(
          'url' => 'http://www.get10up.com/feed',
          'title' => 'What\'s up at 10up',
          'items' => 2,
          'show_summary' => 1,
          'show_author' => 0,
          'show_date' => 1 
     ));
     echo "";
}

Add Your Own Credits to the Administrative Footer

If you build WordPress websites for clients, then you should certainly make sure that WordPress gets its due. It wouldn’t hurt to sneak in a little credit to your agency either.

add_filter( 'admin_footer_text', 'my_admin_footer_text' );
function my_admin_footer_text( $default_text ) {
     return 'Website managed by 10up | Powered by WordPress';
}

Win a Free MacBook Pro and $1,000 in Printing From UPrinting

Grant Friedman — Mon, 09 May 2011 16:00:26 +0000

Advertise here

Hello everyone! Today we’ve got a special treat for you. Our friends at UPrinting are giving away a free 13 inch MacBook Pro (valued at $1,199) and $1,000 worth of printing to 1 lucky Tuts+ reader. To win, all you have to do is answer a simple question and submit it using the form below.

While I am sure most of you are skimming through this text to find details on how you can enter, we would like to tell you a bit more about UPrinting before you do. UPrinting is a socially responsible online printing, marketing and technology firm with a distinct vision and clear approach to helping small businesses grow. It serves thousands of on-demand printing orders online daily, using high-quality printing presses and a robust yet simple and easy-to-use online ordering system, resulting in high-end printing at low costs.

They are also known for high quality print products such as business cards. The print quality is just amazing, clients usually get praised for the extra effort they have put on their cards! As mentioned earlier, they offer a wide variety of options so customers can choose from rectangular to die-cut shapes and gloss coating to matte.

UPrinting.com has earned customer loyalty by offering more customizable options than other online printer. The company is popular for its Free File Review, a complimentary proofing service that requires no upfront payment. UPrinting.com also offers convenient marketing support such as design services and direct mailing to help the small or medium-sized business grow.

Ok, now that you know a bit more about UPrinting, now I am sure you are wondering a bit more about this giveaway. As stated in the intro, UPrinting is giving away a 13 inch MacBook Pro (valued at $1,199) and $1,000 in printing services to 1 lucky reader. To enter, all you need to do is answer the following question and submit it by following the link below.

Which UPrinting print product do you find most useful? Why?

Submit Your Entry Here

* Please note that we will be sharing your name and email address with UPrinting. This means that you may receive emails from them after the conclusion of this giveaway. If you’re ok with this, you may submit your entry by following the link above.

The Prizes

1 MacBook Pro (valued at $1,199) Specs: 13-inch, 2.3 GHz, 2.3GHz dual-core, Intel Core i5, 4GB 1333MHz, 320GB 5400-rpm1, Intel HD Graphics 3000, Built-in battery.
$1000 in printing credits from UPrinting. Valid for one-time use, applicable to printing cost only.

Rules

Fill out this form. Tell us which UPrinting print product you find most useful and why.
You may only enter once. Anyone submitting more than once will be disqualified.
Make sure to enter a valid email address so that we can contact you.
Entries will be accepted until Monday, June 6, 2011 at 11:59 PM, EST.
Giveaway is open to all jurisdictions.
You must be of legal age in the jurisdiction that you reside to enter.
Giveaway is void where prohibited.
MacBook Pro shipping free.
Shipping for printing services is free for U.S. residents. Non U.S. residents must pay for shipping for printing services.
Follow UPrinting on Twitter of Facebook (Optional)
Your name and email will be shared with UPrinting at the conclusion of this giveaway. By submitting your entry you consent to receiving correspondence from them.

Hostetter Designs » Blog

Ruby for Newbies: The Tilt Gem

Video Tutorial

Rendering Templates

Yielding for More Power

layout.erb

sites.erb

Using Other Options

Finding out More

Build your Own JavaScript Library: Premium Series

Included in this Two-Part Series:

Join Net Premium

Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers

Logo Presentation And The Nine Basic Ballet Movements

Self-Identification And Browser Speed Dials

Going Mobile: Stealing A March On The Future

Step One: How To Customize Your Site For Opera’s Speed Dial

The Basic Icon Code

Using Multiple Icons

Using view-mode: minimized

Other Possibilities

Extras

Gallery of Websites’ “App” Icons

Step Two: Apple Plus Opera Equals a Sea Change In Browsing

The Future Is Now

Conclusion

Related Links

Design a forest inspired Tumblr theme in Photoshop

What we’re going to design

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24

Step 25

Step 26

Step 27

Step 28

Step 29

Step 30

Step 31

Step 32

The final product

How to Work with PHP and FTP

Outlining our Objective

When Would I Use an FTP Class?

What is FTP?

Step 1 – Preparation

Step 2 – Setting up the Class

Step 3 – Class Variables

Step 4 – Simple Message Logging

Step 5 – Connecting

Step 6 – Calling the Object

Step 6b – Viewing the Output

Step 7 – Making our First Directory

Step 8 – Uploading a File

Step 9 – Viewing the Files

ftp_class.php:

index.php

Step 10 – Downloading a File

ftp_class.php