Using in-browser editing within Adobe Muse

If you haven't already heard, the new Adobe Creative Cloud subscription contains a powerful drag and drop website builder known as Muse CC. For graphic designers and front end developers, the appeal of Muse is a familiar Adobe canvas where custom layouts and graphics are resized, optimized and then exported to clean HTML for the web in just one click.

In just a few short years, Adobe has steadily beefed up the functionality of Muse to include parallax scrolling animation, numerous rollover and lightbox options, intuitive design tools, and an extremely useful feature known as in-browser editing. This feature allows anyone with the site's FTP credentials to login to a web-based layout editor (even on a mobile device), make changes and publish them in minutes.

Adobe Muse and the new editing feature are best utilized within static sites for small businesses, organizations, agencies, creative and restaurants. By using in-browser editing, it's surprisingly easy for anyone to make small changes to page elements like menu items, pricing, hours and specials.

In its current release, in-browser editing will allow you to edit headers, text boxes, images, hyperlinks and tool tips. Adobe has indicated that the ability to edit text styles, animations and rearrange elements is on the way, but for now any changes to your site's text will reflect the character style assigned in the initial Muse layout. It's important to keep in mind that adding too much content within in-browser editing can rearrange your layout and bump elements down the page, potentially compromising your design, so organize your page accordingly.

Designing for others

If you plan to design a site for someone else to update with in-browser editing, there are a few things to consider:

  1. Keep your text boxes neat. Create a new text box for every element in the page (avoid large blocks) and keep text styles the same within your boxes.
  2. Leave space below page elements that may be edited to avoid the 'bumping' issue mentioned earlier.
  3. Consider creating a specific 'announcements' area where a page manager has a designated location to publish time-sensitive content like special deals or weekly events.

Muse has gone from zero to hero for many web designers in a very short time

Muse has gone from zero to hero for many web designers in a very short time

Muse allows for an incredible level of customization, as seen in the amazing Adobe Muse 'Site of the Day' gallery, a recommended stop for a little inspiration. Although it's no replacement for a robust CMS, there's no denying the creative power and content management potential of this software/web app combo in many different applications.

Small business applications

In-browser editing shows real promise in small business applications where you or a page manager needs to quickly make content changes to a site. Anyone in web development who has 'that one' client knows what I'm talking about. Where Wordpress and other CMS systems mystify your average business owner just trying to change a few words, Adobe has created an extremely user-friendly interface that anyone can figure out.

With a little bit of thoughtful design, content areas can be created specifically for in-browser editing to easily switch up announcements, event calendars, text blocks or even custom image headers within a site.

Muse is ever-improving so expect further in-browser functionality

Muse is ever-improving so expect further in-browser functionality

If this got your attention, consider that for now the functionality is still limited and that major layout and style changes must still go through the parent program, Muse. Like many Adobe software updates, we just get a taste of the full menu of options to keep us coming back for more. Adobe has pledged to continue to integrate user suggestions, including responsive design and in-browser editing capabilities.

Creative freedom

Like it or not, this is the face of the next era in web development. Many web development platforms like Squarespace, Grid and Wordpress are moving toward web-based editors. None however offer the creative freedom and power of Adobe Muse when it comes to layouts. If you have been looking for a powerful solution to create a custom website and a simple content management system, Adobe Muse and in-browser editing might be your new best friends.

Words: Andy Lassiter

Andy Lassiter is a Charleston-based designer and videographer. He also writes about web development and computers for eBay, where you can find many of the tools and software to create your own digital projects.

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Andy Lassiter is a Charleston-based designer and videographer. He also writes about web development and computers for eBay, where you can find many of the tools and software to create your own digital projects.