Category: Adobe Muse

Vertical Move Handle in Adobe Muse

Are you using vertical move handle in muse? When designing website in muse, you go back and forth in the process. Adding new contents or deleting is a really painful task. Specially, in larger scale websites things get really tough. When you try to add new section in your website in the middle the challenge you will face is to push things down of the page.

Same goes for deleting a section or some elements. When you delete something, the spaces needs to be filled by the contents below. But that does not happen automatically. Usually, what we intent to do it select everything blow the blank space by clicking and dragging the mouse and then using move tool or arrow keys in the keyboard to move things around.

In responsive web design using adobe muse, we change position of many elements while working with the breakpoints. As a designer I faced the same annoying problem almost everyday making long page websites or landing pages for my muse widgets. I always wanted something that will allow me to move things up and down without a problem.

vertical move handle in adobe muse

Vertical move handle in adobe muse

Well good news, you can do that painful work in an easier way with vertical move handle tool. This is the little tool  you see on the left side of your screen in a muse canvas. The blue triangle shape is the vertical move handle the rescuer. If you want to move things up or down just click one element and click and drag the blue triangle on the left side of the adobe muse canvas. Additionally it allows you to move things pixel by pixel meaning this is a great help for pixel perfect design.

I will make a detailed video tutorial about this in my Youtube channel soon to explain the process. You can read my other muse tips and tricks here.

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

How to add alternative text for images? (SEO Tips)

To improve SEO in muse, we need to carefully implement some small things in website we create in adobe muse. SEO is really not that complicated for adobe muse web designer.

This is a fairly easy trick in muse but really really important for search engine optimization (SEO) for muse websites. Most of us think that adding tooltip on the top panel (hyperlink panel). Well, that’s not going to help in SEO. For adding the alternate text in an image you have to right click on the image and select ‘Edit Image properties’. From here you can add the alternate text for that particular image.

Adobe muse tips and tricks
Adobe muse tips and tricks

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Using the state button properly

State button is not only a button. Sure you can use state button as a typical button but you can do so much more with this awesome widget. A lot of the time we need to add some multiple elements in one single group. You may try doing it but hitting Ctrl/Cmd + G but that do not make those elements into one parent. To do that you can use state button neatly. You an drop as many content as you need in to a state button and they will act as one single element.

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Collect all the assets

You may be using images, files etc. from different folders from your computer. At a point you cant keep track of everything. You might want to add all the assets used in a website into a single folder. Good news, you can do that but clicking the assets panel and clicking the ‘briefcase’ icon on the bottom left corner.

Adobe muse tips and tricks for free

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Heading and Paragraph Tags

We use text tool to add text in muse website but we barely care about what tag we are adding text as. I mean the heading(h1, h2 etc.) or paragraph (p) tags. Even though it does not effect in design whether we are using the text as headline or paragraph, search engines like google does differentiate between headlines and paragraphs. We should add our headlines as heading and  body texts as paragraph. This is not so hard in muse, simply click on the character panel from the right and from the very bottom of the panel you will find the option to change your text-box type from <p> or <h1>. This is really important for SEO.

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Using icon fonts in muse website

Icons are a very important part of a website and we depend on pre-designed icons in Illustrator, photoshop or inDesign. However, we can use icon as text into our muse website.

I am going to make a detailed video showing to you can use the best out of the icon font as well as how you can install it in muse. Here is a brief of it.

  • Locate the fonts folder from the downloaded .zip file
  • install the .ttf format into your computer
  • [In muse] click file > ‘add/remove web fonts’ > self-hosted > add font
  • Drag .woff .eot .svg formats from fonts folder to muse

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Adding a favicon in your muse website.

This is important to have a proper favicon in every website that represents your website. If you are not sure what is a favicon, please see the first image below.

To add a custom favicon click [File]
– Click site properties
– From the content tab you will see the option to add the custom favicon.

Adobe muse tips and tricks

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Quick Tips [Adobe Muse]

Optimum Mobile Breakpoint

A lot of us don’t know what size should be the ultimate mobile breakpoint or how I can be sure what size screen will my audience use in terms of mobile. Well, you can’t be sure. But it’s safe to say that you can design a smallest breakpoint if 320px width. Although there are many different sized mobile phones are available in the market, but they are mostly larger than 320px. So if you design your site that way you won’t lose much.

Using scroll effect in responsive website.

Scroll effects are one of the most amazing feature of adobe muse. Lot of people still don’t know that scroll effects can be used in responsive website. To use scroll effects in responsive website you need to keep something in mind, that it the breakpoint must be fixed width. Scroll effect doesn’t work in fluid breakpoint only.

 

Full width images

Sometimes we want to add image that spans from all the way left to right. To achieve that you should first make a rectangle and make it 100% width (Stretch to browser width) and add the image as its background image.

 

How to use page titles efficiently.

For better result you  should use the page title properly. You can add a common prefix or suffix so the title throughout your website remain in same format. To do that you can go to the master page/s and click [Page] > Page properties > from the metadata tab you can add your site prefix or suffix as you want.

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Custom text highlight color in Adobe Muse website

Usually muse does not allow you to add or change the text highlight color. But with a third-party widget you can achieve that functionality in your muse website. This widget is free for using and not so complicated. Click here to download the widget and double click on the widget to open it in muse, select your text color and background color and voila you are done.

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.

Google analytics in Muse

Google analytics is a really handy tool to enhance the performance of your website and optimize the website that your audiences want. You can see the insights about your  site visitors, their demographics, language, age, location, visit time and many more. Go to http://analytics.google.com/ to create an account which you can do with your existing gmail account if you have. After you sign up, copy the tracking ID.

 

How to add google analytics in adobe muse website?

You can get the free widget for muse users to use in your website which will link up the analytics with your muse website. Simply Click here to download the widget and add it to muse. Paste the code in the widget. That’s it. Now you can see who is visiting your website from the dashboard of Google Analytics.

 

Toufic Nabi is a freelance web designer and developer started his career in 2012 through Upwork. He was nominated as Top-Rated freelancer for three times by Upwork.
Here is Toufic’s Google+.