Non-Coding Responsive Web Design: Adobe Muse

About Adobe Muse and Responsive Design

What is Responsive Web?

SCR : http://blogs.adobe.com/

What is Adobe Muse?

Why it is so important?

SCR : http://www.fuzeinc.com/

Principles of Responsive Web :

Fixed Width vs Fluid Width: Before responsive design, we designed three separate sites for desktop, mobile and tablet. It contains three CSS files to execute the style of the HTML page. In a fluid layout, breakpoints are introduced, which allows us to change the layout of the website on predefined pixels points. Responsive layouts should adapt to any possible screen size. Best guidelines for setting breakpoints is from Google materials design guidelines.

SCR : http://blog.froont.com

Relative vs Absolute Units: The canvas maybe the website is differed come a desktop to mobile or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That’s where relative units like percentages come in handy.

SCR : http://blog.froont.com/

Bitmap images vs Vectors: Does your image have a lot of details? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or gif, for vectors the best choice would be an SVG. Each has some benefits and some drawbacks. However, keep in mind the size — no pictures should go online without optimization. Vectors on the other hand often are tiny, but some older browsers won’t support it. For example, IE 8.O and before Android 2.3 will not support vector files.

SCR : http://blog.froont.com/

Webfonts vs System fonts: Wanna have a cool looking Futura or Didot on your website? Use web fonts! Although they will look stunning, remember that each will be downloaded and the more you’ll have, the longer it will take to load the page. System fonts, on the other hand, are lightning fast, except when the user doesn’t have it locally, it will fall back to a default font.

Group Objects: If your websites have a lot of elements but not a group, which will arrange randomly the site and resize automatically(in muse). So group the objects according to the relationship between the elements in your site.

SCR : http://blog.froont.com/

Why Adobe Muse?

  1. No-Coding: Create stunning responsive sites which truly stands out from the designs which are made in coding. In Muse, you design your site and preview it without any line of code or a professional web designer.
  2. Mobile-friendly sites: Now the smartphone market is hitting very fast by every day, you have to create a different layout for many screen sizes. If you use Adobe Muse, that layout can fit into any mobile devices having any screen sizes.
  3. Create-design-preview at once: Muse gives you the flexibility to create, layout, and preview web pages on the same canvas. You can preview your design using the scrubber for any browser width. If your design breaks at any point, you can immediately tweak your layout on the same canvas.
  4. In-Browser Editing: If you want to make changes to your responsive layouts, you don’t have to open Adobe Muse. You can edit content or images in browsers using Adobe Business Catalyst.
  5. Alternate layout: If you are still not convinced about migrating your websites to responsive layout completely, you can have alternate layouts for specific web pages in your Adobe Muse project.
  6. Starter designs: If you do not want to create and design web sites from scratch, and want a jumpstart, choose the responsive starter designs for creating personalized websites.
  7. Features: Support Google Analytics, Google Tacking, etc. They are lot and lot of widgets available for Muse to customise the website properties. Some of the third-party widget providers are 123muse.com, muse-themes.com, musefree.com, etc.
  8. Export & Publishing: Muse offers many ways to make your site live, you can directly upload the site to your server via FTP, SFTP or you can export site to your desktop and you can use FTP client such as Cyberduck, FileZilla, etc. Publishing your site to business catalyst is very simple just click “publish” button, to upload the site to your server.

What have I done with Adobe Muse?

  1. Climbo- Tap Swipe Climbo
  2. Radar Blip
  3. Uitoux Solutions
  4. Yellow Tree Academy’s Upcoming site

Also, Check my Behance Profile: www.vidhunnan.design

Thank you all!

--

--

Product Designer at BigBasket | Creating meaningful experiences through design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vidhunnan Murugan

Product Designer at BigBasket | Creating meaningful experiences through design.