The Square Grid - A simple CSS framework for designers and developers Une feuille de styles de base pour le Web mobile Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation. Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}. L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels. Préambule : fixer le Viewport
Make Your Own Google Buttons Creating the Standard Buttons Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection. The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. Scaling the Buttons Because these buttons are generated entirely with vector objects and borders they can be scaled to any size. We can use both -webkit-transform to scale the image up directly, outside the DOM (as in example 1) or by increasing the button dimensions, padding and font-size (as in example 2). Scaled Button Example 1: A button scaled using a transform, class="scaled" Large Button Example 2: A button scaled using a class="large" with more padding, larger font size. Buttons with Color
960 Grid System Technologies HTML5 pour un web mobile plus simple Digital and Paper Prototyping Tools - protomoto from Paper & Equator Grid Designer 2 If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book. On the Columns tab, you can start your design in two ways: Fill in the number of columns, total width, gutters and margin widths, all specified in pixels - then press the design button. The grid preview on the Columns tab will display the widths of each area, in pixels. Use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.
TENDANCES 2011-2012 – MEDIAS SOCIAUX/WEB MARKETING Portfolio item posted on Vendredi, juin 10th 2011 at 19 h 51 min Face à l’évolution accélérée des nouvelles technologies et d’Internet, les médias importants ont pris l’habitude de publier plus tôt leur palmarès des tendances à suivre durant l’année. Au printemps dernier, les magazines Trendwatching et Courrier International, entres autres, ont publiés leur numéro spécial sur les tendances à surveiller pour 2011/2012. Tout au long de l’année, à travers mes blogues et mon blogroll, mes fils Twitter et Facebook, j’ai régulièrement relayés des billets intéressants sur le sujet. Sans faire l’unanimité, les différents médias, ou les différentes agences, qui se sont risqué(e)s au jeu des tendances se recoupent assez souvent dans leurs observations. Je vous propose donc une liste des 10 tendances qui reviennent le plus souvent à travers les plus importantes publications : 1 – Marketing mobile : applications mobile, m-couponing, codes QR, géolocalisation, paiement mobile Lire :
Browser sketch sheets for Web Designers | Sneakpeekit Quickly design awesome website wireframes and mockups on our Sneakpeekit Browser©. We provide a large sketch sheets collection with many different canvasses, grids and PSD grid templates. Any sketch sheet is a ready-to-print A4 PDF template. We have included PSD Photoshop grid templates too for quickly converting your sketch in a graphic mockup. Free License: Feel free to download and use our templates for personal projects with attribution back to sneakpeekit.com. Remember that you may not sell, distribute or offer for download our files on other websites. 4-up browsers Freehand 3/4 columns browser Wireframe browser 960px 978px 980px 992px 1140px This sketch sheet has been created for designers who are at the very start of a project and don’t want to waste too much paper. An other great browser mockup containing a generic 5px grid. Sneakpeekit Pad For designing responsive layouts of your websites or Pad / iPad applications. Sneakpeekit Mobile Sneakpeekit Wireframe Advertise
YAML Builder | A tool for visual development of YAML based CSS layouts