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:

• Google Resizer (NEW)
• Safari Responsive Design Mode
• Chrome, Developer Tools
• Xcode – Apple Developer Tool

*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