development

Make your site more sociable with OpenGraph markup

July 6, 2015 By Sophia Lucero

These days, before people click on your site they will probably see it through a link shared on your social network of choice, such as Facebook, Twitter, Google+, and so on. Usually these sites are smart enough to extract descriptive information about your page and display that so followers already get a good idea of what they’d be clicking on, but wouldn’t it be great if you could optimize that information to ensure you get more engagement?

With a bit of HTML knowledge (and perhaps some programming knowledge, depending on what website templates you’re using), you can make more sites more “sociable” by adding these tags to the <head> portion of your site. Text in {CURLY BRACES} are placeholders for the values you need to insert.

og:url

<meta property="og:url" content="{URL}">

Use this to show the canonical url of your page, free from various query variables or tokens. If you use a CMS like WordPress, this can be automatically generated for posts and pages through a function like the_permalink()

og:title

<meta property="og:title" content="{TITLE}">

Use this to show the title of your page. By default sites like Facebook usually get the text from the <title> tag, displayed on the browser title bar or tab name, but that usually contains extra stuff like the site description. With a custom OG tag you can opt to modify that to your liking.

og:type

<meta property="og:type" content="{TYPE}">

Use this to indicate the type of content your link is all about. Of course all links are websites, but they can also be more specific things like articles, products, books, movies, restaurants, and more.

og:image

<meta property="og:type" content="{IMAGE}">

A lot of times the images that displays with your link can encourage or prevent people from clicking, so make sure that you define this. There are optimal sizes for what Facebook, Twitter, and Google+ recommend, so be sure to check their individual documentation on that.

og:description

<meta property="og:type" content="{DESCRIPTION}">

Similar to title and image, you’ll want to optimize the description of your webpage since there is only so much text social networking sites can include in their link previews.

Closing note: on Twitter and Testing

When you’ve plugged in the above tags, you’ve pretty much guaranteed Facebook and Google+ to display your website links the way you customized it. However, Twitter has a couple more tags you might want to integrate, including twitter:site, where you can plug in the Twitter handle of your website, and twitter:creator, a different person or organization that is behind the website.

Twitter also has content types called Cards, which lets you specify the most appropriate layout for a link preview—whether it’s a summary card, a summary card with a large image, an app card, or a player card. Each card type emphasizes different data, so choose wisely or switch things up as you see fit.

Finally, it’s always the best practice to test things before rolling them out. Check out the links below for more detailed documentation and tips for sharing content on each social network:

Web Development Browser Extensions

April 11, 2011 By Hyde

Now a days browser vendors are competing with each other on who has the most and fastest version update. With CSS now a standard technique, the competition is also on on who supports the most selectors and uses the best syntax. Have you seen the gradient syntax? Safari 4 really made an art of it, luckily they came to their senses in Safari 5.1:

[css]
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
}
[/css]

Code by CSS Tricks

Now that CSS has become so extensive and fully implemented, web browsers extensions are unmissable if you regularly work with HTML and CSS. Extensions have become a standard in most developers their browsers, that there are even more niche ones like for JSON, jQuery and SQLite.

I collected the most used web developer extensions for all 5 main browsers. I’m not an Opera or Internet Explorer user, so I might have missed a good one. Firefox is my main browser and Chrome secondary. I don’t use Safari either, only for testing. I would love to make Chrome my main browser, but I can’t find a nice theme for it, like GrApple which I use with Firefox.

Whether you work with code everyday or not, these extensions are a must in your browser, they’ll save you some headache along the way.

Firefox 4

Firefox 4 Web Developer Extensions

Web Developer

Firebug

Screengrab

It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. It captures Flash too!

Simple color picker plug-in for Firebug.

Safari 5

Safari Web Developer Extensions

Validator

This is an extension to validate your (X)HTML, CSS and RSS feed with the Unified W3C Validator (Unicorn).

User CSS

User CSS is a Safari 5 extension that will easily enable you to override stylesheets for any web page for anything—from changing fonts, colors to hiding ads and more!

Safari Developer

Safari Developer implements features like window resizing, element highlighting, stylesheet disabling, markup validation (and much more).

Chrome

Chrome Web Developer Extensions

Web Developer

Firebug Lite

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.4 multi-line scripts in the context of the current web page.

Eye Dropper

Resolution Test

Opera

Opera Web Developer Extensions

Formats and highlights JSON data loaded from file or server.

Internet Explorer

Internet Explorer Developer Toolbar

Web Accessibility Toolbar

Firebug Lite

Friday Focus 02/11/11: Awesomely Animated

February 11, 2011 By Sophia Lucero

This week’s featured sites are exactly what the title says: brilliant in-browser animations. Happy Friday Focus!

Designs of the Week

Clouds and droplets and artsy illustrations everywhere. You will enjoy all the details. The slide-out header navigation is a little mystery-meat but the links in it are found elsewhere too.

Not much content yet, but the concept is striking. Apart from the bubbling background, the flipping flags also looks neat.

All the goodness of canvas, CSS3, web fonts, and SVG in one useful app. You can hit play to travel through timezones around the world or just pick at will.

