background preloader

9 basic principles of responsive web design

9 basic principles of responsive web design
Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we'll focus on layouts (yes, responsive goes way deeper than that and if you want to learn more this is a good start). Responsive vs Adaptive web design It might seem the same but it isn't. The flow As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it's called the flow. Relative units The canvas can be a desktop, mobile screen or anything in between. Breakpoints Max and Min values Nested objects Remember the relative position? Mobile or Desktop first

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Related:  web designresponsive designWeb DevelopmentDesigner StuffUX

Walkthroughs inspiration Vessel – Early Access to your favorite videos Slack – Team Communication Luka – Food & Drink Yahoo News Digest Elevate A pixel is not a pixel is not a pixel Page last changed today Yesterday John Gruber wrote about the upped pixel density in the upcoming iPhone (960x640 instead of 480x320), and why Apple did this. He also wondered what the consequences for web developers would be. How browsers work Introduction Web browsers are probably the most widely used software. In this book I will explain how they work behind the scenes. We will see what happens when you type 'google.com' in the address bar until you see the Google page on the browser screen. The browsers we will talk about There are five major browsers used today - Internet Explorer, Firefox, Safari, Chrome and Opera.

6 simple rules for designing mobile websites It is projected by ComScore the by the end of 2014, around 1.75 billion people worldwide will use smartphones regularly. That means that those who’ll be the first to adapt to this rapidly growing segment of the market will reap the most benefits and enjoy the most success. What that means to your business is that you have to be easily accessible through all the different devices, and thus your web design has to cater not only to computer users, but also to smartphones. Here are six simple rules that will help you ensure your site is optimized for mobile: 1) Know your target audience One of the best things about working online is that you can use analytics to track almost any data and use it to make tremendous improvements on all parts of your business.

UX of Software Things If you’re part of a team that build software products, you’ve probably heard about UX before and you know it’s kind of important. But often in stand-up’s, I hear developers say: “the work I’m doing at the moment doesn’t really form part of the UX”. Just the other day a developer said to me that he was doing work that wasn’t part of the UX.

Design Teardown: taking SoulCycle mobile SoulCycle is a full-body, candlelit indoor cycling class that goes beyond the physical. You don’t just work up a sweat—you leave feeling inspired and energized. The 45-minute experience is such a draw that when online reservations open up every Monday at noon, many classes fill up within minutes.

Content in Context is King by Derek Featherstone – An Event Apart Video When most people think of Responsive Design, they think of fluid grids and adapting the layout of components in a site or application. But design goes far beyond layout. How far? In this 60-minute video captured live at An Event Apart Orlando: Special Edition, accessibility expert Derek Featherstone starts by combining content, context, and behavior in ways that let us create truly responsive sites—sites that meet the needs of the people using them, when they’re using them, and how they’re using them. Derek shows how to use clues like time, location, proximity, capabilities, and preferences to create better designs for users.

7 Indispensable (and Free!) Website Graders You can audit your content in many ways—be it a quick-and-simple social media audit or a full-scale blog review. You can take the time to run the numbers yourself (a useful exercise!), or you can plug a URL into I’m the type to always plug our Buffer blog URL into a tool to get feedback.

Related: