7 ressources pour développer un site mobile Il semble que le grand sujet du moment est “faut-il développer une version mobile de son site ou développer une application native ?”. Je ne vais pas tenter de répondre à cette question car pour l’instant il n’est pas possible de répondre oui ou non à cette question de manière ferme et définitive. Cependant je vais présenter différentes ressources qui pourraient aider des développeurs lors de la création d’un site pour les appareils mobiles…. Les frameworks que je vais présenter permettent de se lancer dans la création d’une version mobile d’un site à destination des appareils mobiles. 1. iWebkit iWebkit est un framework de développement de sites web à destination des mobiles Apple (mais que l’on peut également adapté pour d’autres mobiles). Le framework est très bien documenté et les démos sont convaincantes. Ce framework fourni un ensemble de fichiers css et JS pour styliser du contenu HTML généré par une webapp. 3. webapp-net 4. jQTouch Vous avez peur du poids de ce plugin jQuery ? 6.
15 Responsive CSS Frameworks Worth Considering Taking the next step of our responsive layout coverage (we recently published the articles Responsive WordPress Themes and jQuery Plugins to help with Responsive Layouts), today we are taking a look at responsive CSS frameworks that we feel are worth your consideration. Just like most CSS frameworks, all of the frameworks below will help you rapidly develop sites by eliminating the need to write basic CSS styles yourself, as you would expect. But, on top of that, they also come with a responsive layout helping you to quickly and easily create mobile-specific sites. Less Framework 4 The Less Framework contains 4 adaptive layouts and 3 sets of typography presets, all based on a single grid, composed of 68 px columns with 24 px gutters. The idea is to first code the Default Layout (992 px), and then use CSS3 media queries to code several child layouts: 768, 480, and 320 px. Foundation MQFramework Golden Grid System The Golden Grid System is a folding grid system for responsive design. Columnal
iPhone CSS—tips for building iPhone websites 31 January, 2010 With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it's only ever on one resolution and on one OS. N.B. The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. To start The first thing to remember when developing a site to be displayed on an iPhone is that it is very similar to designing a print stylesheet. Some people don't agree with browser sniffing, but you need to detect the iPhone somehow. This first bit of code is a PHP browser sniffing snippet, the actual CSS we'll use is not brought through via any server side code, we'll use some CSS media queries for that. <? We want people to save your site to their home screen... <? The home screen icon
Nouveau site de l’agence Nealite : retour d’expérience sur le responsive design Le challenge Refondre son site web est toujours un défi pour une agence web. Notre précédent site fêtant son 3ème anniversaire, il n’était plus très en phase, ni avec notre discours, ni avec nos méthodologies et commençait à être technologiquement obsolète. Avec l’arrivée du HTML5, des CSS3 (media queries, @font-face, multi-columns, animations…) et l’expansion du javascript (à travers jQuery ou Mootools…), nous possédons désormais les outils nécessaires pour pouvoir mettre en ligne simplement des sites à la fois agréables, accessibles, rapides et portables. Avec cette refonte, nous avons voulu construire un site qui soit en phase avec notre image, nos méthodes de travail et notre vision du Web. Faire les bons choix Trois points cruciaux ont émergé de ces discussions : A partir de ces principes, notre équipe s’est installée dans une war room dédiée afin de pouvoir collaborer efficacement et régulièrement. Responsive Design, mais jusqu’à quel point ? De 0 à 680px – Mobiles et tablettes
10 Free Wireframing Tools for Designers This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here. Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. Wireframes make it easier to communicate ideas, reduce scope creep, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing. This post highlights 10 of the best free wireframing tools available, including standalone applications, web-based tools and browser add-ons. If you're partial to a particular wireframing tool available for free download, let us know in the comments. 1. Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application. As it's web-based, it means you can create and share mockups from anywhere. 2. 3. 4. 5.
Avantages et Inconvénients du Responsive Web Design Présentation du Responsive Design Si vous vous intéressez aux évolutions du Web, en voici une qui fait beaucoup parler d’elle. C’est le responsive Webdesign soit une savante formule qui permet de rendre son site ergonomique et adapté aux supports mobiles et aux supports classiques. Chaque évolution amène son lot de questions. Il est intéressant de savoir si un site 3 en 1 permet de faire des économies ? Quels sont les impacts sur la chaîne et les temps de production pour ce type de site ? Le responsive design permet d’adapter le contenu d’un site sur différents supports. Le Responsive Design fait appel aux nouvelles règles et propriétés du CSS 3 comme par exemple les Media Queries, micro formats … Ces normes sont supportées par la majorité des navigateurs. Les Inconvénients des Sites Internet en Responsive La conception est plus importante dans les projets de sites responsives Les Formats pour le Responsive WebDesign Connaissances techniques plus importantes Une créativité limitée
Décliner un site pour iPhone Un téléphone qui tombe à point nommé ! Le smartphone d’Apple est à la mode depuis bientôt deux ans, ça tombe bien il a permis de révolutionner la consommation d’Internet, et de faire entrer de plein pied l’accès Internet nomade dans le monde personnel comme professionnel. Le développement d’applications iPhone suit des guidelines mises à disposition par Apple, d’un point de vue technique mais également ergonomique et fonctionnel. Dans le grand nombre d’applications disponibles sur l’AppStore, de nombreuses applications mettent par exemple en place une navigation qui se base sur le composant adéquat mis à disposition dans le SDK. Pour l’utilisateur, c’est l’assurance d’une appréhension plus simple et plus intuitive de l’interface. Dans le même esprit, l’accès rendu facile et nomade à Internet permet aux utilisateurs d’iPhone de multiplier leurs séances de navigation dans un contexte pratique et/ou ludique. Faire d’un utilisateur nomade un internaute efficace La navigateur iPhone à la loupe
How to Design a Mobile Responsive Website To build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website? With mobile internet users set to surpass desktop internet users in the US by 2015, with tablets becoming more popular, and even with TV internet usage increasing, it’s important for companies to provide a great user experience for all their visitors no matter what device they’re on. Why should you design a responsive site? There are many options to consider when a client asks for a mobile solution for their website, and the suitability of these options depend on the business requirements and budget; it’s also important to consider any existing solutions or sites they already have. So why would you decide to create a website this way? You’re starting from scratch Developing a whole new website or web application is a challenging process. The process