The ability to add a search bar to your website is not currently available in Muse, which means we need to find a clever workaround. By using third party HTML and embedding it into our site, we can get a basic (but functional!) search feature up and running in Muse very quickly. Powered by Google “Custom Search” this a really easy way to quickly add this functionality.
To see a google site search bar within Muse in action, check out the following site:
Visit the Google Custom Search homepage at http://www.google.com/cse/ and sign in with your google account. Once logged in, you have the ability to create multiple versions of search bars and embed them on any site.
Click “Add” to start.
Next, enter your website address in the “Sites to Search” bar shown below. You have a variety of options from searching single pages to complete websites. We recommend you search the entire website, so just enter your domain as usual. For our example, we will use the domain www.muse-themes.com. Click create, and let’s start customizing the search bar.
Once you’ve created the bar, you can customize a variety of options to help it blend seamlessly into your website. Click the “Look and Feel” tab on the left to access the customization options.
Within “Look and Feel”, let’s set the layout of our search engine. For the example provided in this post I’ve used the “Full Width” layout, which provides the results across the full width of the site (or frame). The content placed below the bar in Muse will automatically push down below the results - cool! This feels non-intrusive, and doesn’t require you to drastically redesign your site to integrate it.
Next, let’s click the “Themes” tab within “Look and Feel” and select a color for our search results. As you select different theme options, the search bar preview on the right updates as you go. We will select the minimalist style.
Lastly, you can customize the font, color and border styles of your search bar, as well as the display format of the results. For the sake of this demonstration, we left the results set to their defaults. Be sure to click the blue SAVE button after you make any changes.
In order to embed the bar in our site, we need the embed code provided by Google. Click “Save and Get Code” in the blue box shown above. Google will generate embed code for the search bar and display it in the grey box below.
Copy the embed code, jump back into Muse and select Object > Insert HTML
Once the HTML is embedded, Muse will generate a preview of the bar. Scale or size this frame to fill the area you’ve allotted in your design.
When you’re happy with the placement of the bar, publish your site to the web and preview it in action!
When we use the search bar, results are displayed directly on the site in within the full column width. If we decided to use the “Overlay” layout option within the search bar settings instead, you DO NOT need to re-embed the code. Simply change the settings within your google account, save it, and your Muse site will automatically reflect the changes.
Don't you just love embedded HTML?
- Steve Harris
As an increasing number of great websites made with Adobe Muse pop up all over the web, occasionally I see designers missing one of the most critical factors in building and launching a successful website - SEO, which stands for search engine optimization. For print designers new to the web, there are a few essential tasks that you must do in order to help search engines understand the structure of your website, and identify keywords that could yield a stream of search traffic.
Within every Muse website, designers have the ability to input specific metadata that is unique to each page on the site. This metadata includes the webpage title, description, and keywords, which are all important factors in how your site appears in search results.
On a specific page of your Muse site, click PAGE > PAGE PROPERTIES > METADATA
Description: include a brief description of what your site is all about. Try and use keywords that are relevant to your site’s content, and be sure to keep this description brief. 150-160 characters is said to be ideal, so keep it short and powerful. Make sure your description accurately describes what is on the webpage - don’t try and trick Google by stuffing this full of keywords.
Keywords: this isn’t as essential as the meta description, however it’s still helpful to include relevant terms to your websites content. Don’t bother piling this full of 1,000 keywords and phrases. It won’t help your rankings.
Page Title: When editing the page title settings, be sure to uncheck “same as page name”. The page name is what Adobe Muse will call your page within it’s site plan, as well as on the navigation bar. The page title however is what search engines will read, and what will display in the top of your browsers window. Your page title should briefly describe the content of the page - users want information fast when browsing the web, so don’t try and make them read any more than they have to.
I can’t stress enough, the reason Google is a great search engine is because it truly gives you relevant, quality results for your search. If it was possible to trick it into displaying any average website, nobody would use Google because it returned garbage results. Focus on making the site easier for users to navigate and understand, and the search engines will appreciate it.
Websites are built with a specific hierarchy of information, and search engines look for this structure to understand the content of your site. You're probably using descriptive titles and headings within your site (if not, you should be!) however unless you’ve mapped those headings to a “Headline Style” then your efforts will be significantly diminished.
Here’s how to set a proper heading style:
The next time Muse outputs the code for your website, it will generate the proper HTML tags that let search engines know to reference this block of text as a true headline.
When placing images in Muse, you need to go one step further and assign a title and brief description of each image within the website. After placing an image, right click (control-click) and select “Add Title”. This brings up the image properties dialogue box, where you can provide some brief information about what the image is about.
Image Title: this is a straightforward description of the image. It should follow the same guidelines as other titles - keep it brief, concise and accurate. Most browsers will reveal this text if you hover over an image with your cursor.
Alt Text: the alt text is intended to help users who may not be able to see the image to understand what it is all about (perhaps due to a visual impairment). While it’s not as essential as the headline tags or metadata, Google does crawl alt text and you should try and include it where possible.
In order for search engines to crawl your site and "read" the written content, you need to make sure that you're using as much real text (rather than images) as possible. This might seem obvious for body copy, however with the addition of Typekit and web fonts within Adobe Muse, there is no reason why headings, navigation bars, and block quotes can't also be styled using HTML text.
An easy way to test whether or not a search engine can crawl the text on your site is by trying to highlight and copy it into another document. Images won't let you select a specific word or letter (you can only save the entire image). This was one of the early limitations in websites built entirely in Flash - text was enclosed inside a flash movie, and search spiders could not read any of the written content.
With the latest advancements in HTML / CSS and Adobe Muse, there's almost nothing that you could do to an image button that you can't do to a real text button.
There are 3 options for working with text in Adobe Muse. When it comes to Search Engine Optimization it's best to use web fonts or web safe fonts. Here’s why:
Web Safe Fonts: Prior to the creation of services like Adobe Typekit, web designers were limited to using only the fonts that came preinstalled with a user’s specific operating system. These fonts had to be common between old and new versions of both Windows and Mac, leaving designers with only 5-10 good options for type. If you needed to use a specific typeface that wasn’t included with the OS (perhaps to meet corporate brand guidelines) your only option was to create an image from the text, and place that in your website. This violates the SEO best practice of using real text outlined above, and increases bandwidth use due to the image download.
The “web safe fonts” listed in Adobe Muse are the fonts that are commonly installed with modern operating systems.
Sticking with the limited web-safe list above will certainly test your creativity!
The “Web Fonts” listed in Adobe Muse are a collection of over 400 typefaces - they look great in all modern browsers, and are easily read by search engines.
Webfonts available directly in Adobe Muse - a really powerful feature!
System Fonts (exports as image): These are the fonts that a user has installed on their computer, and may not be common among all visitors to your website. When using a system font within Adobe Muse, the text will be automatically rasterized and converted to an image format when published. This means it cannot be indexed by search engines, and will increase website load times due to the file size of the image. The use of text images is often avoided in modern web design (due to the SEO & accessibility limitations), however there is still occasionally a use for it within certain applications (elaborate buttons perhaps).
For more information on Font options available in Muse, visit the following Adobe website:
At the end of the day, having good quality relevant content will likely be the most essential factor in your search engine rankings. Write content with important keywords in mind, and keep your site current (update it regularly!). SEO is a vast subject, and there a variety of tips and tactics that you can use to improve your rankings, however if you follow the tips above you should see a huge impact in your Muse websites rankings.
Always remember that Google’s job is to find the truth, and if you want your site to reach the top spot for a particular keyword, then you need to make sure it actually deserves to be there.