background preloader

How to Approach a Responsive Design - Upstatement Blog

How to Approach a Responsive Design - Upstatement Blog
So I’ve got a confession to make: When we started working on the new Boston Globe website, we had never designed a responsive site before. This shouldn’t come as some huge shock. I mean, raise your hand if you’d built a full responsive site back in November 2010. (You can put your hand down now, Mr. Here at Upstatement, we experimented with how to solve design and layout problems within a responsive framework. Ready? Choose Your Weapon Before laying down a single pixel, there was an important decision to make: What design program to use? Eventually design would be done directly in the browser — there’s no better tool for interactive design, especially when you’re working with fluid layouts (more on all that later). So we lined up the usual suspects from Adobe. Hands down, the answer was InDesign. Even better, InDesign’s internal logic parallels that of web design and development. InDesign stylesheets InDesign’s master pages palette Like the web, InDesign also has a notion of templates. Related:  responsive design

20 Best Responsive Web Design Examples of 2012 The Boston Globe The largest responsive website to date, The Boston Globe handles loads of content effortlessly, keeping the site intuitive and the content easily accessible on the device of your choice. Smashing Magazine I love this site. I really do. Smashing takes advantage of horizontal screen real estate like few responsive sites do. Food Sense Clean layout, beautiful photography and playful iconography made me like this site immediately on my first visit. Andersson Wise Type designer, Jan Tschichold once said, ‘Simplicity of form is never a poverty, it is a great virtue.’ Sphero If you haven’t check out Sphero, you should. CSS Tricks It might be the conspicuous green frog that causes me love this site. Grey Goose The Grey Goose site shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds. New Adventures In Web Design Lancaster University Fundraise.com Web Designer Wall Heathlife London & Partners Oliver Russell Ryan O’Rourke Fork

The Smashing Book #2 (printed) Well-respected professionals have worked with us to provide exciting and comprehensive chapters: The Principles of Good Graphic Design, Matt Ward and Alexander Charchar This chapter looks at some key concepts of graphic design as they relate to modern Web design. It looks at a number of the central elements and methodologies that drive the act of designing itself, and it discusses the sometimes subtle but always significant divide between the merely good and truly great. This chapter is about: The meaning of graphic design. Visible vs. Basic principles and techniques of producing the visible layer of design in tools such as Photoshop are widely covered in books and online. This chapter is about: Seeing the invisible in design. Designing Mobile User Experiences, Mike Rundle The best apps work well, but building an app that looks good and works well isn’t easy. This chapter is about: Building and selling apps. Sketching, Wireframing and Prototyping, Janko Jovanovic Free Sample (PDF) Right!

Render first. JS second. Let me start with the takeaway point: The key to creating a fast user experience in today’s web sites is to render the page as quickly as possible. To achieve this JavaScript loading and execution has to be deferred. I’m in the middle of several big projects so my blogging rate is down. But I got an email today about asynchronous JavaScript loading and execution. I started to type up my lengthy response and remembered one of those tips for being more productive: “type shorter emails – no one reads long emails anyway”. It took me months to research and write the “Loading Scripts Without Blocking” chapter from Even Faster Web Sites. The downside is – although web sites are doing a better job of downloading scripts without blocking, once those scripts arrive their execution still blocks the page from rendering. My #1 goal right now is to figure out ways that web sites can defer all JavaScript execution until after the page has rendered. JavaScript execution is too complex

85 Top Responsive Web Design Tools As the mobile market continues to grow, demand for responsive website design intensifies. This has introduced a new set of tools, 10 of which we've listed below, to help lay out, design, code and plan a responsive website. While some may overlap, each deserves a spot on the list; when combined, they can help you craft a website that provides an optimal viewing experience for users on all devices. (Along with each recommendation is a list of alternative tools that may be useful.) If you are a designer or developer, what are some of the indispensable tools in your responsive toolbox? 1. Developed first as an internal tool that has now grown into a full-fledged product, Gridset lets web designers and developers design, prototype and build custom, responsive grid-based layouts for their projects. The beauty of Gridset is how fast it will allow you to build responsive prototypes (without all the calculations), providing all the measurements and tools to integrate with your existing markup.

Méthodologie d’Intégration pour un site en Responsive Web Design Cette méthodologie est un addendum à ma méthodologie d’intégration axée sur l’intégration d’un design responsive. Je pars sur le principe que ce design vous est fourni par un DA : PSD, etc, et que vous suivez les étapes de la méthodologie générale. Définir un layout de base qui déterminera le site visible par les vieux navigateurs, ainsi que l’ordre de travail (En gros : Mobile first ou Desktop First)Intégrer la structure (blocks contenant header, nav, content, footer, sans leur contenu) en premier, sous tous les modes, dans l’ordre défini. Ne pas oublier la meta viewport. Media Queries Chaque feuille CSS ne devra idéalement contenir qu’une seule occurence de chaque media-query, située en bas de feuille. Tests de manipulation sur devices Xcode sur Mac contient un émulateur fidèle de périphériques sous iOS. Firefox contient un simulateur de viewport, qui ne doit servir qu’à l’étape d’Intégration. N’oubliez pas de tester le comportement du responsive à la rotation du device. Développement

Building a Responsive, Future-Friendly Web for Everyone This week’s Consumer Electronics Show in Las Vegas has seen the arrival of dozens of new devices from tablets to televisions. Some of these newfangled gadgets will soon be in the hands of consumers who will use them to access your website. Will your site work? Or will it end up mangled by a subpar web browser, odd screen size or slow network connection? No one wants to rewrite their website every time a new device or browser hits the web. Even if you aren’t a gadget lover, CES should help drive home the fundamental truth of today’s web — devices, they are a comin’. Basics: Further Reading: Future Friendly — An overview of how some of the smartest people in web design are thinking about the ever-broadening reach of the web: “We can’t be all things on all devices. Techniques:

Les 10 lois du design - DesignMichel Nous sommes des designers. Enfin, nous essayons de notre mieux de l’être, honnêtement. Toujours avec la même question présente à l’esprit : « Si j’étais le client, avec ses enjeux, ses contraintes, ses envies et son budget, qu’est-ce que j’aimerais voir, quelle est l’image mentale que je me fais de la représentation des valeurs de ma compagnie, à travers le prisme pour le moins antidogmatique de la représentation infographique ? » Tout ceci se traduit par une pléthore de métaphores techniques, comme l’expérience utilisateur, l’utilisabilité de l’interface, la conception centrée utilisateurs, etc.Toutefois, tout ceci reste assez vague et ne représente en aucun cas un absolu à atteindre, mais plutôt un prérequis, alors que nous parlons ici de matière purement artistique. Le but de cet article est de vous présenter un ensemble de lois, 10 au total, qui sont autant de jalons pour la création de designs efficaces, pour le moins. 1 – La loi de Hick 2- Le principe de Pareto 4 – Le feedback.

Optimize Start Render Time - web page optimization of start rendering times The start render time is the moment something first displays on the user's screen. The web page goes from a blank white screen and changes. It doesn't necessarily have to be content; a logo, or text, it could be a colored background or a search box. Human-computer interaction (HCI) guidelines recommend a 1-2 second start render time. Giving the user visual feedback that something is happening behind the screens shows the users that the site is responsive. Users can plan, anticipate and "attune" to consistent response times when browsing web pages. The average web page has grown inexorably as bandwidth has increased.

Related: