Like many of you, I've struggled with trying to use the fluid width features in breakpoints. The reasons are many, but most importantly it's most difficult getting the pixel perfect layouts we designers enjoyed in the fixed width days. For some of us designing more complicated websites, fluid width just doesn't work very well-- unless you're willing to create 7,8 and 9 breakpoint sites. As soon as text starts wrapping, or images resize, there's the potential for the whole design to go off. Not necessarily in a 'broken' way, but just enough to make it look like it's not quite finished. Especially true for typography types who are so careful about negative space around text and it's relation to all other elements on the page. So, I've decided to work with fixed width breakpoints, but using them in a responsive way. Besides the fact you can do scrollable effects, you just have more control with fixed width: EXACT CONTROL in most cases. After my last fluid site (it actually had 6 breakpoints based upon the current meme which says "create breakpoints when they are needed." Even with 6 breakpoints, the typography broke down significantly, not to mention all the hassles trying to keep all breakpoints in sync. Ugh-- it's like designing 6 separate pages for each page on the site. Never again. All that work for a mediocre finish. The NEW Responsive Strategy Okay, so now the goal for this next site is: As few breakpoints as possible Full control over typography at all times Try to minimize 'syncing' between pages and breakpoints Speed up development significantly After reading up and asking a few more questions, it's clear that the best solution for me is to use fixed width breakpoints, with the smallest one being able to be used BY ALL MOBILE devices. The idea is that a 500px or so breakpoint, if set properly, can literally be used on every smartphone around. TEST 2: One breakpoint fits them all (TEST 1 was used for something else) It's important to understand how a mobile browser, like iPhone's Safari, renders a page. If a web page is wider than the browser viewport (px) then it will render the page offscreen at a default width of 980px, then scale it to fit in the smaller browser viewport window. If it's smaller than the viewport, it will scale it up to fit in the browser viewport. Here's a test showing how it works. Go to http://chippwalters.com/test2 This is a single page Muse site. In fact all of the following examples are single page Muse sites. Read the page on the site. Note, there is only 1 fixed width breakpoint for the entire site. And it scales perfectly on Tablet, Mobile and Desktop (as long as the Desktop browser width >= 1000px). Of course there are problems with this single breakpoint approach-- the browser is too tiny in mobile, it's not responsive, etc. But, what's interesting is to see how perfectly is is scaled on the iPhone or other mobile devices. TEST 3: Multiple breakpoints BREAK Phone layouts Now let's go to the next level. Go to http://chippwalters.com/test3 Here we've added another smaller breakpoint. This breakpoint is conveniently set so that it will render correctly down to 768px, the portrait size for an iPad. So, this is good for tablets, and also Desktop (browser width >= 768). This is more responsive ONLY NOW WE'VE BROKEN MOBILE. The new code from Muse is not recognized by our mobile browsers and only displays at full resolution-- so there's no scaling. Still, this is a good Desktop alternative as rarely are desktop browser widths set at less than 768px these days. And if so, the browser will scroll so it's still very viewable. Of course if we really want to, we can even go smaller. We now know that no matter how small the breakpoint, it won't render correctly as fixed width in Phone unless it matches exactly the viewport of the Phone. That would mean a significant number of fixed width breakpoints. Or we have another 2 options: Use Fluid Width and see how far you can go before having to create more breakpoints Use a Phone Alternate Layout TEST 4: The Strategy I've chosen I prefer option 2 Go to http://chippwalters.com/test4 This strategy uses the multiple fixed width breakpoints from TEST 2 along with an Alternate Phone Layout set at FIXED WIDTH (both MASTER and PAGE) 500 pixels wide. If you leave it at the default fluid width IT WON'T WORK! Once built, it autoscales to ALL phone devices, freeing you from the constant tweaking and massaging of multiple fluid breakpoints. The downside is you need to duplicate content and then keep it in sync. Another downside is there's the Desktop browser width gap we mentioned in TEST 3, but that can be fixed (if you want to) by adding another fixed width breakpoint to go from 500 to 767. I'll forgo that for now. This is the strategy I'll be going with on the next couple sites I create. CONCLUSION I hope this was helpful for some of you. It was helpful for me to build these sites and test them to find out what works. Please reply if there are any questions or if I have misstepped in anyway. Oh, and ADOBE, if you're listening, please consider adding some sort of flag or setting to force a certain breakpoint to be rendered at 980px on Mobile (if that's even possible?).