Perfect Dimensions for Sharable Images on Facebook

tin mustard for facebook

 

671 x 430

Those would be pixels, Width by Height

 

this tin mustard resolves

 

top less mustard by tin

Facebook grinds the shit out of images that are uploaded by users.

To put it in nerd parlance, images are resized and reencoded to lower resolutions so that more of them can fit on their servers and in their column style interface.

In this process images lose quality. They can blur, cause artifacting or become illegible due to positioning.

Using these dimensions ensures that Facebook will do what it does and mostly leave intact the original integrity of your masterpiece.

Like so:

Screen Shot 2014-01-01 at 7.03.02 PM

 

671 x 430

 

Screen Shot 2014-01-01 at 7.03.22 PM

 

671 x 430

 

Related articles

Enhanced by Zemanta

Word Art: When Google Voice Translates An Alcoholic

Message left at 1:10 p.m. the day after Christmas:

It’s 8 Donnie, I didn’t get it finished. But So I hope it does getting and The other things. You know, there is that Hi, Good Afternoon. 2 Heavy, and I can’t fit into and The error is 8 Brand New, sweater for you in there and other things, anything that and then lapped was. You knew that I bought. I’m opening for that President of that I’m probably never com back. Yeah my life going on. I’ve, Nate okay visiting today and I didn’t give me any poll with year he gave me. Bill M, at, 88 It’s Man, I love all of you Mormon you’re going to know this, somebody, I hope you realize of it, alright. But is. All Day of Prayer for your Munger and from to use other but and parade. That books, in brother loan. Every Month, and cancel that’s already spread. And we will lose here on this year. 2. We don’t, I need them, it I love you all. Please make 2014 better here for years okay HI. Horton, I miss you so much, goodbye.

 

Enhanced by Zemanta

Audio and Video for Blogging (See: Podcasting)

So whatcha, whatcha, whatcha want? I think it’s right above this sentence.

Last year we had an event focused on podcasting for bloggers. I put together this presentation that has some great questions for those just starting out to get up and running.

Enhanced by Zemanta

The Fishing Out Here

Manhattan

Saturday. I am on
a pier fishing
with a guy named
Sal and a guy

named Frank. November’s
last warm day
is going out
with the tide.

Long Island is brown
this time of year
under a bright,
cloudless sky.

The guys are
from Hicksville.
We cast and bait
for hours on end.

Sal is sober twenty
years. Frank is pounding
silver cans from
his conversion van.

I tell them that
I work in computers.
Frank tells me that
computers are ruining

the world for humans.
They’re better for
efficiency, but not
better for the living.

I throw another
line in the moving
water, let it sink
to the bottom.

- Kris Smith, Nov. 3 2013

Byte-Range enabled and iOS Fails to download media

itunes croncast from nyc

tl;dr version after this synopsis.

the fix for this was to add the following to my .htacces file to force “byte-range” in the header.

<Files *.m4a>
Header set Accept-Ranges bytes
</Files>

so let’s wrap this up:

1. attempted to deliver .m4a audio files to iOS devices as an RSS enclosure
2. RSS enclosure delivery failed
3. tested enclosure path with curl to view headers
4. headers dispalyed “Accept-Ranges: bytes Content-Length: 101 Content-Range: bytes 200-300/45584419 Connection: close Content-Type: audio/mp4″
5. tested podcast feed on iOS again with this verification that the headers were being propery sent
6. failed to download enclosure again
7. added the above directive in the .htaccess file
8. tested podcast feed on iOS again
9. #purewinning

Breezy version for those with time:

Apple, baby, what are you doing to us?

This whole ‘byte-range must be enabled’ for servers that sending enclosures to variance of fragmented podcasting apps that now exist on iOS devices is a bit much.

Like, total over-kill.

But, because we (the royal we) want to have distribution through your network, we have to meet this requirement – that is?after already going through the motions of actually producing content.

I’m here to help – let’s move on!

Feed: http://croncast.com/episodes.rss

Problem: RSS enclosures for audio files in .mp3 format will not download on iOS devices

Examples:

Verizon (iOS7): downloads like a champ – instant playback
AT&T (iOS6 & 7) iPad and iPhone: Error
Wifi (iOS6 & 7) iPad and iPhone: Error

First attempted solution: transcode all .mp3 files to .m4a (in effort to not have to get into code or server settings) and deliver these to ALL iOS user-agent strings

Outcome: total fail – same issue – RSS enclosures will not download even in .m4a

Next Steps:
Tested .m4a header via terminal for proper byte-range information that is required by Apple:

$ curl -I -r 200-300 http://www.croncast.com/1a4/cks-2013-09-23.m4a
HTTP/1.1 206 Partial Content
Date: Tue, 24 Sep 2013 10:28:08 GMT
Server: Apache
Last-Modified: Mon, 23 Sep 2013 22:54:37 GMT
ETag: “52b8001-2b79023-4e714e78d4540″
Accept-Ranges: bytes
Content-Length: 101
Content-Range: bytes 200-300/45584419
Connection: close
Content-Type: audio/mp4

Since this worked, tested again on iOS 6 and 7 – both failed to download enclosure.

Attempted Solution: adding the following to the .htaccess file for this domain

<Files *.m4a>
Header set Accept-Ranges bytes
</Files>

Outcome: Pure Winning.

So, baby, thanks for making this difficult on a guy that is rocking cPanel as a server management. I’m glad I have byte-range enabled but needed to get even deeper into the server to make you happy.

Let’s move forward and make sure that, together, everyone that wants a Croncast episode gets what they need.

Enhanced by Zemanta

Regain Focus On Your LinkedIn Network

Online Service

Over the last few months I’ve been paying more attention to LinkedIn than ever. Analyzing the details of the user interface and how I interact with it.

I found myself getting lost and distracted with new and revised features.

How?

The most used pages (home and individual profiles) are dominated with recommended news from outside my network, jobs, people I might want to connect to and sponsored in-stream posts.

My attention was being divided by content pushed by LinkedIn (viewed by them as added value – also a source of revenue) and the people that I wanted to be up to date with (viewed by me as added value – also a source of revenue).

The information that I’m able to get from my network activity keeps me up to date with my industry and offers me new opportunities to generate income – now or in the future.

Remedies?

I began a search for how to hide the news, sponsored posts and that blue recommended recommendations box that appears above all of our profiles.

Within the site settings – as you will be astounded (not really) – there is no way to remove these from view.

From their perspective I can understand the many reasons for not allowing this. As they were implemented for the perceived benefit of all users. Maybe most users love these features. I don’t.

The Fix: Focus

These were my steps to make my goal a reality. Follow for your own LinkedIn bliss.

1. Install AdBlock in your browser -https://adblockplus.org/

2. Once installed click the AdBlock icon in the browser bar

3. Click options, click the Customize tab, click Edit next to “Manually edit your filters”

4. Paste these filters in:

www.linkedin.com##LI[id="today-news-wrapper"]
www.linkedin.com##LI[class="feed-item linkedin-sponsor"]
www.linkedin.com##DIV[id="suggested-endorsements"]
www.linkedin.com###companiesForYou
www.linkedin.com###groupsForYou

5. Click Save

6. Enjoy the regained focus on your LinkedIn network

 

Enhanced by Zemanta

30 Minute Webinar Outline – The Holy Grail

we really love our customers. really, really love our customers like a lot

Why a 30 minute webinar and not a 60 minute webinar?

Simply put, a 30 minute webinar is a 100 meter-dash and anything longer might as well be the Badwater Ultramarathon in Death Valley.  One of these keeps the attention of an audience and the other . . . well, you know what I am getting at as this sentence teeters on.

There are three parts to a successful webinar on ANY topic: information, personality and outline. Let’s hope you’ve got the first two covered, because I can only help with the last one!

Let’s get to it:

  1. Start Webinar w/ greeting
    • Quick, upbeat and in charge – 30 seconds
  2. Outline the next 30 minutes for the attendees – 30 seconds
    • We’ll be talking about X for  9 minutes
    • Followed by Q & A for 5 minutes
      • Feel free to type your questions in the chat box while the presentation is going, so you don’t forget them
      • We’ll address them during this time
    • Then we’ll talk about X as a review/advanced topics of the session for 10 minutes
    • With Q & A to follow to round out the webinar for 5 more minutes
      • If there are no more questions let them loose
      • Thank them for spending their time with you today
      • Offer your time to them to answer questions after the webinar

*Important*

If you can’t answer a question, don’t fret – stay loose. You are the expert and they will respect you not having an answer right at this moment and appreciate your honesty. You are human too, and this will be friendly reminder for them.

Simply address the question and tell the attendee that you will get back to them after the session and will share what you find with the others in the session.

Get comfortable in your webinar spot with TWO waters.

Good luck!

Enhanced by Zemanta

Tumblr Largest Image Size

It would be safe for me to say that I’ve been on a Tumblr kick for nearly a year. Digging into it, customizing themes and putting all of my photography work on it.

I definitely favor Tumblr over its new step-sibling, Flickr.

If you were to make the switch there is a difference that could be a deal breaker for you:  the maximum size of photos displayed.

