Le responsive web design ou comment améliorer l’expérience utilisateur Avec la multiplication du nombre de supports permettant de surfer sur le web, la question de l'ergonomie des sites internet peu importe le navigateur et le type d'appareil utilisé est au cœur des préoccupations actuelles. Le responsive web design est pour beaucoup la solution miracle pour universaliser un site web. Décryptage de cette évolution attrayante du Web ! Le responsive design, définition et enjeux Les usages web ont fortement évolué depuis plusieurs années. Concrètement, comment ça marche ? Le responsive design repose sur trois composants clés :Des requêtes de média (media queries) : il s’agit de critères en CSS3 qui permettent d’adapter dynamiquement le design en fonction des caractéristiques de chaque support utilisé et de la taille d’écran correspondante.Des grilles fluides : il s’agit de concevoir une interface composée de blocs en unités relatives, cette conception modulaire permet de jouer sur la composition de la page en fonction de la largeur de l’écran.
Web design: 6 tendances fortes pour 2014 L’année 2014 commence à peine que de nouvelles tendances dans le monde du design se profilent. Le Web Design Ledger dresse ainsi le tableau des tendances qui marqueront le webdesign cette année, parmi elles: Le Flat Design: c’est la tendance qui s’est le plus imposée en 2013. Apple l’a utilisé dans iOS 7, en mettant par la même occasion le « skeumorphisme » (son opposé) au placard. Il s’agit ici de se débarrasser de tout effet de profondeur pour éviter une impression de superflu visuel. La typographie expérimentale: désormais les graphistes se lâchent avec les polices, l’espacement typographiques etc. Les menus déroulants: pour une meilleure expérience de navigation, les menus déroulants sont de plus en plus utilisés. Le défilement infini: encore une fois c’est la simplicité qui est recherchée. Des couleurs simples: en 2014, de nombreux sites devraient revoir en en partie leur charte graphique. Le reponsive design: il a été très utilisé en 2013 et ce n’est sans doute pas fini.
Les 5 commandements du Web Design Internet a tellement bouleversé la façon dont on socialise et consomme en l’espace d’une dizaine années, qu’il est difficile aujourd’hui d’imaginer un monde sans Web. Outil générique pour toute marque dès le début des années 2000, le site web est rapidement passé du statut simple vitrine statique à plateforme d’expérience digitale, déclinée sur tous les écrans. Mais au fait, c’est quoi un site Web, en 2013 ? La définition que l’on peut lire sur Wikipédia a pris quelques rides et rappelle plus le doux bruit des modems 56K que l’étendue des possibles offerte par le Web 2.0: « Un site ou site web est un ensemble de pages web hyperliées entre elles et accessible à une adresse web. » Plus qu’une collection de pages, il s’agit surtout d’un environnement digital, à la fois informatif, interactif et communautaire. Bref rappel (subjectif) de l’évolution de la toile en quelques dates clés : À l’aube des années 2000, tout s’accélère. Années 2010 : ça y est, on est connecté, partout, tout le temps.
La page de livraison : comment l’optimiser ? Suite de notre série, Optimisons notre tunnel de commande, j’en arrive à la page de livraison. [Retrouvez aussi 7 trucs pour une page de confirmation qui fidélise et Abandon de panier : pourquoi tant de haine ? ] Plus ou moins compliquée, selon les marchands (allez donc faire un tour chez 3 Suisses, par exemple), la page de livraison n’est pas non plus dans le tunnel de commande la plus impactante en termes de transformation. Deux cas peuvent néanmoins se poser : L’utilisateur est sur la page de livraison pour passer commande. Quels sont les facteurs influençant la livraison ? Le délaiLe prixLe lieuLa concurrence Comprendre les besoins de vos utilisateurs pourra également vous aider à comprendre comment moduler votre offre. Évidemment, c’est un conseil qui ne concerne pas la page de livraison, mais bien le prix de la livraison. Aux Etats-Unis, quasiment tous les sites proposent la livraison gratuite. Les prix sont souvent cachés ou écrits en tout petit.
iNoobs: Process of Designing a Website | Part 5 Design Welcome to the fifth part of Inspired Magazine’s mini-series on the process of designing a website (check out Part 1, Part 2, Part 3 & Part 4). The design of a website is generally considered to be the largest portion of the web development process – and it involves a great deal of time and work, but as you’ve seen it makes up only 1 part of this complete 8 part series. So, while you shouldn’t minimize the role design plays in your own development structure, understand that the other parts involved are equally important. The design phase of the process of building a website involves taking your wireframes and laying on top colors, imagery, and other elements. Web Design & Photoshop Generally speaking – for a web developer photoshop is too much. There are plenty of people out there that don’t use Photoshop, they instead use Gimp, or Fireworks, or Corel Draw, but Photoshop is the standard and in the long run, because it is the standard simply staying in the eco-system will save you time.
Le Community Management, un nouveau m?tier ! Nous avons eu le plaisir d’assister le 18 Janvier dernier au WorkShop organisé par Osereso.com, sur le thème du Community Management. Voici le résumé de cette conférence. Community Management – Osereso View more presentations from OSERESO. Avec internet les internautes peuvent devenir les créateurs et les acteurs de la communication au lieu de la communication Top Down qui prédominait avant l’émergence du Web. Il y a une multitude de communautés qui ne sont pas forcément reliées entre elles, avec des internautes qui peuvent évoluer d’une communauté à l’autre (selon l’âge, les passions, la mode, l’actualité…) ou être totalement étanches les unes des autres. Il faut donc adopter une nouvelle manière de communiquer, connaitre son envirronement (identifier où se font les échanges), entrer en contact avec les internautes et animer une communauté, tout en travaillant sur la durée. Quelle différence entre blogueur et Community Manager ? Quel est le rôle du Community Manager ?
iNoobs: Process of Designing a Website | Part 4 Wireframe Welcome to Part 4 of Inspired Magazine’s mini-series on the process of designing a website (check out Part 1, Part 2 and Part 3). In our day-to-day iNoobs series we write about many of the beginning technical elements of web design, but in this 8 part series we’re discussing everything you need to know about the process of designing a website. What is a Wireframe? A wireframe is a sketch of various sections of your site. This sketch shows where (and what) content will go on each section. More complicated sites may have many more wireframes. Are Wireframes Necessary? I used to not create wireframes when developing a site. Wireframes are a great way to illustrate, and plan, the design of the site. Wireframing & Clients I thought I would throw a little more information in about working with clients. Reduces Time – It will save you time on the end design period. Tips For Wireframes Map Out Major Sections – Map out major sections before hand.
OnePageMania - A Gallery of One Page Websites iNoobs: Process of Designing a Website | Part 3 Content Welcome to the third installment of the iNoobs’ Process of Designing a Website series (check out Part 1 here and Part 2 here). Some people say “content is king” others say “content is queen” personally I don’t like to think about content as having genitalia and wearing a crown, but hey… I have problems with personification. Content - Be Thy King or Queen, Sexy We Still Be Regardless of what gender YOUR content is (what is this guy saying….) -understand its importance. We’ve written before about the importance of writing/content, and my idol Bruce Turkel has a fantastic post on the matter titled “deth by a thousand kutz,” but let me try to be as blunt as possible: You are a reflection of your content. Let me tell you a quick story. I like to write. I thought I was a good writer. I banged out some copy for my company website. As soon we changed the words on our website, contacts went up 100%. We didn’t spend another penny on marketing, advertising, or PR and we doubled our leads!
iNoobs: Process of Designing a Website | Part 2 Sitemap Welcome to the second installment of the iNoobs’ Process of Designing a Website series (check out Part 1 here). That last sentence makes me feel like I should be taking off my jacket and shoes and slipping on a sweater like Mr. Rogers. Today we’ll be discussing the creation of a sitemap. Before we get there, let’s recap the total 8 step process: Develop site plan – Use Case Development (optional)Create SitemapContentWireframingDesignTechnicalTestingLaunch What is a Sitemap? You’ve probably heard the term used before, and I can promise you’ve seen a link to “sitemap” on every major website you’ve visited. A sitemap is a break down of all of the sections, subsections, pages, and information on your site. Here’s a very simple example of a business website’s sitemap: This business is involved in the home maintenance industry. HomeAboutServicesLawn CarePool MaintenanceContact And we’re done! More Sitemap Examples! We were just working on a sitemap for a client with a large website. Page Sitemap
Process of Designing a Website: Part 1 - Site Plan In this multi-part iNoobs article we’ll be discussing, from start-to-finish, the process of designing (or constructing) a website. We’ve gone over a few of the elements in previous articles, but now it’s time to put it all together. To start we’re not going to worry about anything technical, we’ll dive into how to code html and css, and use photoshop in other articles/series, for now we’ll concentrate on what I consider to be the more important aspects, the planning, execution, setup, and marketing. This first article will cover what you need to do when planning a website. Before we get to planning let’s list out ALL of the steps required to execute a website this will be your guide for this article and the next to come: Develop site plan – Use Case Development (optional)Create SitemapContentWireframingDesignTechnicalTestingLaunch Planning a Website Insert Corny Website Planning Image I worked at a marketing agency years ago that churned out websites. Let’s get to the plan!