Create a Killer Website Using Adobe Muse: In this four-week course, Brian Wood, author of the Adobe Muse Classroom in a Book, will guide you through how to create and publish a site using Adobe Muse that is optimized for desktop and devices, including phones and tablets. You’ll also learn how to incorporate some of the latest web trends in design.
By Steve Harris
Beginning tomorrow, Google’s search algorithm will favor mobile-friendly sites for users who access Google on their mobile devices. The good news for websites typically accessed through desktop computers is that this shift will not affect your page ranking. However, the percentage of Americans browsing the web has grown from 33 in 2013 to 42 in 2014. Offering a website optimized for mobile will increase PageRank, allowing more users to find your site when conducting searches.
Mobile ≠ Smaller Version of a Website
The biggest mistake most people make is designing a website for desktop, and then trying to condense all of its desktop content into a mobile version. Responsive Web Design has become increasingly popular as a way to create one site that can scale and shuffle based on the viewing screen. Designers who take this route have to carefully select which pages, buttons and content to show and hide to make the experience suitable for mobile.
Another option, which potentially simplifies mobile design flexibility, is called Alternate Layout. Adobe Muse currently uses this approach, which creates a separate website for mobile visitors and redirects users based on their screen resolution. The benefit of Alternate Layout to designers is great design control and flexibility, as well as the ability to optimize your mobile site for a unique set of keywords and meta-data.
From a cost perspective, it is significantly more expensive to revamp an existing website and convert it to a responsive layout—you’re essentially tearing down the whole house and reframing from scratch. An alternate layout approach has lower implementation costs up front; however, maintaining two separate websites can increase the cost of future updates.
Using Alternate Layouts in Adobe Muse allows you to create the two sites however you want, and then Muse automatically adds a small snippet of code to send users to a correct version for their device size.
The Top Five Considerations for Mobile Web Design
Whether you start from scratch with responsive web design, or create a new Alternate Layout for your current website, here are some tips and design considerations to make it look great and rank well:
1. Don’t Make Tiny Buttons!
Officially called “touch targets and spacing,” this ensures users can comfortably press a button on your site with their fingers. If you place buttons too close together, a user may accidentally push the wrong one. Consider ensuring touch-targets are a minimum of 50px by 50px and you should be safe.
Spacing between buttons is equally important. 20px–32px worth of space is a safe bet.
2. Use the Scroll & Make Fonts Legible
Mobile users are often on-the-go, and most mobile sites restrict zooming capabilities. Tiny text is difficult to read, so take advantage of the user’s ability to scroll, and build long pages with content at a comfortable size (15px or up.)
3. Avoid Heavy Widgets & Content
Good mobile sites are light, simple, and fast. Save your parallax scrolling effects and high-resolution video galleries for the desktop experience. As part of this algorithm shift, Google confirmed inaccessible content, such as Flash, will have a negative impact on rankings.
If your widget or embedded media doesn’t enhance the user experience, remove it and find a faster or easier way to display the content. For example, in lieu of a video of a customer endorsement, include quotes that your potential consumer can quickly scroll through.
4. Keep Page Load Speed Fast
Keep your mobile sites light, leaned and streamlined! Users may not always have a Wi-Fi connection, so video-heavy sites will just be clunky and slow—not to mention data-hogging. Mobile pages should load quickly, and images should be optimized for maximum compression. Complex widgets will add unnecessary bulk to your mobile design, so avoid them if possible.
Think of how your reader will use the site, and plan accordingly.
Want to check your mobile page load speed? Use this tool.
5. Use Relevant Cross Links
For websites that have separate URLs for their desktop and mobile version, it’s common practice to include links that connect the two. One of the most common mistakes developers make is mapping to the wrong page—either by mistake or because an equivalent is unavailable. Ensure that your links go to its relevant counterpart, such as “Homepage” to “Homepage” or “Portfolio” to “Portfolio.” Don’t link your desktop “About” page to your mobile portfolio.
To help website owners make the shift, Google released a new mobile-friendly testing tool that analyzes each specific page URL to confirm if the site will pass. If your site doesn’t get a passing grade, Adobe recently posted some great resources for mobile design.
Steve Harris is an award winning professional graphic designer based in Calgary. He is the founder and lead designer of Visual Arms as well as the curator and creator of MuseThemes.com, the web’s first premium Adobe Muse template and widget resource. Harris also serves as a Lynda.com author, providing training resources for Adobe Muse, ecommerce and mobile website design.
Self-promotion isn’t always about “ME! ME! ME!” In fact, designers are often tasked with figuring out how to help their clients (or employers) put their best foots forward. Have you created a killer mobile site that’s taken your client’s business to the next level? The judges want to see it in the 2015 HOW Promotion & Marketing Design Awards—the only award that specifically recognizes outstanding promotion design work.
Whether it’s a self-promo to showcase a design firm’s capabilities, a project that touts a client’s goods, an announcement for a major life event, or a student designer’s résumé or design portfolio, if it’s your finest promotional design work, we can’t wait to see it.