Contact Us
  • UPDATED Facebook Timeline Cover Photo – Profile Picture Integration for Personal Profiles

    As you’re probably aware, Facebook has again changed the layout of the Timeline for Personal Profiles, and has been rolling it out gradually for the past month or so. Yesterday the changes hit my own Personal Profile, which allows me to update my previous tutorial on integrating your Facebook Cover Photo and Profile Picture so that they appear to be part of the same image.

    NOTE: This layout change HAS NOT rolled out to Facebook Pages, only Personal Profiles. To create this effect (and get the Photoshop template) for a Facebook Brand Page, read the Timeline Cover Photo / Profile Picture tutorial and template for Facebook Pages.

    Here’s my new Timeline masthead with the new layout. Notice the “swoops” in the Cover Photo continue into the background of my Profile Picture.

    Updated Facebook Timeline Masthead

    OK, let’s get started!
    Continue Reading…

    Tutorial: How to add Bootstrap Collapse Navigation to your Responsive WordPress Website

    Navigation is one of the trickiest parts of Responsive Web Design. How do you deal with the horizontal menu as the screen size gets smaller? One of the most elegant solutions is to collapse the navigation at smaller screen widths and replace it with an icon that you can click to expand the nav.

    Full size navigation:

    Collapses to this at narrower breakpoints:
    Navigation collapsed at narrow breakpoint - Responsive

    This approach is preferable in Responsive Web Design because the navigation takes up much less vertical screen space and the collapsed-menu icon is understood by most people to be the way the navigation is accessed.

    In this tutorial we will use the Bootstrap framework to create our responsive navigation. Bootstrap is a collection of CSS, jQuery, JavaScript and other components that can be used as a base template for web development. Specifically, we will be using the “collapse” functionality on our WordPress menu.

    Continue Reading…

    WWW vs non-WWW for your Canonical Domain URL – Which is Best and Why?

    Someone asked me about this recently and, although I preferred using the WWW hostname (WWW is not a subdomain, a common misconception.) in website URLs, I wasn’t so clear as to the whys or wherefores about this or whether one was more desirable over the other.

    In doing my research, it became clear that it’s a mini-controversy with ardent proponents on both sides of the issue. In fact, there is www.yes-www.org, a website that argues for including the WWW in URLs and no-www.org, a site that argues for “bare” or “naked” domains, i.e., NOT including the WWW in your site URLs.

    Either way, you should pick one and stick with it!

    WWW vs. non-WWW: The Arguments FOR and AGAINST

    As I mentioned above, there are fairly passionate views about both sides of this issue, and each has its merits.

    It should be made clear, however, that whatever your preference, the choice between WWW and non-WWW has NO impact on your website’s SEO. SEO DOES come into play if you don’t specify a Canonical URL which I discuss later in this article.

    The Argument for using WWW

    There are a couple of technical reasons why you might choose using the WWW over the non-WWW, as well as reasons related more to convention and personal preference.

    From a technical perspective, there are several benefits to including the WWW.
    Continue Reading…

    Create a Cool Profile Picture & Cover Photo Combo for your Facebook Timeline Page (April 2013)

    APRIL 2013 — UPDATED! This post is for Facebook Pages, NOT Personal Profiles. For Personal Profiles, read my tutorial + Photoshop template for Facebook Timeline for Personal Profiles, updated to reflect the Spring 2013 Timeline layout changes.

    Cover Photo / Profile Picture Tutorial + Downloadable Photoshop Template — For Brand Pages

    This article will show you how to create an integrated Cover Photo and Profile Picture for your Facebook PAGE, and I’ve created a Photoshop Template for Facebook Brand Page Timelines to help you in this effort. Just follow the instructions below.

    Want to create a Profile Picture / Cover Photo Integration for your Personal Profile?

    There are some differences in the relationship between the Profile Picture and Cover Photo on Personal Profiles and Brand Pages. If you’re doing this for your Personal Profile Facebook page, read Photoshop Template for Facebook Personal Profile Timelines.

    What is an Integrated Facebook Masthead Design?

    When I say “integrated” masthead design, I mean a masthead where the Cover Photo (the big image) and the Profile Picture (the image inset on the lower left corner of the Cover Photo) seem of a piece, where the Profile Picture appears to be transparent:

    HyperArts Fan Page Masthead

    HyperArts Fan Page Masthead

    Ford Motor Company Masthead

    Ford Motor Company Masthead

    Corona Timeline Cover Photo & Profile Picture

    Corona nicely integrates the Cover Photo with the Profile Pic which also makes a good thumbnail icon

    Continue Reading…

    Single Page Websites and SEO — A One Page Site Can Clobber Your SEO

    Single Page Websites - One Page WebsitesThe art and technology of developing websites moves fast and as technology facilitates cool new ways to display information to users (particularly via AJAX, CSS3 and JavaScript), these approaches are quickly adopted and proliferate quickly. A fairly recent development that has become quite a fad in Web development is the Single Page website, which has been around for a few years but really taken off in the last couple years.

    What is a Single Page Website?

    A Single Page website (aka One Page website) consists of only a single HTML or dynamically generated page, and navigating to different sections of the site — which would normally take a user to a new page — just scrolls down the one page to that particular content’s section. The effect is pretty cool, sort of like being on an elevator and whizzing past the other site sections to arrive at your destination.

    NOTE: Check out Smashing Magazine’s post for a good overview and great examples of Single Page websites.

     
    Continue Reading…

    How to Add PHP Element to a Responsive Navigation in WordPress on Genesis Framework

    Adding a Dynamic Shopping-cart Button to the WordPress Navigation

    While working on a responsive WooCommerce-driven e-commerce website for a HyperArts client, I hit a snag. We’re developing the site in WordPress on the Genesis Framework.

    One of the requested features was to have a dynamic shopping-cart button in the navigation that updates when products are added to the cart.

    WooCommerce provides the bit of PHP needed to make the shopping-cart button dynamic. That’s the easy part. The difficult part proved to be figuring out how to add that PHP button to the navigation.

    Continue Reading…