Create a responsive website

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) Creative Cloud 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.

If you have trouble accessing the Creative Cloud Library folder, you can download the assets in the form of a Muse library to your computer. Double-click the Responsive Web Design (Muse).mulib file to open it automatically in Muse. Then, access these files from the Muse Library (Window > Library) panel throughout the rest of the course.

Note: You need to be signed in to your Creative Cloud account to save the library.

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. 

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. 

Create a footer

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.

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.

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.

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.

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.

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.

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.