Monthly Archives: August 2011

Offer Files as Download with a@download

by

So the spec introduces a new attribute on a-tags (so called “links” – this may be new to you ;-)) called download (short: a@download – this technique of connecting attributes with tags is written up and documented by Mathias Bynens).

When you link to a file like an image or a PDF-document it will be displayed within the browser normally. The download-attribute in links prevents this behavior and offers the file as a download in your browser.

Definition

The spec allows the attribute for having a value. This value can be a string which defines the name of the downloaded file. As a default the browser takes the file’s original name.

And this is what it could look like in HTML:

<a href="path/to/file/file.png" download="a-nice-image.png">Download this file</a>

The value of the download-attribute overwrites the filename with a-nice-image.png.

The Content-Disposition-header can overwrite the name for the file.

This really nice demo exports a written text and offers it as download (but be aware of browser-support – see below).

Browsersupport

The download-attribute is not supported very good at the moment of writing this article.
Chrome supports it since its version 14. Version 14 is only a view weeks away from the stable release.
Firefox 8alpha (Aurora-channel) does not support it as far as I experienced it. I did not find anything about any intensions when Mozilla will include it.
And the other ones? No support yet!

So, what’s the fallback?

There are other techniques to serve a file that will be offered as a downloads in the browser. For instance you can use an HTTP-Header that’s a mime-type that the browser does not know.

Here is an example with PHP:

header('Content-Type: application/force-download');
header('Content-Disposition: attachment; filename="some-file-name.ext"');

You should then open the download in a new window or tab, or in an iframe to prevent any stupid browser-behavior.

More about this issue here.


Mobile Design is not only Responsive

by

When I read this article by Henrik Eneroth about redesigning Safari’s interface I thought we as webdesigners somehow do this with websites and web-apps. While Apple misses to add different behavior for different browser-sizes it’s a kind of standard to build a website with a special mobile version that looks not like the website on a desktop computer but fulfills the need of someone who visits the mobile version of the website. In Vitaly Friedman’s (Smasing Magazine) presentation “Webdesigntrends 2011” I recognized this nice photo. Vitaly states that someone who visits your page with a mobile device may need other

Read more


CSS3: Auto Hyphenation for Text-Elements

by

In browsers we do not have the ability to automatically hyphenate continuous text. This is an issue when you are using text-align: justify; for instance because the text may look really bad. I want to write about this topic because of the discussion that came up at the HTML5 Boilerpates issue-list and this blogpost at Fontdeck Blog. The specification says: Hyphenation means splitting words to improve the layout of paragraphs. CSS3 Properties CSS3 adds six properties to the list of useful thing. These are: The most important one is hyphens. More to this one later. You can add dictionary-files with hyphenate-resource

Read more


The Difference between Push and Pull

by
Push and Pull

You do know the nice message which is submitted to your smartphone when someone mentions you on Twitter? iOS gets these messages via push. This means the server tells the app something like “Hey look, there’s something new on your Twitter-account”. On Android this is done with push, too. It was introduced in version 2.1.0 in mid of July. Before this release they requested all Tweets via “pull”: The app asks the server “Yo server, somethin’ new here?”. Draw-backs? So where’s the difference besides the obvious? with pull the app has to connect to the server in a certain time-interval

Read more


This is what it’s all about!

by

Sometimes I need some space to share my thoughts. Sometimes this means its just a very short post and sometimes it will be a little bit more. Some kind of tutorial or what ever. Actually I’m a front-end developer located in Freiburg, Germany. Maybe you’ve head of this city: Smashing Magazine is based here, too. I’m currently working as a freelancer at /gebrüderheitz with people like Daniel and Steffen. I’m also engaged in some projects: I do some fancy stuff with Christian (we do Pagetimer), with Daniel I’m developing WordPress-Themes for Themeforest under the name Flipthemes (you should checkout this

Read more