background preloader

Résolution, tablettes & smartphones

Résolution, tablettes & smartphones
Avec une troisième génération d’iPad, Apple a semé le trouble dans les résolutions d’écrans. En effet l’iPad 3 présente un nombre plus élevé de pixels que la majorité des PC avec une taille d’écran divisé par deux. Je propose donc un petit tableau pour essayer de faire le point sur le parc des résolutions d’écrans. Les smartphones convergent vers une taille physique de l’écran de 3,5 pouces. Cela correspond simplement à la taille d’un objet que peut saisir la main d’un adulte. Les tablettes convergent aussi vers un format « livre » entre 7 et 10 pouces, avec une bordure autour de l’écran permettant de le tenir, pendant qu’on le manipule de l’autre mains. Il est probable que les prochains supports à bénéficier d’un écran « rétina » soit les ordinateurs portables avec des écrans de 11 à 15 pouces et une distance d’usage un peu supérieur à 40 cm. [MAJ] c’est le cas maintenant avec le MacbookPro Retina. Quelques ressources pour se dépatouiller avec la technique Related:  Site responsive

Comprendre le Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial

jQuery Mobile | jQuery Mobile Viewport Sized Typography CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it's shipping in Chrome 20 (canary at the time of this writing). And not behind a flag, it just works. Production usage isn't quite there, but it will be soon enough. Why is this awesome? There are many reasons. There is a such thing as a comfortable line length for reading text on screens. How they work One unit on any of the three values is 1% of the viewport axis. For use with font-size, I guess it's one "letter" that takes on that size, but as we know, in non-mono-spaced fonts the width of a letter is rather arbitrary. 1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger Using them Easy cheezy: Demo Here's a video of a simple layout using vw units for the font-size. Check out the demo yourself (see browser support). Bugs! I bugged it. Browser Support Not just font-size

960 Grid System Comment Apple fait tenir un écran 4 pouces dans le nouvel iPhone ... et résistance améliorée aux rayures dans une vidéo détaillée ! - iPhone 6, 6 Plus, iPad Comment Apple fait tenir un écran 4 pouces dans le nouvel iPhone ... et résistance améliorée aux rayures dans une vidéo détaillée ! Par iSt le vendredi 3 août 2012, 16:22 - Rumeurs iPhone & iPod Touch - Lien permanent Les pièces détachées du probable nouvel iPhone (iPhone 5, iPhone 6 ou autre cf cet article) n'en finissent pas de se répandre dans les rédactions. Cette fois-ci, on dépasse le stade de la photo pour avoir enfin des dimensions ainsi qu'une longue vidéo. C'est ETrade Supply, spécialisé dans les pièces détachées qui nous propose une analyse précise des différences entre la face avant du nouvel iPhone et celle des iPhone 4 et 4S. On comprend vite comment un écran de taille plus importante peut tenir dans une boitier d'iPhone plus haut mais pas tant que cela et on y découvre également d'autres différences (attention, maltraitance d'écran inside ;-) ) : En images : Source Suivez l'actualité iPhon.fr Vous aimez ?

Design d’interface et critère ergonomique 8: Adaptabilité Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question. Critère n°1 : Incitation Critère n°2 : Lisibilité Critère n°3 :Groupement-Distinction entre items Critère n°4 : Feedback Direct Critère n°5: Contrôle Utilisateur Critère n°6 : ConcisionCritère n°7 : Gestion des erreursCritère n°8: AdaptabilitéCritère n°9: CohérenceCritère n°10: SignifianceCritère n°11: Compatibilité Adaptabilité : en quoi ça consiste ? C’est S’ADAPTER aux caractéristiques des utilisateurs (vues, perspectives, raccourcis…) Portail personnalisé Ce critère concerne la capacité du système à réagir selon le contexte, mais aussi selon les besoins, préférences et niveaux d’expertise des utilisateurs. Bonne pratique :

Envie de voir ce que donnerait un iPad Mini à coté de votre iPad 10 pouces ou des tablettes 7 pouces ? Comparaison en images En marge du nouvel iPhone désormais attendu pour Septembre, l'iPad Mini fait aussi du buzz, sans que l'on ne sache vraiment s'il s'agit d'un fantasme collectif ou d'une proche réalité qui pourrait avoir une date de sortie d'ici fin d'année ... Toujours est-il qu'il est toujours possible de rêver un peu pour ceux que cette dimension attire, et c'est ce que l'on vous propose en images, à savoir une comparaison visuelle de ce que pourrait être l'iPad Mini doté d'un écran 7,85 pouces à coté de l'iPad 10 pouces actuel : Et pour se rendre compte de la taille d'un iPad Mini avec écran 7,85 pouces comparé aux autres tablettes, notamment 7 pouces : Peut être une très bonne alternative que cet écran de presque 8 pouces non ? A lire : toutes les rumeurs sur un hypothétique iPad Mini Source Suivre l'actualité VIPad.fr

