Guymon » mobile

YAMB - Yet Another Mobile Boilerplate

admin — Wed, 21 Dec 2011 08:50:58 +0000

Noch ein responsive HTML Boilerplate was ich mir mal ansehen werde:

YAMB is a small set of tools and best practices that allow web designers to build responsive websites faster. Websites built with YAMB will be optimized for screen widths between 320px and anything. Resize your browser to check it out.

YAMB includes features that are requested by the clients all the time:

Fluid grid layout.

Drop-down menu with possibility of unlimited sub-levels or/and mega subs.

For small screens drop-down menu is automatically converted into select box.

Responsive image slideshow with captions.

Responsive images in content part of the website

Possibly related posts (automatically generated)

Keylogging mit dem Accelerometer

admin — Wed, 17 Aug 2011 07:56:34 +0000

Spannend, Forschern ist es gelungen über die DeviceOrientation API einen Keylogger zu programmieren, der zu 70% korrekt die Tasten erkennt.

Two researchers from the University of California Davis, Hao Chen and Lian Cai, have successfully divined the keystrokes on an Android on-screen keyboard by measuring the wiggles, jiggles, and vibrations picked up by the device’s accelerometer. This is significant because the data from accelerometers is not thought of as a potential attack vector, and is thus freely available to any application on any smartphone or tablet.

Possibly related posts (automatically generated)

Responsive Images with CSS3

admin — Sat, 02 Jul 2011 12:14:51 +0000

Nicolas Gallagher diskutiert eine weiter Möglichkeit Responsive Images zu realisieren. Er setzt auf CSS3 statt auf JavaScript.

This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function. (…) The source image is “mobile optimised” and the urls of larger size images are included using HTML data-* attributes.

Das HTML sieht dann so aus:

Und das CSS so:

@media (min-device-width:600px) {
 img[data-src-600px] {
 content: attr(data-src-600px, url);
 }
}
@media (min-device-width:800px) {
 img[data-src-800px] {
 content: attr(data-src-800px, url);
 }
}

Sehr spannend auch wenn im Artikel noch auf einige Probleme hingewiesen wird.

Possibly related posts (automatically generated)

Responsive Images

admin — Wed, 29 Jun 2011 13:38:16 +0000

Responsive Images ist ein Ansatz der filamentgroup Bilder passend zum Context zuladen. Im Kern ist das ein “Mobile-First” Ansatz in dem die Desktop Bilder via JavaScript nachgeladen werden.

The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this could enable developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

Im Quellcode sieht das so aus:

Ganz spannend was sich im Bereich Responsive Webdesign gerade so tut.

Possibly related posts (automatically generated)

Funkzellenauswertung

admin — Tue, 21 Jun 2011 18:56:33 +0000

Aus der taz:

Die Dresdner Polizei hat bei den Antinaziprotesten im Februar dieses Jahres die Handyverbindungen von tausenden Demonstranten, Anwohnern, Journalisten, Anwälten und Politikern ausgespäht. (…) Dabei erfasste die Polizei über einen Zeitraum von mindestens viereinhalb Stunden sämtliche Anrufe und SMS-Nachrichten, die bei allen Personen ein- oder ausgingen, die sich in der Südvorstadt aufhielten. (…) Von ihnen allen liegen den Behörden jetzt die Handyverbindungsdaten vor. Offiziell sollten mit dieser groß angelegten Überwachungsaktion Personen gefunden werden, die zuvor Polizisten angegriffen hatten. In mehreren Fällen wurden die Handydaten aber für andere Ermittlungen zweckentfremdet.

Possibly related posts (automatically generated)

Mobile Sites mit Drupal

admin — Tue, 24 May 2011 15:55:41 +0000

Elly Jonez gibt einige Tips für die Erzeugung von Mobile Seiten mit Drupal.

tinySrc (wird in dem Artikel erwähnt) werde ich mir mal ansehen:

If you’re designing web sites for mobile, you need to make sure your graphics work on thousands of differently-sized screens. Let tinySrc take care of the hard work.
You provide the URL of a large image, and tinySrc dynamically shrinks it down. Simply provide the address of the image, indicate how you want the image to display, and tinySrc will do the rest.

Possibly related posts (automatically generated)

jQuery Mobile Tips

admin — Wed, 11 May 2011 07:36:19 +0000

Einige jQuery Mobile Tips von Patrick McNeil

As with any new technology, getting started is often the hardest part.

With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library.

Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome.

Possibly related posts (automatically generated)

Responsive Design: Data Tables

admin — Wed, 27 Apr 2011 22:04:37 +0000

Chris Coyier stellt einen Lösungsansatz für Responsive Data Tables vor:

The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each “cell”, we’ll use CSS generated content (:before) to apply the label, so we know what each bit of data means. (…) This is just one potential solution to the problem to data tables on small screens. It’s not perfect.

In jedem Fall eine interessante Lösung für Tabellen auf kleinen Screens.

Possibly related posts (automatically generated)

Mobile Forensics

admin — Fri, 22 Apr 2011 09:40:03 +0000

Die Firma cellebrite bietet mit dem UFED Physical Pro ein Gerät mit dem man von gängigen Mobiltelefonen Textnachrichten, GPS-Daten, Photos, Videos, und was sonst noch so zu holen ist, bequem herunterladen kann.

Utilizing UFED’s simple and field-proven user interface, a complete high-speed hex dump of the phone memory is delivered without the need of cumbersome PC drivers. Critical data such as user lock codes, and deleted information such as text messages, call history, pictures, and video are sorted and retrieved by Cellebrite’s Physical Pro engine.

Laut netzpolitik soll das Gerät bei der Michigan State Police bei normalen Verkehrsstreifen und -kontrollen zu Einsatz kommen.

Possibly related posts (automatically generated)

Media Queries or Separate Mobile Web Sites

admin — Tue, 05 Apr 2011 07:59:48 +0000

Jason Grigsby konstatiert: CSS Media Query for Mobile is Fool’s Gold und denkt die Entwicklung von seperaten Mobile Sites ist der “bessere” Weg.

I know separate mobile web sites are a pain to develop. We have a lot of infrastructure to build to make the mobile web go, and I’m going to be writing more about that soon. But there are good reasons why we need separate mobile web sites.

During Ethan’s interview on the Big Web Show, some time was spent discussing how sharing links from the New York Times doesn’t work the way you would hope. If you send a link from the mobile site and someone opens it on their desktop browser, it is still formatted for mobile.

The conclusion drawn from this during the podcast is that CSS media queries might be a better solution because there would only be one URL, and it would work for both desktop and mobile.

Here’s some hard numbers to consider from a YSlow examination of the New York Times desktop and mobile home pages: (…)

As you can see, the mobile web site has a fifth of the HTTP requests of the desktop version and is 583K smaller. That’s over 90% smaller and significantly faster on a mobile device.