background preloader

Responsive

Facebook Twitter

The future of media queries? Conseils et inspirations pour votre portfolio. Créer son portfolio : une mission pleine d’interrogations, surtout lorsqu’on débute dans les métiers créatifs. Pour vous aider, je vous propose un petit dossier avec quelques conseils fondamentaux et essentiels. Le but de cet article n’est pas d’écrire le guide ultime du portfolio, mais tout simplement de vous donner des pistes et des liens sur ce monde particulier des sites personnels. En effet, des articles traitant du sujet en long, en large et en travers paraissent à toutes les saisons sur les blogs de design… En parcourant régulièrement les galeries design depuis quelques mois, j’ai repéré quelques portfolios inspirants qui peuvent vous donner des idées pour réaliser le votre.

Un monde vaste et concurrentiel Pour commencer, rappelons rapidement à quoi sert un portfolio : montrer votre talent, sortir du lot et attirer d’éventuels clients ou partenaires créatifs. Les clés essentielles pour se démarquer 1. 2. Avec les années, votre site va se remplir. 3. 4. 5. 6. Quelques exemples : Verde. Liquidapsive (Liqui-dap-sive) Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples.

Designers have it tougher now than before. We not only have to design for stationary devices, but also mobile devices like the tablet and smartphones, and since we are talking about a lot of different screen sizes and resolutions here, it’s a huge task to shoulder. In light of this, responsive web design could be the best solution. It offers more than just a simple mobile template; instead, your entire site layout is designed to be flexible enough to fit into any possible screen resolution. With such a fluid design scheme there are obvious benefits and drawbacks. Consider my examples below for how responsive web design can make the transition into mobile devices a smoother one.

How Responsive Design Works When I use the word “responsive” in terms of web design I mean that the entire layout responds based on the user’s screen resolution. Responsive design is all about creating a homogeneous experience regardless of the browser or device screen size. Why Design for Mobile? Touching Designs. Easy Responsive Web Design with the Restive jQuery Plugin. Designing Web Sites for Smartphones and Tablets sounds really great when you read about it on Web Design Blogs. You get all excited about the awesome possibilities of having your Web site look and feel good on multiple mobile devices [and non-mobile devices alike].

However, when you actually stop the dreaming and get to the doing, your joy literally gets knocked in the teeth by the fearless fists of sorrow. Have you ever been so frustrated that you shout out the phrase that is identified by those notorious initials "WTF", but you're so gobsmacked with said frustration that you skip the first word and then can't even finish the expletive, you're just like "...THE FFFFF...?! " Well, that's what it was like for me about a year ago when I was trying to get the hang of this Responsive and Adaptive Web Design thing, and I'm pretty sure I'm not the only one. It was - to put it lightly and like Jerry Maguire - "An Up-at-dawn, Pride-swallowing Siege". So what is the Restive Plugin?! <! In Closing. Better Responsive Images With the picture Element - Tuts+ Code Tutorial. This article will introduce you to <picture>, a new proposed element created to try and solve the problem of serving the version of content images which better suits the device currently visiting a web page.

Why Do We Need a New Element? Responsive Web Design (RWD) has taken web developers and designers by storm, changing the way they approach the development of a website. When talking about RWD, I love to make an analogy. We, as people involved in software development, are always excited by new tools in the same way a child is thrilled by a new toy (you've heard of the recent diatribe on front-end automation tools, haven't you?). We are so intrigued by new toys that sometimes we use, and even develop, tools that don't resolve a real issue. One of the most important open issues is serving content images for an almost infinite range of devices, trying to serve the version that better suits the specific device currently visiting our website. Important Note What's the <picture> Element? Creating an HTML5 Responsive-Ready Contact Form with JavaScript Detection.

HTML5 brings many great features that we can start using now, and many of them lie within forms and inputs. Some HTML5 enhancements often require fallbacks for our projects, through polyfills or fallbacks. Here we will show you how to create an HTML5 enhanced responsive-ready contact form with custom JavaScript feature detection. Creating an HTML5 Responsive Contact Form In this tutorial, we'll create a responsive contact form that will include the following features: HTML5 input attributesHTML5 enhanced input typesHTML5 semanticsFluid and responsive designCustom JavaScript feature detectionHTML5 fallback setup Markup First we'll start with the markup, for which we'll first setup a basic form structure. HTML5 introduces a few new attributes that we can add to our inputs, but first let's look at our labels. The issue with keeping labels looking like they're inside the form field is; when the user starts typing, the meaning of the input is removed and is no longer visible.

Conclusion. Grid System. Typesetting Responsive CSS3 Columns. Multi-col­umn lay­outs are awe­some, but I haven't seen many great im­ple­men­ta­tions. This is my try. Tommi Kaikkonen on January 7th, 2013 Be­fore you start read­ing this ar­ti­cle, you might want to play with the check­boxes in the top right cor­ner. Re­size the win­dow. Zoom in and out. Where Are the Columns I use a Full HD widescreen for brows­ing the in­ter­net. CSS3 columns have de­cent im­ple­men­ta­tions in browsers. Let's be­gin with an overview of how CSS3 columns work. CSS3 Columns CSS3 columns take con­tent and di­vide it into columns based on ei­ther the column-width or column-count CSS-prop­er­ties. For ar­ti­cles, there's one vi­able op­tion: column-width. Us­ing column-width cre­ates new columns to the right as con­tent ex­pands. Full Justification Ad­ja­cent and nar­row columns need full jus­ti­fi­ca­tion to look good. Cross-Browser Hyphenation with Hypher.js Working Out the Kinks I en­coun­tered a prob­lem with the width of col­umn con­tain­ers.

Set Column Gap to Zero. 21 Fresh Examples of Responsive Web Design. Responsive design is something a lot of designers talk about. And considering the importance of responsiveness and all the buzz around it, it’s impressive the amount of websites that are still not responsive. By now, with the amazing growth of mobile usage, every single website should be responsive to be able to attend to every user’s “screen size needs.” Today I gathered some fresh examples of responsive sites to reinforce the importance of adapting your layout to every screen. Probably you will recognize a few websites from past lists, but they are so good that they deserve to be back here. British America Household Staffing Designed to Move Fhoke Evolve Digital Atelier Andrew Lohman Yaron Schoen Friends of the Web Simon Foster Nudge Johann Lucchini Roy Barber Face.Works.

Lab Fiftyfive oak.is FortyOneTwenty Colorkite Louis Gubitosi Substrakt Julie Lavergne The Brigade Responsive Design Books Responsive Web Design by Ethan Marcote Responsive Design (Smashing eBook Series) About the Author Related Posts. Which Linux Distro for Web Development? | Rey Bango.