A Simple, Responsive, Mobile First Navigation

Comment faire une appli ou un site mobile qui marche ? Les nouvelles tendances d’ergonomie et de design commencent à émerger sur les interfaces mobiles. Miratech constate quotidiennement les changements à travers les tests utilisateurs sur smartphones et sur tablettes. Miratech donne ici les deux premières règles à suivre pour faire une interface mobile qui marche. L’ergonomie sur les tablettes est en constante évolution. Dans ces conditions, comment faire une appli ou un site mobile qui marche ? Miratech a déjà mené plus de 400 tests utilisateurs sur des interfaces mobiles (applications ou sites mobiles, sur tablettes ou sur smartphones). Règle n°1 : soignez l’intuitivitéRègle n°2 : les règles du web s’appliquent encore (presque) toutes au mobile Règle n°1 : soignez l’intuitivité 1 – Faire comprendre de façon intuitive comment fonctionne le site ou l’application Les interfaces mobiles sont pour la plupart tactiles. Nous avions d’ailleurs mesuré que l’utilisation d’un iPad génère 4 fois plus d’erreurs que l’utilisation d’un ordinateur.

Comment cibler les mobiles de manière optimale ? Dans la quête de l’adaptation intelligente de design pour tailles d’écran différentes (CSS responsive web design), j’en arrive à adopter la technique suivante : 1- toujours forcer le viewport ainsi (pour écraser la valeur de viewport par défaut) : 2- Appeler les feuilles de styles (écrans de bureau et périphériques mobiles) ainsi : Le principe que j’ai appliqué et mes contraintes sont les suivants : J’ai opté pour deux feuilles de styles séparées afin d’optimiser les performances (pas de chargements inutiles d’éléments pour les cacher ensuite). A tester au maximum, mais cela me semble assez stable. Tout feedback sera vivement apprécié :)

Design Best Practices for the Mobile Web | Onextrapixel - Web Design & Development Magazine Mobile web interfaces take a different sort of design practice, whether they are for mobile websites or native mobile applications. With a different sort of device, and a more noticeably different screen size, we as designers must consider a new set of best practices for design. Any web designer may be noticing the close in the gap between web designer and mobile websites designer. In this article we'll look over the basic best practices for designing for the mobile web, and the major differences in designing for the "traditional web" (via desktops/laptops and all other bigger screens). Limited and Big Navigation Navigation is the number one thing all web designers and developers need to focus on. We know this though, that fact has been paraded throughout all of the previous generations of the web. Oobrang Pinoy If you're going for a creative look, feel free to keep it creative. For mobile website versions, there are a few best practices for navigation to keep in mind: Goldline Owltastic

Détecter si le visiteur vient d’un iPhone iPad iPod Android | eBuildy blog, Web, Adobe flex, JQuery,Flash,Prestashop Avec tous ces mobiles et surtout les forfaits qui vont avec, la part des visiteurs venant d’un mobile est à présent significative. Le hic est que les tailles d’écran proposé (à part le iPad qui n’est pas un mobile…) est souvent minuscule, et donc, très souvent le site visité est inapproprié à la navigation sous mobile. Il existe 3 solutions de détection: Avec un fichier .htaccessAvec un script PhpAvec du Javascript Détection htaccess L’avantage: le visiteur est redirigé de suite sans charger la page par défaut. L’inconvénient: il faut réécrire un site compatible Le principe est simple, dans un htaccess, on va chercher dans le User Agent (String envoyée par le navigateur pour chaque requête HTTP) la présence de mots clés: “iphone,ipod,android” etc etc liste que vous pouvez largement continuer avec palm,smartphone,toshiba,sony,nokia…. bref la liste peut être très très …. longue…Puis si la condition est TRUE, on redirige la requête vers un sous domaine: RewriteCond %{REQUEST_URI} !