Join Now

State of the Union - Responsive Update


It’s been a few crazy weeks since the responsive version of Muse dropped, and we wanted to do a quick recap of what the team is working on, what we’ve learned since the release, and a few other tips, tricks and important announcements.

 

Here’s a quick look at what we’ll cover in this post:

 

  • Widget Improvement Week
  • Important Tips for Previewing Responsive Sites
  • Hybrid Sites – How to Combine Fixed & Fluid Layouts
  • Native Widgets Becoming Responsive (Compositions, Slideshows, etc.)
  • Stacks Preview

 



 

Widget Improvement Week

MAJOR UPGRADES COMING

This week's release (or member "benny" (benefit) as we call them in-house) is to take a step back from new product development, and push out a ton of updates and improvements to existing widgets and themes. You guys have helped us immensely by identifying trouble spots in the way our widgets work with responsive Muse, and we’re making a big push to get those out and available immediately. Our current list includes over 18 bug fixes and updates, and we've even hired another fulltime developer to help. Stay tuned!

 

 



 

How to Preview a Responsive Site

TIPS AND TOOLS

The team is fielding a lot of questions about the behavior of widgets when the browser size is scaled, and we wanted to encourage users to take a different approach to previewing responsive sites. Here’s why this is so important:

Adobe’s “Mucow” system – the system we use to build widgets – often requires heavy use of Javascript (code that runs when your site is loaded in the browser). While it’s true that a responsive site is designed to work in every browser, it’s uncommon for that browser size to change during the browsing experience. Users are not dragging their browsers very often, and it’s more important your site loads properly at a specific size.

If you scale down the browser when previewing a responsive site or widget, always be sure to refresh the site at that size. This is more representative of how a smaller screen will truly display the site, and it gives the code behind our widgets a chance to load and run at that new pixel size*.

 

Here are some other great tools to help you preview accurately:

 

*On a technical note, while it is possible to add additional code that "listens" for breakpoints and re-initializes the javascript, this can be extremely heavy and cause unwanted performance issues on your site. We would rather not take that risk to address the low percentage of users who scale the browser down manually. We hope you agree!

 

 



 

Hybrid Sites

COMBINING FIXED & FLUID WIDTH BREAKPOINTS

We’re seeing lots of chatter about mixing the old and new Muse together – using both fixed and fluid width breakpoints in a single site. We think this is a great idea, and it’s actually not a new method (many template resources and frameworks have been doing this for years).

Here’s how it works:

You’re designing a site at a desktop size, let’s say the default 960px breakpoint size. You begin to scale this site down, and things don’t look right anymore around 700px. So you create a new breakpoint, and reshuffle your content. But what happens if you change those two breakpoint properties to be “fixed width,” instead of “fluid width”? With this approach, the browser is going to measure the screen width, and display the lower breakpoint that it fits within (with space on the left / right side).

Here’s another way to think about this technique. Your browser will just display the “Tablet” site you would have built in the old version of Muse. And at the lowest breakpoints, it would display the “Phone” layout. Keep in mind with this approach however, you’re actually displaying the same content, so in many ways it’s the best of both worlds.

This site from Rocket Themes (a Joomla template resource) will explain better than I can. Check out what happens when you scale the browser down: http://demo.rockettheme.com/live/joomla/callisto/

See how the site container adjusts based on each breakpoint? This can be achieved by using fixed width breakpoints in responsive Muse sites.

 

 



 

Native Muse Widgets

RESPONSIVE CONVERSION

What’s a native widget? This is a widget that ships with Muse, not one built by a third party resource like MuseThemes. These include the composition, slideshow, accordion, and many others listed in the widget library panel.

Many of our “design widgets” are based on these – restyled native Muse widgets, complete with custom graphics and clever functionality.

As of this blog post, Adobe has not introduced responsive behavior in any of these widgets other than the accordion. This means that many of our slider and gallery widgets built on the native Muse widgets can not yet be converted to responsive by our team. We unfortunately need to wait for Adobe to unlock responsive capabilities in their native tools.

How can you tell what is a native Muse widget? If it includes options like selecting a folder of images, or it has a small blue + sign to add new images, this means it’s built from a stock Muse widget. Third party widget makers like us haven’t been given the ability to create widgets with that type of functionality (but fingers crossed some day we can!).

 

 



 

Stacks Preview

COMING SOON

We’ve been advertising our upcoming Stacks, but haven’t released them yet – why not? Well the answer is that we want to get these right. It’s an experimental product, and we wanted to see how users were working with the new Responsive Muse before finalizing our breakpoints, setup, and delivery of Stacks.

Our planned member “benny" (benefit) for next week is the release of two packs of Stacks for you to begin playing with. But before we do, we want to get your feedback and input. Check out this thread on our forum, and watch for a sample download to test out by the end of the week. We’re excited to see what you think!

Join the discussion - MuseThemes Forum

 

 

Thanks again for supporting MuseThemes.com!

Cheers
SH

Comments

Peter Faunch
Peter Faunch

As usual Steve a most informative blog that explains a lot. You guys rock! Certainly exciting times using the new Muse but also very frustrating. Looking forward to trying Stacks. Keep up the great work.

Peter Faunch
Peter Faunch

As usual Steve a most informative blog that explains a lot. You guys rock! Certainly exciting times using the new Muse but also very frustrating. Looking forward to trying Stacks. Keep up the great work.

David Pyke
David Pyke

Thanks for staying on top of all the changes with the new responsive designs. When changing sizes using widgets, i’ve just duplicated the widget, adjusted it manually and put it on a different breakpoint, hiding it from the other breakpoints. (and hiding the original on that point) Seems to work well.

(Been with you guys since the beginning – love it.)

Louis Rigal
Louis Rigal

Thanks guys for all your hard work. I am quite excited and look forward to the new updates and appreciate the tips that you provide.

Cheers,
Louis Rigal

Dmitry
Dmitry

Wow! You rock!

STEVE
STEVE

Thanks for the update, very informative and answered questions I’ve had in the past week. Good to know the reason behind preview issues and non-responsive behavior of some of the widgets. I’m super impressed with what you guys do — and I’m hard to impress. Keep it going.

As a side note, your instructional videos are among the best. I appreciate the ones the Adobe Muse team puts out, but they move SO SLOW they can be excruciating to watch. You get right to the point, don’t skip any steps, provide “watch out for …” info and suggest avenues for further exploration. Thanks!

Best,
Steve

jean-christophe
jean-christophe

hello Steve,
about hybrid layouts… after turn to fixed width, would it be possible to introduce some scroll-effects in the largest breakpoint for ex. ?
thanks, jc

Andrea
Andrea

Thank you so much for this explanation of the hybrid sites. I always feel like you guys have my back! Thank you :)

SHarte
SHarte

So it seems Adobe Muse responsive is not quite ready if their widgets haven’t yet been converted. Sigh, so will pick it up when that happens.

I am intrigued by the hybrid Muse site strategy. Can you give us a real life example with downloadable files? Wouldn’t have to be an elaborate site, but just a simple demonstration of how you would set it up.

Thanks MuseThemes, I really appreciate all your recent efforts. Your training series for the new responsive Muse is very much appreciated by me.

Alex
Alex

It would be great to attach to this very useful post simple Muse file with recommended break point for fixed responsive page like one in your example…
Thanks,
Alex

Filipe
Filipe

Thank you for all the work you put into widgets and templates. Do you plan any blog widget, apart from Tumblr?
Best regards from Lisbon.

Bassam
Bassam

Thank you Steve, Its working perfectly,

Bill Watters
Bill Watters

Hi Steve, your comments on mixing fixed and fluid might just be the solution I have been after. Would you initially open the site as fluid the treat each breakpoint as fixed? Am I correct in assuming that widgets will behave as normal, eg pre-responsive mode?

Jud Blakely
Jud Blakely

Many thanks for all your efforts and, really, just the whole nature of your approach…and by “many thanks,” I mean at least 125, although I feel that awarding you more than 280 is over the top no matter how well deserved.

My main interest at the moment is whether I can use Mac’s Numbers spreadsheet (instead of Excel) in combination with your new Tables widget. I have about 900 rows and 8 or 9 columns of date to wrangle. Got my fingers crossed.

Post A Comment

Trusted by over 50,000 Muse Designers

Join now to download our entire library of templates, widgets, and tutorials Join Now