Ergonomie web : les mythes et légendes ont la vie dure... Malgré le travail acharné de grands ergonomes Web reconnus (Amélie Boucher et Jean-François Nogier chez nous, ou Steve Krug et Jakob Nielsen aux USA, pour ne citer qu’eux), des mythes perdurent en donnant des réponses à l’apparence facile et pratique aux profanes, tout en dépréciant notre démarche au passage. Grâce aux ouvrages de Steve et Amélie dont je me suis inspiré pour cet article, et en y ajoutant mon expérience personnelle, je vous livre ici une courte liste de 12 légendes qui sont encore colportées régulièrement sur l’Ergonomie Web… 1. La règle des 3 clics Ergonomie web : la règle des trois clics Vous avez déjà tous entendu cette phrase : “Pour que ton site web soit facile à utiliser, l’internaute doit trouver ce qu’il veut en moins de 3 clics, sinon il se barre” ou du style… C’est l’exemple typique d’un argument vrai sur le fond mais complètement idiot sur la forme. 2. « Les clients sont stupides » Ergonomie web : “les clients sont stupides” 3. “Round One, Fight !”

Iframe, object & embed responsive Vous venez de finir de coder votre site mais vous vous rendez compte qu'une vidéo Youtube, Vimeo, Dailymotion, présentation Slideshare garde sa largeur fixe et casse la résolution minimale de votre smartphone ou de votre tablette. Il existe une astuce toute simple en CSS qui s'applique aux iframes, object et embed. Démo Partie HTML Le but l'astuce est de définir la largeur et la hauteur dans le css et non dans le code html Partie CSS Petit rappel le calcul du ratio se fait de cette façon : 16/9 = 1,777777777777778 puis le pourcentage 100/1,777777777777778 = 56,2459% Autre exemple avec le 16/10 : 16/10 = 1,6 ce qui donne 100/1.6 = 62.5% Pour que le rendu soit responsive sur votre smartphone ou votre tablette pleine de traces de doigts, il ne faut pas oublier la meta suivante dans la balise head : Il existe une autre méthode qui permet de rendre vos vidéos responsive, FITVIDS.JS.

LaudableApps - Home La fonction calc() en CSS calc() est une fonction CSS3 offrant la possibilité de réaliser des opérations mathématiques en CSS (addition, soustraction, division et multiplication). Compatibilité La compatibilité de cette fonction est encore un peu limitée aux navigateurs récents. Les gros écueils étant les versions Internet Explorer antérieures à IE9, et les anciens Android (avant 4.4). Et ma calculatrice ? Le navigateur peint la page, connaît l'interaction entre les éléments, calcule et interprête toutes les valeurs au sein de leur contexte, qu'il s'agisse de pixels, de pourcentages, de em, rem, pt, etc. Bref, avec calc(), on laisse faire le navigateur faire son boulot, et c'est tant mieux. Petit exemple pratique Prenons une boîte à qui l'on a eu le malheur d'appliquer un width: 100% : Bien sûr, la boîte déborde à présent de son parent puisque sa taille réelle n'est pas de 100%, mais de 100% + 20px (la valeur du padding s'ajoute). Autres exemples Calculs simples Opérations simples concernant les longueurs et tailles :

20 Mobile Apps Inspiration and Design Patterns As a mobile apps designer I’m sure you are often looking for inspiration to ensure that you can deliver constant innovation and high quality to your clients. A really efficient way to get serious inspiration for specific parts of your mobile apps project is looking for web sites showcasing the best apps created be other creative designers. With hundred thousands of mobile apps flooding the market it can be challenging to stand out and I recommend you seek inspiration and look for good elements and combine the top findings into new unique creations. If you are not a mobile apps designer and developer yet I can tell you that there is a great chance you will be one soon. It is all about mobile right now and it is not going to change very soon! As the mobile Internet surfing is constantly increasing there’s a huge trend right now leaving website administrators with an important job to do. Advertisement 1. Mobile Awesomeness is a gallery for mobile websites. 2. 3. jQuery Mobile 4. 5. 6. 7. 8.

Comment tester un site responsive? (partie 1) Savoir si un site développé se comporte bien en responsive est devenu une nécessité de nos jours. Il est donc important de connaître tous les moyens mis à notre disposition pour réaliser cette étude. Deux lignes de conduites (probablement complémentaires) sont à prendre en compte : soit on teste sur des outils simulant le comportement des appareils, soit on teste directement sur les supports que l'on souhaite prendre en charge. Bien évidemment, la méthode la plus fiable reste celle qui consiste à utiliser le smartphone ou autre appareil dont l'éligibilité est à vérifier. Avantages Pas d'installation sur le poste et de ce fait, compatible avec toutes les plateformes. Inconvénients L'évènement Touch n'est généralement pas pris en charge. Nous vous proposons dans un premier temps de découvrir les différentes méthodes de simulations proposées par les éditeurs de navigateurs et des services en ligne. Les solutions des navigateurs Internet Explorer Chrome Firefox Opera Safari Les outils en ligne

Related: