Design a responsive website without writing code
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.
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.
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 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 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.
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.
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 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.
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.
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.
That's it — you're done. Tell us what you think about this tutorial.