Responsive vs. Mobile Site

Responsive

• 1 set of content & code to maintain
• Everyone gets the same content

Mobile

• Can focus user tasks
• Can be lean and fast

Basic Components

• Flexible layout
• Fluid images and media
• Media queries

Styling is therefore:

.third {
	width: 32.6530612244898%;
	margin-right: 1.020408163265306%;
}

Now try doing that with a non-existent grid! and get it to work across multiple screen sizes!

There are 99 screen sizes the iPhone is one. (say that like Jay-Z)

Generally myself I would use the more standard 33.33% and then use a fixed padding within columns to give the same space no matter what size screen you are on. But that can still only work on a responsive grid system.

What about wireframing?

The same rules apply, you need to know your proposed layout will work. Will it flow naturally on smaller devices? It cannot be too rigid so that it cannot adapt to every screen size. Remember it is not just a desktop and a mobile version it is a structure that is fluid.

Doodle out a quick wireframe idea. Why spend all the time drawing them if then they don't work? Run some tests fold the note in half can you see where it could naturally flow down? A column drop? Will the content shrink too much? if so what should it do? Should it drop? Cut? Increase depth?

Checkout this tool

http://www.lifeishao.com/rwdwire/

Mobile first

This is where a site is made to work and fit best on a mobile device. Keeping images, scripts etc to as minimal as possible and giving the user a very nice and quick experience. Then, for larger devices, bringing in more content or adding more to it. This is probably the most popular way at the moment.

Desktop First

This is where you give the site all the whizz bang large graphics and whatever else you want and make the desktop version first and then bring that all back as the screen and device changes. Remember just because that image looks smaller the actual physical size is still as big as the original so that mobile user will be downloading that huge image.

What do I think?

Well thanks for asking! But basically the choice is yours! All that I 100% say is take elements from the mobile first approach. This should always be in your mind when you are designing or wireframing your project. If it has to work on mobile then you have to build the full version to be able to adapt down the screen sizes. Putting in a million breakpoints is not the answer!!!

You just said breakpoints... do go on

But let's keep this one short yeah, there has been enough jibba-jabba!

Break points in RWD are browser widths that have a media query declaration to change the layout once the browser is within the declared range.

Nope, you've lost me again!

ok ok, let me simplify this a bit

/* Desktop styles */
.quarter {
	width: 25%;
}
/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.quarter {
    	width: 100%;
    }
}
        

Conclusion

In a nutshell when it comes to wireframing and designing responsively it all comes down to having it gridded out correctly and to need to 'break' as least as possible (that is why they are called breakpoints). If it is laid out correctly in a working fluid grid from the very start the quicker the process will be for all teams and the better the final result and user experience.