A bit of a rant by Jeff Atwood, but I basically agree with everything. The sooner companies stop obsessing over building apps when they don’t need them, the sooner native apps and the web will benefit.
A good post with good data which strongly suggests that serving CSS from a separate cookieless domain is actually worse for performance, as it will block rendering while it does the extra DNS lookup.
A long post from Yoav Weiss about his idea/proposal for a responsive images container file format. I’d love to see something like this get off the ground.
As good a case as I’ve ever heard for progressive enhancement in a single paragraph. Sadly it’s likely to fall on deaf ears for the most part.
This post from the gov.uk team caught my eye the other day, and in particular this quote (which got bounced around Twitter a lot):
We prioritise rigorously based on evidence of user need, and this particular feature has been queued for a long time because zero end users have ever requested it, and all users in several rounds of guerrilla testing were able to share GOV.UK links to social networks easily by copying and pasting them.
Nothing surprising there; users aren’t demanding this feature because they can already do for themselves what this feature does. However, having buttons right there on the page removes a little friction, and the visual prompt could encourage more people to share the page — that would surely be good news for almost any site.
The trouble is, using the embedded widgets for social sharing (e.g. the Twitter “Tweet Button”) is a bit of a performance problem.
I tested this quickly by measuring the performance of a page containing only the embedded widgets for Twitter, Facebook1, Google+ and Pinterest. If you care about front-end performance, you won’t like the results2:
As well as the performance problem (which in my opinion is a deal-breaker on its own) there is also privacy to think about — all of these widgets track the user to one degree or another, and as distaste for this sort of thing becomes more common, you don’t want to be seen as complicit.
Happily, it is possible to have social sharing buttons without these downsides, because although they’d very much prefer you to use their custom embedded widgets, the four social services I mentioned a moment ago all offer a way to share content via a good old-fashioned URL with query string parameters:
||Pin It Button|
These URLs will redirect the user to the normal/mobile version of the service as appropriate, so whether your site is responsive or you have separate sites, the URLs will always be the same.
Using these URLs, the markup for a social buttons module will look something like this:
<div class="sharethis"> <h2>Share this</h2> <ul class="group"> <li><a class="twitter" href="https://twitter.com/intent/tweet?url=http://davidgoss.co.uk/about&text=About+David+Goss&via=davidjgoss&related=davidjgoss">Twitter</a></li> <li><a class="pinterest" href="http://www.pinterest.com/pin/create/button/?url=http://davidgoss.co.uk/&description=About+David+Goss">Pinterest</a></li> <li><a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://davidgoss.co.uk/about">Facebook</a></li> <li><a class="googleplus" href="https://plus.google.com/share?url=http://davidgoss.co.uk/about">Google+</a></li> </ul> </div>
As for styling, you have a blank slate, so you can do whatever is best for your site. This way, the buttons won’t look awkward next to one another or stick out from the rest of your site’s design. If you want to include icons, all the popular sets and fonts have them, and if you want to get the brand colours right, here’s a cheat sheet:
If you need inspiration for the styling, several designers on Codepen have come up with great concepts:
With the performance and privacy downsides now removed, adding these social buttons to a site should be a lot more palatable than before.
Facebook makes this difficult; unlike the other three services, you have to be logged in to a Facebook account (which I don’t have, so I had to use my wife’s) in order to generate a share button. This seems like a needless hoop to make developers jump through. ↩
In fairness, these widgets have been improved a lot. If I’d done this exercise a couple of years ago, the results would undoubtedly been much worse. ↩
Lea Verou is tackling the notion that writing CSS doesn\’t make you a developer, and I fully agree. It\’s a testament to the design of CSS that it\’s accessible to just about anyone, but it takes a developer to extract the most from it.
This is a nice vision from Anne van Kesteren, but reading it makes me feel a little uneasy. As proponents of the web, we shouldn\’t be too inward-looking and get absorbed in our own web-focused world. The web and native platforms/apps have different strengths and weaknesses and there will always be a place for both — there doesn\’t have to be a winner.
Marking up and styling
<table>s has always been an interesting problem for me, and here Harry Roberts explains his clever method of normalising table layouts on a complex page.
A good run-down by Steve Souders of the prefetching and prerendering techniques now available to us in modern browsers. Some of this is really trivial to implement but could make a site noticeably snappier for users.