Designing for a Responsive Web The web as we know it is changing. In the past, designers and developers only had to concern themselves with one medium: the computer screen. In recent years, however, a plethora of fully internet-enabled devices with scores of different shapes and capabilities have cropped up, meaning that we now have to design our websites to fit comfortably in as many screen sizes, shapes, and resolutions as you can possibly think of. Our old fixed-width layout approach is out of the question now. So what do we do? What is Responsive Web Design? The idea of Responsive Web Design, a term coined by Ethan Marcotte, is that our websites should adapt their layout and design to fit any device that chooses to display it. In his book, the aptly titled "Responsive Web Design" he outlines the three parts to a responsive website: A fluid gridFluid imagesMedia queries If you only read one of those, make it the last one, written in May of last year. The Designer's Role Grid Systems and You Thinking With Proportions
Responsive web design : Les autres usages Un site web « adaptatif » Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. A cette époque, il n’était pas rare de trouver deux versions d’un site internet (La version Desktop et la version Mobile). Aujourd’hui, la multiplication des types de terminaux fait qu’il n’est plus possible de réfléchir de manière binaire (Si l’utilisateur n’est pas sur ordinateur de bureau, alors il est sur un téléphone portable). Une nouvelle tendance est née, celle de la conception adaptative (Responsive Design) . Les autres usages du « Responsive Design » E-mail adaptés L’approche Viewport
Manipulando a metatag Viewport O viewport é a área onde seu website aparece. É a área que você se preocupa se o vai ou não caber na hora da criação. O tamanho do viewport depende muito da resolução, tamanho do monitor e dispositivo utilizado. Hoje existe uma gama muito grande de aparelhos com telas de tamanhos variados. Isso é interessante porque possibilita a boa visualização de websites que não estão preparados para mobiles. A tag meta viewport Mesmo assim os smartphones tem telas pequenas podem dificultar a leitura se fizermos um sistema planejado para grandes resoluções. A sintaxe é muito simples e deve ser colocada, como sempre, na tag head : Os valores de content são os que seguem abaixo: Como usar A tela abaixo não tem nenhuma tag de viewport definida. Veja que o texto do elemento está bem pequeno. Define que a largura do viewport será 320px. Se inserirmos uma imagem ou um objeto maior que a largura do viewport, uma barra de rolagem é criada. Agora com escala de 1.5: Agora com escala de 2:
Responsive design – harnessing the power of media queries Webmaster Level: Intermediate / Advanced We love data, and spend a lot of time monitoring the analytics on our websites. Any web developer doing the same will have noticed the increase in traffic from mobile devices of late. Over the past year we’ve seen many key sites garner a significant percentage of pageviews from smartphones and tablets. Our commitment to accessibility means we strive to provide a good browsing experience for all our users. Our pages should render legibly at any screen resolutionWe mark up one set of content, making it viewable on any deviceWe should never show a horizontal scrollbar, whatever the window size Stacked content, tweaked navigation and rescaled images – Chromebooks Implementation As a starting point, simple, semantic markup gives us pages which are more flexible and easier to reflow if the layout needs to be changed. Liquid layout is a good start, but can lack a certain finesse. Viewports When is a pixel not a pixel? A media queries example Conclusion
Designing for Touch Screen | What Creative Design Agency Now, this post was supposed to go out about two weeks ago, and since then it seems that every designer under the sun has written on the same subject – That’ll teach us for being lazy. Nonetheless, we decided to publish it anyway, just in case anyone missed any of the other great posts out there… By now you should all have heard of the iPad, and if not then you must have been living under a rock for the last few months! 1. CSS hover states (such as a:hover) are not supported. However, this can cause a few problems, especially concerning drop-down menus – which is quite a major issue for many websites. Alternatively, for a drop-down menu to be obvious on a touch device (because you can tap-to-open some of them) there must be a link / button to indicate that the menu expands, such as a small arrow. 2. 1024 x 768 It’s not dead and it’s making a come back! 3. 4. The (unwritten) standard is for sub-menus to be on the left hand side of a web page. 5. iPad Rotation CSS 6. By Chris Kemm
Developing your eye for design – Jonathan Z. White – Medium A simple strategy Here are some things that you can do to train your eye. Browse design inspiration Keep a folder and save designs that inspire you over the course of the week. At the end of the week, look through your folder and ask yourself some of these questions. You don’t have to answer each one of those questions for every design, but do keep them in the back of your mind. What originally intrigued you about this design? For interface design you can look at sites like Dribbble, Behance, and Awwwards. Looking at only interface designs will put you in an insular design environment. Also consider studying the designs of other cultures. Practice looking While there are tons of directed exercises that you can do to train your eye, just spending a couple extra minutes a day observing and trying to understand the world around you goes a long way. Figure out what catches your eye and why. One thing that I’ve found useful for developing my eye is photography. Create a feedback loop
Responsive Web Design Guidelines and Tutorials Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
Adaptative - Applications Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après. Guides Les fondations du design adaptatif Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes. Mobile avant tout (Mobile first) Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges. Technologies Outils Modernizr Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées. css3-mediaqueries-js Un polyfill en JavaScript pour assurer le support de media query aux anciennes versions de IE (5+.) Voir aussi Graphiques dans les sites adaptatifs
Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. In short, our flexible design works well enough in the desktop-centric context for which it was designed, but isn’t optimized to extend far beyond that. Becoming responsive#section2 media types
CSS Media Queries & Using Available Space We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types
In Search of the Ultimate User Experience - Marvel Blog Part I: Experience is everything The origin of imagination Around 70,000 years ago, Sapiens figuratively ate an apple from the Tree of Knowledge, and a mutation occurred that scientists still can’t explain to this day. This ‘mutation’ led to the invention of boats, oil lamps, and the bow and arrow. According to Harari, many archaeologists and researchers attribute these accomplishments to a revolution (or mutation) in Sapien’s cognitive abilities. That’s right. Sapien’s ‘creative gene’ kickstarted the collective imagination and led to the birth of storytelling, tools, weapons, and the formation of new social structures. Making things up not only saved our species from extinction, but opened the spigots for a new world of makers and users. Makers and users There are two roles people take on when it comes to products and services—either you’re the maker or you’re the user. Initially, our species’ survival depended on this relationship. It’s simple. Take the wheel, for example. Imagine that.
The top 25 responsive web design tools | Web design Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and more. This onslaught of connected devices is just the beginning, and we're bound to see people accessing the web from a greater number of devices in the coming years. It's futile to create a dedicated web experience for every single device class out there, and the need to create a smart, flexible, adaptable web experiences is becoming more apparent every day. Responsive/adaptive/multi-device web design (whatever you want to call it) is here to stay. Just because responsive design is becoming necessary doesn't mean it's easy. We're tasked with creating experiences that are simultaneously aware and agnostic of device context. Innovative tools These are formidable problems we're up against, but thankfully the web design community is up to the challenge. 01. 02. This is where Jetstrap comes in. 03. 04. 05. 06. 07. 08. 09. 10.
Responsive Images in CSS The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for <img> and the <picture> element. But how do the capabilities that these things provide map to CSS? CSS generally wasn't really involved in the responsive images journey of the last few years. That's for good reason: CSS already has the tools. srcset in CSS In HTML, srcset is like this (taken from the Picturefill site): One image for 1x displays, a larger image for 2x displays. There is a difference here, though. Resolution media queries are fairly well supported: There is another way as well, that is actually closer to how srcset works, and that's using the image-set() function in CSS: It has a little less support than resolution queries: It's much closer to srcset, not only because the syntax is similar, but because it allows for the browser to have a say. There is no perfect 1:1 replacement for srcset in CSS, but this is pretty close. sizes in CSS Sample: An example: