New Web Trends: Just Because You Can, Should You?

I came across a well-written article in Smashing Magazine a few days ago: Responsive Design Frameworks: Just Because You Can, Should You?

In web and UX design our ultimate goal is to make users’ web experience easier, but apparently, many of us have forgotten this primary goal.

Take flat design for example – flat design is supposed to make the UI simpler. I see many websites in which all UI elements have solid background colors, trying to be “flat”, but there are tons of elements mixed and blended together, with various opacity. It just makes the UI a lot more confusing. I’m a fan of flat design, but I believe it’s not necessarily better than realistic design for every website. (Check out Flat vs. Realism, if you haven’t already!)

flat-vs-realism

Thanks to CSS3 transitions, we don’t see any sudden change in color or opacity anymore! It’s all smooth and transitioned. But is it always a good thing?
Almost every website has different hover color for links than default link color (a:hover in CSS). Why is it so? Basically, because when user rolls over that text, you want to let him (or her) know it’s a link. Many websites now change the link color on hover with a transition, which defeats the whole purpose. because it’s not easily perceived anymore! I usually prefer to set my CSS3 transition (if there is any) like this:

a:not(:hover) {
	-webkit-transition: color 0.7s;
	-moz-transition: color 0.7s;
	-o-transition: color 0.7s;
	transition: color 0.7s;
}

Furthermore, most of new websites use a CSS responsive design framework, like Bootstrap. They usually use the full package, and then use 20-50% of it, while overwriting half of what they actually use. So it just increases page size and load times. 😐 I used to work for someone who really liked Bootstrap, so I used it a lot. But now I use it only in projects that have a tight deadline, and usually customize the package so that it only includes the stuff I need.

It’s a blessing that web coding languages are improving so fast and browsers are more consistent now (I opened one of my recent web projects in IE and it worked smoother than Chrome! How crazy is that!), but we need to pay more attention to UX now. As they say, “with great power, comes great responsibility”!

 

How does Facebook Sharer select Images?

Today one of the clients said when he shares his product in Facebook, the image shared next to the link is a wrong image. It was actually another image in that webpage, but it wasn’t a picture of that particular product.

I tried to find a way to specify the images that are going to be shared in Facebook. I found a good answer in the stackoverflow website. I’m going to quote that answer here.

Follow the instruction provided below:

Facebook has a set of open-graph meta tags that it looks at to decide which image to show.

The keys one for the Facebook image are:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

and it should be present inside the <head></head> tag at the top of your page.

If these tags are not present, it will look for their older method of specifying an image: <link rel="image_src" href="/myimage.jpg"/>. If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 50px by 50px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

Can I specify multiple images to allow the user to select an image?

Yes, you just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog:
Facebook Share Screenshot

I specified the appropriate image meta tags. Why isn’t Facebook accepting the changes?

Once a url has been shared, Facebook’s crawler, which has a user agent of facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), will access your page and cache the meta information. To force Facebook servers to clear the cache, use the Facebook Url Debugger / Linter Tool that they launched in June 2010 to refresh the cache and troubleshoot any meta tag issues on your page.

Also, the images on the page must be publicly accessible to the Facebook crawler. You should specify absolute url’s like http://example.com/yourimage.jpg instead of just /yourimage.jpg.

Can I update these meta tags with client side code like Javascript or jQuery? No. Much like search engine crawlers, the Facebook scraper does not execute scripts so whatever meta tags are present when the page is downloaded are the meta tags that are used for image selection.

Adding these tags causes my page to no longer validate. How can I fix this?

You can add the necessary Facebook namespaces to your tag and your page should then pass validation:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">  
(Source)

 

It worked for me. The only problem is that when Facebook gives the option to choose the image to share, it only shows the first 3 images I gave it. I couldn’t find any way to solve that so far.