Mobile Design is not only Responsive

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.

The difference between a responsive mobile optimized website on the left and a stand-alone mobile version

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 information as someone who visits your page with a “normal sized” computer. That’s why I somethimes – even when I’m designing “responsive” – leave out some elements that are not really nescessary on a mobile screen, e.g. a slider with some nice-looking images.

This approche should be brought to apps, too.
There are some examples where this works already. For instance there is Reeder for Mac, for iPad and iPhone. The desktop-app uses a similar design-pattern as Lion’s Mail for Mac: three Columns. There are more details in every next column you open.

Whatever… You should definitely visit Mr. Eneroth’s post on re-designing the browser-window as it is kinda important and thoughtful for everyone who has some connection to design.

CSS3: Auto Hyphenation for Text-Elements

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 so the browser has a better chance to render your text with the right hyphenation.
  • hyphenate-before sets a minimum number of characters before the hyphenation.
  • hyphenate-after does the same as hyphenate-before but for characters after the hyphenation.
  • hyphenate-lines defines about how many lines a hyphenated word is written at a maximum.
  • with hyphenate-character you can specify which HTML-entity should be used, e.g. \2010.

The main property of this stack is hyphens. It accepts one of three values: none, manual or auto. The default one is manual, where you can set hyphens via ­. auto it the better one for continuous text while words get split if possible and available. And none does not hyphenate at all even if there is a character set for a possible line break in a certain word.

There is one thing you have to be aware of if you use this property: You have to define a lang-attribute on an element that carries text that should be hyphenated.

I made this jsFidde where no lang-attribute is set. It does not work in Firefox. With this attribute set, it works quite good in Firefox, too (thx to 91media).

Browsersupport

Currently hyphens is supported in Safari 5.1 and Firefox 6. For Firefox 6 the lang-attribute must be set as mentioned above. Also it only supports english.
It is not working in Chrome 15.

You have to add some vendor-prefixes for support in browsers:

.element {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

There is a polyfill for this. It’s working with JS and inserts the HTML special-char ­ where it fits. It supports many languages. This polyfill also uses the CSS-property where it is possible.

Edit:
Thanks to Ash for letting me know about my mistake using hyphen instead of hyphens.

Update

I just found this issue at the Modernizr issue-tracker where a test for the hyphens-attribute is discussed. There is a test in the latest GitHub-Version for it. Search for csshyphens.

Update 2: 12.11.2012

-webkit-hyphens has now landed in Chrome Beta.

The Difference between Push and Pull

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
  • this means heigh power drain
  • it may take some time until you receive a message via pull*
  • push may hold an open connection to the server: more data is send

* Site note: I noticed that it also may take some time until a new message is delivered with push technology on iOS or Android (for Twitter-App). If anyone knows more on this issue please share your thoughts.

The way we do it today

If you’re coding an online app you have something where you’re displaying new messages or so. The known approach is to return asynchronously to the server via JavaScript and evaluate the answer. Something like this:

$.getJSON( 'messages.php' , function( data ) {
  // If there is a message
  if ( data.length > 0 ) {
    $.each( data['msg'], function() {
      // Do some fancy stuff with messages…
    });
  }
});

This is “pull”. It is not enough to request the answer of this file once, because this would evaluate the data only once. This is why there has to be a kind of timed event which fires the request in an interval.

This is what it could like with an intervall of 1 minute:

! function pull_request() {
  $.getJSON( 'messages.php' , function( data ) {
    // If there is a message
    if ( data.length > 0 ) {
      $.each( data['msg'], function() {
        // Do some fancy stuff with messages…
      });
    }
  });
 
  window.setTimeout( function() {
    pull_request();
  }, 1000 * 60 );
} ();

As you can see, there is an IIFE surrounding the code. I am doing this in order to call the timeout recursively. For more information please read Ben Almans article on this issue.

What else is possible

This will work totally fine. Let’s take a look at other possible ways.

The Wikipedia article about push sais:

Push technology, or server push, describes a style of Internet-based communication where the request for a given transaction is initiated by the publisher or central server.

With HTML5 the WHATWG introduces The WebSocket API.

WebSocket API

The WebSocket API enables websites and apps to communicate with a server. A polyfill for browsers that do not support WebSocket and as a framework you should definitely check out Socket.IO.

There were some definitions of this API in the spec that had some security problems and so browser vendors implemented some stuff that is outdated by now. There is a kinda “last call” specification for this API which are already implemented in Chrome dev channel (version 14) and Firefox 7. The API is available with a current version of Webkit so it should be in Safari soon.

Server-Sent Events

Furthermore there is the Server-Sent Event which is dedicated to fulfill push notifications. The event is already supported in stable versions of Safari, Chrome, Firefox and Opera. See When Can I Use… for more information.

The Server-Sent Event is a DOM event and can be accessed via new EventSource( file ); in JavaScript, while file is a server-file which publishes the notification. With the onmessage-event it is possible to listen to the changes of notifications.

var source = new EventSource( 'messages.cgi' );
source.onmessage = function( e ) {
  // do something with the notification, e.g. log it in the console.
  console.log( e.data );
}

Conclusion

With the given technologies it is possible to send notifications via push to the client-site. There are polyfills for “older” browsers (like pulling data). It is possible to use these tools today.

If you have any experience with the topic of pushing data, please share your thoughts and ideas in the comments.
Thanks for reading though.

I am going to develop a web-app with a friend of mine. We are using node.js for the server part. I am pretty exited to deal with it. We will definitely need something like a push event. We’ll see what will be best.

Read more and follow-up info:

  • Follow Ian Hickson on Twitter or Google+. He is the editor of the spec for Server-sent Events and The WebSocket API.
  • You should checkout the Modernizr Polyfill Wiki to get some information on polyfills for older browsers with WebSockets aso.

This is what it’s all about!

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 theme) and there is this kinda new project Smart-Students with some other guys. Go check it out if you want to.

So, most of the time I’m developing HTML, CSS and JavaScript. I really like all the HTML5 and CSS3 goodness and try to code “cutting edge”. Sometimes this is not possible in regard to the customers need. But anyway…
My favorite JS library is (as I think you can guess) jQuery and I try to stay up to date with all the new stuff they’re bringing in with every minor release. You should definitely read their blog to get to know the latest news.
Furthermore I really do a lot of stuff with WordPress and TYPO3.

There are some other things I’m doing. Check out my Github-Account.

If you have any questions, feel free to write something.