background preloader

The Responsinator

The Responsinator
Responsinator · Make your own · About · Login iPhone 3+4 portrait · width: 320px We're hosted on Linode.com - signup, they're great. Remove these ads - make your own customised Responsinator. iPhone 3+4 landscape · width: 480px iPhone 5 portrait · width: 320px

http://www.responsinator.com/

Related:  Aplicaciones WebResponsiveresponsive web designStructures esthétiques (HTML, CSS, Jquery...)Webdesign / Graphisme

Responsive Layouts, Responsively Wireframed Responsive layouts, responsively wireframed Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use the buttons top-right to toggle between desktop and mobile layouts. Create a Responsive Photo Gallery with Bootstrap Framework So you’ve been tasked with creating a photo gallery for you website. One that looks good on a desktop, a phone – even a tablet. One that has a grid of thumbnails, plus a modal functionality when the thumbnails are clicked. This is part one of two series. Part two is where we add “previous” and “next” links to our modal box, click here to view it. Well you’re in luck. 12 Flexible Grid Tools for Responsive Websites Websites and humans have one thing in common. Both went through a great deal of evolution and change. The only difference is that we took millions of years to get to where we are today. Websites took just 10 years. Gone are the days of creating just a nifty looking website with a cool banner and a Contact US page. New technology and innovation has given birth to new demands and requirements that today’s websites must be able to cope with.

CSS transitions, CSS transforms and CSS animation Commonly used as part of image galleries, or to show detail on products. This has traditionally been done in javascript by iterating over the opacity - using CSS transitions makes this very easy to add to your site. Demo 1 - One image to another, on hover Plan Put one image on top of the other Change the opacity of the top image on hover The iOS Design Cheat Sheet Volume 2 - Ivo Mynttinen / User Interface Designer Displays, dimensions and icons. This article is outdated. View new version HTML Mail - Send HTML Emails Online Gmail, Outlook, Yahoo and most other popular email programs support HTML email (Rich Text) but neither of the programs offer you an option to compose email messages directly using HTML markup. That's where HTML Mail fits in. To get started, sign-in with your Gmail or Google Account.

50 fantastic tools for responsive web design As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his best-selling book, one needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Tools for starting out Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment).

Perfect Full Page Background Image By Chris Coyier On This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it: Paper.js - Paper.js Standing on the shoulders of Scriptographer and making use of HTML5 standards, Paper.js is a comprehensive open source vector graphics scripting framework. Document Object Model Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, groups, paths, rasters etc.

Related:  html5Responsive designAA GroupDesignSoftwaretoolsTools_allgemeinDesignWebDesignmoeguapaToolsResponsive Optimization ToolsResponsive DesignCréation de sites web dynamiquesHTMLToolsDiseño web