I like the playfulness of what’s supposed to be a corporate website, but still quite grounded in its boxiness.

Most animations are vertical or horizontal, but this one rotates. Another playful, freeform look.

Social Media Weekly

CSS – The New Bulletproof @Font-Face Syntax
“Since the beginning of the ‘webfont revolution’ we’ve relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that’s clear and compatible with future browsers?”

CSS – The Shapes of CSS
“I made a page with the shapes you can make with a single HTML element and CSS.”

User Experience – Judging User Happiness
“We’ve found that our users are much better at telling us when they’re not happy with, and when we’re not doing something right, whilst the positive stuff is just silently enjoyed.”

Programming – Development for Designers
“This two-part series discusses how designers and developers can benefit from becoming more familiar with each others skills and I’ll offer some advice on how to get familiar with the “other side.””

Design – Pixel perfect vector nudging
“Most of the time I want to nudge in whole pixel increments. Here’s how you can do that, without zooming out to 100%.”

5 Places for Dev Help

August 25, 2009 By Lorraine

Because being a designer comes before being a developer for me, I’m the first to admit that there’s a lot I need help with when it comes to programming. Which is why I’m so grateful for the wealth of resources on the web. Internet, I love you. If you’re looking for some good development help and advice, here are some places to turn:

Stack Overflow
Tops the list for me, and anyone who uses Stack Overflow knows why. Their FAQ reminds users to be “nice and honest”- and from my experience, almost all the developers helping out here are. Questions and answers cover a range of programming topics, from C# to jQuery to plain old HTML. The first place you should look with your burning programming questions.

yahoowiki

Yahoo! Answers and WikiAnswers
Sure, there’s a lot of junk on Yahoo! Answers, but the truth is that I’ve found help on quite a few development topics here. To go directly there, go to Computers & Internet » Programming & Design. Another similar site is WikiAnswers, which I’ve found deals more with general programming questions rather than specific ones.

Ask Metafilter
It costs $5 to sign up for Metafilter, and you have to be a member for at least a week before you can post a question in Ask Metafilter- so this might not be the best place to go if you’re not a member and need your answer immediately- but I do think it’s worth it. Whether or not you decide to join, browsing their archives is free, and you’ll find a lot of information tagged Programming.

CodeProject
This site has enough development related articles to keep you busy reading for a long, long time- and they’re mostly well-crafted and easy to understand. A search through their Forums always produces results for me.

Google Groups
Finally, this is where I turn to if I’m looking for more one-on-one help with a development topic. For example, when I first started accessing the Twitter API, I joined the Twitter Development Talk Google Group, and what I’ve learned there has been invaluable. And because it’s all done by email, it feels less public.

Where do you turn for programming and development help?

Outsourcing Development

July 22, 2009 By J. Angelo Racoma

You might be working developing the best idea ever. You code days and nights until you get your app working like it’ocial media supposed to. But suddenly you hit a roadblock. You want it to have the best look and feel possible, but you’re not really a designer.

Or perhaps you might be designing the best WordPress theme, but you have no idea how to market it. Will it gain traction just for its inherent qualities? Maybe. Maybe not. If you were an expert at social media marketing, too, then maybe you stand a chance at competing with the already-established premium themes out there.

If you’re working alone, then chances are you might not always be able to take care of all aspects of development. I know some crack developers who, time and again, have sourced out part of their projects to other developers and designers. Some would assign projects on a per-module basis, and then assemble these into a bigger project once complete. And since I opened my own SEO company with a few partners, I’ve handled a few inquiries for various jobs, like back-end development, theme design, marketing or content. It’s a matter of filling in for expertise that other people might need.

In some cases, it would cost you a lot of money to have experts do the work for you. I know designers who charge thousands of dollars just for a WordPress theme. But then again, I know some who would be happy to do a theme for $500 or less. The lower end of the pricing scheme is usually a result of being situated in places with lower costs of living. I know this for a fact, because I enjoy this situation myself. Compare Tokyo, New York and Manila. $500 goes a long way in Manila, but would only get you a few lattes and sandwiches in New York, and probably an order of sushi and sake in Tokyo. Okay, maybe I’m exaggerating here, but my point is that cost of living is relatively cheaper in some places.

Sometimes it’s a question of quality. Would you entrust programming and design work to people overseas? More importantly, would you entrust these to people who are complete strangers? And sometimes there are quirks and nuances that you have to consider. Is someone living in Mumbai familiar with the colloquialisms used by someone living in the west coast USA? This might not be an issue when you’re paying someone to convert your PSD graphic into CSS. But if you’re ordering articles, blog posts or other content, this would play a big part, especially if you’re building content meant to be read by humans (rather than, say, search engines).

Have you considered outsourcing development? It might be a good business move, but only if you can do it right. Outsourcing does not mean you can just pass on a task to someone else in its entirety, without much monitoring and interaction. Similarly, micromanaging outsourced work would be too much work for you, that you would probably be better off doing it yourself. Strike a balance. Build trust and keep communication lines open.

Have you outsourced development work before? Share your experiences.