townsend.bunksite.com

Tag: design

  • Facebook Announces Design Changes and New Features for Pages

    Facebook Announces Design Changes and New Features for Pages

    Yesterday, Facebook For Business announced a new, more “streamlined” design for Pages, which will begin rolling out this week. In addition to the new look, a new feature called “Pages to Watch” will launch, allowing page admins to monitor and compare their page with that of other businesses.

    Ch-ch-changes!

    Overall, the layout changes to Pages are not terribly drastic, but as with any small change, there will likely come some backlash from the user base. Page administrators have a few new features to look forward to and some adjusting to do when it comes to navigating the platform, as Facebook has rearranged some key features with the design refresh.

    Facebook Changes Design Ecard
    Photo credit: http://www.someecards.com

    Here are some of the notable changes to the design of Pages and how they might affect you:

    1. The cover photo and profile square dimensions do not appear to have changed, though Facebook’s announcement does not specifically list any dimensions.
    2. The position of the profile square has changed slightly, as the cover photo overlaps farther with the profile square than before. Some design changes may need to be made to pages with a design that integrated the cover photo and profile square together.
    3. Page name and website will appear in white typeface, overlaid on the cover photo. It appears that cover photos will automatically contain a darker gradient from the bottom up to accommodate this text, similar to what is in place on Twitter header photos.
    4. The “Like” button has been overlaid with the cover photo (as opposed to the current layout, where the Like button is below the cover photo), which may result in a change to design when the goal is to draw attention to the “Like” button. Some existing Facebook pages with cover photos drawing attention to this button will need to be updated.
    5. Tabs no longer have square icons appearing below the cover photo. Because the position of these has changed, cover photos drawing attention to specific tabs will need to be updated.
    6. The “About the Business” section has been relocated farther down the Page Timeline, below the total Likes.
    7. Other changes directly affect page administrators rather than users. These include:
      • Different placement of key metrics such as ads you’re running, page likes, post reach, and notifications from “This Week”
      • Direct access to your Ads Manager account from the top of the page when an admin is viewing the Timeline
      • Simplified navigation at the top of the page for activity, insights, and settings

    The Design As We Know It

    Facebook's current Page Timeline layout before March 2014 update

    What We Can Expect

    In addition to the cover photo and general header changes, Pages will now feature a two column layout similar to the old version, but with some notable changes. Now, the right hand column features the Page’s timeline content and posts. Facebook for Business says in it’s post that this “means that all of your posts will appear consistently on your Page and in News Feed.” I’m curious about the latter half of that statement, as it’s currently unclear how the layout change will affect post visibility in the News Feed.

    Facebook's new design layout for Pages - March 2014

    The left column will now display information about your business, starting with the total number of likes. According to Facebook’s release, it will feature a map (though not visible in the images provided), business hours of operation, phone numbers, website URL, etc. This column will also feature photos and videos.

    Fancy New Features For Admins

    It seems like most of the changes will simply result in a few painful days as Page admins get used to clicking around the new layout, and finding what they need to manage their pages. A few things that will make our lives a bit easier are the relocation of Page insights and admin navigation to the top of the page. There’s now also a more prominent “Build Audience” button, allowing admins instant access to their Facebook Ads Manager account from the timeline.

    At the top right, Facebook has also added a “This Week” panel, showing you metrics about your page from the last week including the number of ads running, total page likes, post reach, unread messages, and notifications.

    Lastly, the newest and potentially most usable feature is the addition of “Pages to Watch.” This addition will enable Page administrators to keep up with the competition by monitoring Pages of businesses they care about. Other new features in Insights include the opportunity to view engaging posts from Pages you’re watching within the last week.

    Are you looking forward to the changes or dreading the adjustment period? Share your thoughts in the comments below!

  • Hammer Time! Squishing Fonts Into Text With Base64

    Ah, fonts. This binary data increases page load time, file size, the number of HTTP requests. Fonts will also cause the page to jump from a basic font to the included one when the font takes longer to load than it does to display the markup. All these hindrances, coupled with having many images, will begin to deteriorate your page’s load times. However, there’s a way to transfer your page’s custom fonts as plain text to the browser and compile them into a single request. Merging the request for multiple files into one or two requests will decrease your page’s load time and efficiency. Naturally the next question is, “How can I do this?” It’s actually very simple. There is a method for converting binary data into plain text using Base64 conversion. To quote Wikipedia in how Base64 conversion works, you can use the word “Man” as an example:

    Man is TWFu. Encoded in ASCII, M, a, n are stored as the bytes 77, 97, 110, which are, in 8-bit quantities, 01001101, 01100001, 01101110 in base 2. These three bytes are joined together into a 24 bit buffer producing 010011010110000101101110. Packs of 6 bits (6 bits have a maximum of 64 different binary values) are converted into numbers (in this case, there are 4 numbers in this 24-bit string), which are then converted to their corresponding values in Base64.

    Now to a normal person (read: not a programmer) that is not very simple at all, but what it means to you is that you can use a service such as Simple64 and you will get a Base64 string in return. Now, what can you do with this seemingly random bunch of characters? You can use them to make your site load faster. For example: you would normally use @font-face src: url(); property to include a font, correct? You can do this exactly the same way using a tool such as base64fonts.com. Convert your font then include it in an @font-face like so:

    @font-face{
    font-family: "Font Name";
    src: url(data:application/x-font-tff;base64,add base64 here);
    }

    I suggest, for more than one font, using an @import with a CSS file that contains all of your fonts. By storing fonts this way, you don’t have to worry about a content “jump” — where the content is loaded, but then suddenly changes fonts when the font is finished downloading. However, problems do lie therein.

    If you have several fonts, you may appreciate this option: downloading many fonts via a CSS file will cause your content to not appear at all until all styles are downloaded, causing a significant delay in the time it takes for the browser to render the content. However, the topic of whether or not this actually brings any site speed improvements seems to be highly debated. If you have GZip enabled in Apache when the site is served, it is zipped and sent. This would easily improve font delivery, as the font CSS will be zipped along with the CSS it’s inside. However, it’s much harder to deliver a GZip font file faster. As far as I can tell, there is very little speed improvement over standard font files unless you have multiple fonts that you would rather all load at once. In this case, fonts.css file included via an @import would be more efficient.

    Thanks for reading, and go experiment on your site! No definitive benchmarks have been run — what are some of your favorite solutions?