Learn how to create a responsive website from scratch in Adobe Muse.

Review the responsive website that you can build throughout this tutorial. Examine the web page and see how the responsive elements adapt when viewed across desktop, tablet, and phone browsers. 

If you want to re-create the responsive website, open the Responsive Web Design (Muse) library. Click Save to Creative Cloud to create a copy of the library in your own account. If you would like to reference the starter files, open the Responsive Web Design Starter Files link to download them to your computer.

Note: You need to be signed in to your Creative Cloud account to save the library. Get an Adobe ID if you don't have one.

Review responsive design (1:18); Access project files (2:48)

Build a site plan

Create a new site, explore Plan mode, and get your site plan in place. Map out and name the pages you’ll build for your site, and then add page titles. 

Lay out for web vs. print (00:20); Review final page design (2:10 ); Add pages to the site plan (2:27)

Setup a Master page

Create a master page to hold parts of the design that you’ll use on every page of your website. Add the paragraph and graphic styles that you'll use throughout the website design. 

Open master page and review modules (00:18), Review Master page elements (00:55); Design Master page (1:25 ); Productivity tips (2:24)

Create and style the website’s footer with responsive properties. Add icons for social media and define rollover states to provide a visual cue when users mouse over the icons. Associate the footer icons with hyperlinks to open other web pages from your site. Use the menu widget to define the navigation for your site. Finally, you will use another widget to add a form to the footer.

Define footer area (00:09); Add footer elements (00:39); Define rollover states (2:32); Add hyperlinks (4:03); Add navigation menu to footer (5:30); Add form to footer (7:02)

Create a header

Create and style the website’s header with responsive properties. Add the site logo and a button and adjust the layout using alignment features. Add a menu to the header for site navigation and customize its appearance.

Define header area (00:12); Add header elements (00:31); Customize page menu navigation (1:42)

Add responsive elements to the Master page

Use pinning and other responsive settings to ensure page elements will display as expected when the browser size changes across devices. Add breakpoints to your design to manage the transition between layouts when the browser changes size. Use the responsive tools to preview how your site will look in different layouts. Adjust page elements for optimal viewing at different breakpoints.

Pin elements for responsive layout (1:18); Preview design in browser (3:34); Add breakpoints (4:19); Reposition elements for different breakpoints (7:27)

Add a responsive menu

Design and lay out a menu that adapts for optimal display across desktop, tablet, and phone browsers. Learn how to structure the elements in the header and footer so that, as the menu layout changes from a wider desktop display to a smaller phone display, the items adjust accordingly.

Add touch-enabled menu (00:52); Structure page elements by creating layers (3:32); Show responsive menu only on tablet and phone layouts (5:29)

Create a layout for mobile display

Add a breakpoint for a phone layout. Rearrange the page elements for a vertical layout for optimal display on phone browsers which have a narrower viewing area than desktop or tablet displays.

Optimize footer content for smaller layouts (1:02); Add breakpoint (3:00)

Build the home page

Complete the site’s Home page design. Fine-tune the layout by making adjustments to the text and images so the content resizes and scales correctly across browsers. Define additional rollover states to enhance the user’s experience as they navigate different parts of the page.

Define separate header and footer breakpoints (00:52); Add and review responsive home page elements (2:14); Review rollover state and scaling settings (7:19)

Finish and publish the website

Complete the website design and review the use cases for adding breakpoints on invidual pages that are different from the breakpoints on the master page. Learn additional responsive design techniques such as how to hide and display content for optimal display across layouts, scaling text to make it legible on smaller screens, or copying formatting and layout across breakpoints.

Finally, learn the options for sharing your site for review or publishing it live.

Review breakpoints (1:00 ); Adjust images for responsive layout (2:36 ); Format text across breakpoints (4:26); Publishing options (6:42)

 

That's it — you're done. Tell us what you think about this tutorial.

 

03/14/2017
The Royal Studio
Was this page helpful?
Yes
No