Unlike Flickr which will allow you to have access to the original image, Tumblr resizes the original upload to various sizes. Tumblr is not a backup type service.

The largest of these resized copies is a version with maximum width of 1280 pixels. The height is determined in proportion to original width.

My assumption would be that as long as your photo or image meets this width requirement the height could actually be anything that you want. Say, 1280 x 3000 for an infographic, etc. as long as it is proportionate to the resize or lack thereof.

 

Enhanced by Zemanta

How to Remove Tumblr Open In App

open in application mobile

If you’ve gone through all the trouble to find a theme on Tumblr that is responsive or taken the time to modify an existing one that scales, you’ve felt the pain of opening your site on a mobile device to see something that you didn’t add.

At the top of that awesome looking page that you’ve made is a grey bar placed by Tumblr to request that users open the site in their app.

I despise their app. And let’s admit it, you do too. It’s blue, roundy and has too much data on each page.

How to remove Tumblr Open In App

  1. go to your regular Tumblr page in a browser
  2. click on “Customize” on top right
    • you need to be logged in to see this button
  3. scroll to the bottom of the left hand control menu
  4. uncheck the box for “Promote Tumblr”
    • how to turn off open in app tumblr
  5. go to top of control menu and click green “Save” button
  6. done. compare version above to the one below

responsive theme tumblr not in app

 

The reasons for websites to create mobile app versions of their sites are many. They solve problems like storing information locally, a more native experience to the device platform and a controlled environment on the device.

Now these things can be done through the websites themselves. Yes, they need to be designed for different scale, but so did the original app. Apps designed for iPhones need to be redesigned for iPads of both sizes and the same goes for the ever-growing number of Android devices.

It’s a complicated topic, but in the end, the user came to the website to experience the content. These open in app bars, modal windows and roadblocks are unnecessary hinderances to the immediate experience.

Make the first impression the best and don’t waste your time and money on a mobile app and ask site visitors to perform some ancillary function that will result in a different set of challenges to complete the exact same task.

 

Enhanced by Zemanta

Scripps uLive Is Modern Design Done Right

Screen Shot 2013-06-08 at 10.17.36 AM

Scripps Networks, the parent company of HGTV, DIY Network, Travel Channel and others, has launched a new site, uLive, to combine all of these properties. And it is mostly win. I mean, Win – yes, with a capital W.

Episodes, clips and articles are combined on a single homepage that is devoid of complicated navigation. The user is instead greeted with large to medium sized poster images that best represent the content behind them.

I think my favorite part of this experience is that the items ARE NOT BRANDED to which network they come from. The user chooses an image, headline and byline that interests them and the experience begins.

UX Ubiquity Resize to Rule Them All

In an attempt to be an annoying nerd prick, like any jealous type front-end person, I began scaling down the site from my initial laptop view which had the site at full 960 grid.

And, well, I can’t be a prick at all about what they’ve released. What is in the wild is a responsive website that scales all the way down in a graceful manner.

Screenshot_2013-06-08-09-50-29

With this site you’re welcome to go from your largest screen down to the smallest and have nearly the same experience. UX ubiquity across a property is never overrated and should be what front-end designers of consumer products strive for.

This UX ubiquity guides users and allows them to feel comfortable with the content. Design this good, like uLive, is an opportunity to stay with users as they move from home to work to mobile and back home again.

uLive Is Really A Web App

I’m a bit hesitant to call what this team has created a web app. However, this site inherits many of it’s additional navigation features from apps.

At it’s largest size for bigger screens the top level menu shows an icon on the upper left to signify that there is another menu someplace.

Screenshot_2013-06-08-09-51-34

 

When clicked it glides in from offscreen on the left side. This is also present in the smallest size, where a user would expect it on a mobile device.

Design First

Screen Shot 2013-06-08 at 10.21.30 AM

Sites that are developed with design and experience first often have a common problem. Like children that catch chicken pox for the one and only time, design first products on the web neglect IAB ad sizes.

The teams instead begin creating a product that they want. The one that gives users access as quickly to the content and with as little distraction as possible. Currently, uLive exists as this.

Screen Shot 2013-06-08 at 10.21.16 AM

That is until they can shake their advertisers to create custom ad units that fit this design. Unlike smaller players that attempt  this it shouldn’t be a problem for Scripps – they have the juice.

Conclusion

uLive is a 9.2 out of 10 in my book. If you’re a fan of their network programming this site is going to be a welcome addition to your viewing.

(via Scott Campbell on LinkedIn)

Enhanced by Zemanta
%d bloggers like this: