background preloader

Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples

Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples
Designers have it tougher now than before. We not only have to design for stationary devices, but also mobile devices like the tablet and smartphones, and since we are talking about a lot of different screen sizes and resolutions here, it’s a huge task to shoulder. In light of this, responsive web design could be the best solution. It offers more than just a simple mobile template; instead, your entire site layout is designed to be flexible enough to fit into any possible screen resolution. With such a fluid design scheme there are obvious benefits and drawbacks. How Responsive Design Works When I use the word “responsive” in terms of web design I mean that the entire layout responds based on the user’s screen resolution. Responsive design is all about creating a homogeneous experience regardless of the browser or device screen size. Why Design for Mobile? It has become evident that more users are going mobile, and not just for on-the-go web browsing either. (Image Source: bradfrostweb) Related:  Graphisme & Ergonomie / UX & UIResponsiveresponsive design

A better Photoshop grid for responsive web design Posted on 20 January 2012 • 90 comments In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Here’s the PSD. But what about our precious 960 grids? I should point out here that I’m not proposing a new framework. Caveat 1: margins A small caveat is that the 1000px grid assumes you’re not bothered about gutters on either side of the container, which might bother some people depending on the way you do your column margins. Caveat 2: rounding errors I’d love to know if you find this useful! © 2005 – 2014 Elliot Jay Stocks.

Creating a Responsive WordPress Site Your Mobile Users Will Love As more and more people get online using a variety of mobile devices and screen sizes, it’s essential that your WordPress site is responsive and device-agnostic. Heck, you may even be reading this article on your phone right now. (How does our site look? Okay? Good.) In this post I’ll cover everything you need to know to give your site a responsive layout, but also ensure it gives your visitors the best possible experience on everything from 27-inch UHD desktop displays to 4-inch iPhone 5s screens. Specifically, I’ll look at: Responsive theming, either by downloading a responsive theme or by making your own theme responsive.Making it easy for people to consume your site’s content on all devices.Responsive navigation and the ways you can make it easier for users to move around your site on different devices.Responsive forms, making sure they’re easy to fill out on all devices.Responsive images: making sure your images are no larger than they need to be for different screen sizes. 1. 2.

Responsive design with a view full site link | Justin W. Hall A warranted preface on media queries and responsive design Does a responsive design with a view full site link really make sense? As developers (and UI/UX designers) shouldn’t we be using the media queries to present information in a pleasant and effective manner for each and and every screen size? So what’s up? Get your CSS in order It’s common practice to put responsive CSS at the bottom of your style sheet. Add link to “view full site” Nothing fancy here. I absolutely positioned it at the top of every page. Display none? Remove responsive design, change viewport and store prefs in HTML5 storage We have three ‘things’ to tackle here. So, get the responsive style sheet and the meta viewport tag. See it in action.

Tips and best practices to develop responsive websites Start with a template Sure, you can start coding from scratch, but there’s a lot of interesting free templates that will make you save a lot of time. Among others, I recommend Mobile boilerplate, The 1140 grid and Skeleton. There’s a lot more than those ones, so feel free to google “responsive web design template” if you want more. Working with fluid grid based layouts Fluid layouts are an important part of a good responsive layout. To get the size in percents from a size in pixels, you have to take the element’s width and divide it by the full grid size. This is why it is interesting to work with a 1000px grid. 1000 is a round number, and it is easy to calculate that 24% of this size will be equal to 240 pixels. Flexible images A very important aspect of a responsive layout is how images can adapt to the size of their parent container. A better solution is to use context-aware image sizing. And the related CSS: For more info about this technique, check out this article. Get inspired

Responsinator HTMLBOY - Stop using the viewport meta tag (until you know how to use it) In the early years, when the smartphones came to Earth, they knew the Internet wasn’t prepared for them… so they expected every website to be around 1000px width (980px on the iPhone) and zoom out the website to fit into the screen. And so the <meta name="viewport"> was created, basically to tell those smart dudes that your website was prepared for them. Nowadays, some popular front-end frameworks like HTML5 Boilerplate, Twitter Bootstrap and other pre-made templates include this meta tag by default –which is great for responsive web design, but very harmful for “traditional” web design. This is how it works. Briefly If you are not coding a responsive site, just don’t use any meta viewport. Any additional parameters in the content attribute usually screw up user’s experience. EDIT: As Brad Frost correctly pointed out, you should also use the viewport meta if you are building a dedicated mobile site, so it’s not just for responsive sites. Device-width Initial-scale Maximum-scale Combo breaker

Responsive design, quels bénéfices pour les éditeurs de site web ? Pourquoi adopter le responsive design. Quels bénéfices apporte cette nouvelle technologie aux éditeurs de site web ? État des lieux et perspectives. Article rédigé par Stéphane Cholet. Le contexte de consommation de l’internet nous pousse inévitablement vers un mode de consommation en mobilité. Devant ce constat, les éditeurs tendent à adapter leurs sites pour une utilisation sur les nouveaux supports. Le responsive design, qu’est-ce que c’est ? Le responsive design devient de plus en plus en vogue sur le web. Pour illustrer ces propos, je vous invite à vous rendre sur le site bien connu du monde du web : Smashing Magazine. Version Desktop HD : Version Desktop classique : Version Tablette : Version mobile : La technologie derrière le responsive design Le responsive design repose sur les media queries des feuilles de style. Pour chaque breakpoint, il est possible de masquer certain bloc d’information afin de mettre en avant les contenus les plus pertinents. Les bénéfices du responsive design

Des images à la une responsives pour votre theme Wordpress - Kune.fr Depuis quelques années, et avec l’utilisation de plus en plus importante des terminaux mobiles pour naviguer sur internet, les designs responsives sont devenus monnaie courante. Cette tendance n’est d’ailleurs pas prête de s’arrêter, car de plus en plus de sites deviennent responsives. Seulement voilà, il existe encore et toujours quelques barrières à l’utilisation optimale du responsives et nous allons voir comment travailler sur un point particulier, les images, dans un thème WordPress. Dans cet article, nous allons donc aborder un problème récurrent dans la création de design responsive, les images. Navigation sur mobile Lorsque l’on pense responsive, la première chose sur laquelle on travaille est le gabarit de la page. Même si cette étape est primordiale, il faut également se mettre à la place de l’utilisateur dans son utilisation générale. Il est donc important d’optimiser au maximum les images pour que celle-ci n’utilisent pas tout le forfait de vos visiteurs. Conclusion WordPress:

How to build a responsive HTML5 website - a step by step tutorial Rating: 8.6/10 (1247 votes cast) Required knowledge level: intermediate In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch. I tried to include as many different features as possible, so we will be dealing with a jQuery slider, CSS3 transitions and animations, CSS Media Queries and so on. This part of the tutorial will show you the HTML structure and the required scripts in a step by step tutorial. The second part will then show you how to style it using CSS3 features to create this stunning HTML5 cross-browser responsive website. Preview HTML5 responsive website Download Download it from GitHub7kB93356Times downloaded Please note that this tutorial is made for people who already have an intermediate knowledge level. First of all let´s have a look at the basic structure of our website. Creating the head – Doctype and Meta Tags In our head section let´s set the charset to UTF-8 which is also easier now in HTML5. <! That´s it already!

Ergonomie et référencement : les meilleures pratiques pour 2013 Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie. Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur… 1. Les conventions et règles à respecter dans une démarche ergonomique pour le haut de page (header) Vous remarquerez que beaucoup de ces éléments relèvent désormais du bon sens. Ci-dessous, les éléments pour le footer : Les conventions et règles à respecter dans une démarche ergonomique pour le bas de page (footer) Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptées et appliquées par tous en 2013. Les conventions et règles à respecter dans une démarche ergonomique Christian Bastien & Dominique Scapin, chercheurs en ergonomie des IHM à l’INRIA ont procédé en 1997 à la synthèse de plus de 900 recommandations en 18 critères regroupés en 8 dimensions. 2.

Webdesign adaptatif : 5 astuces indispensables Depuis l’année dernière, la tendance est au webdesign adaptatif. Avec la sortie du nouvel iPad et l’explosion du marché téléphone mobile, cette tendance devrait doit devenir la norme d’ici la fin de l’année. Si les travailleurs du web ne plongent pas dans ces nouvelles pratiques, je parie sur un beau IE6 revival pour leurs sites internet. Voici 5 conseils pour vous aider à créer un design de qualité, accessible et adaptable. Vous apprendrez dans cet article : Comment cacher du contenu pour les petits écrans ? Avant de commencer la lecture de cet article je vous invite à visiter le site smashing magazine. Non, c’est du webdesign adaptatif. Pour maîtriser la technique de changement du contenu installez vous confortablement et prenez des notes ! Cacher du contenu Au XXème siècle, le contenu était optimisé pour une taille d’écran de 1024*768px. Utilisez la propriété CSS display:none en fonction de la taille de votre périphérique. L’effondrement du contenu Structure HTML Comportement Javacript

Related: