Building a Responsive Single Page Website in Adobe Muse
Adobe Muse makes creating responsive websites a simple task with no coding and a "what you see is what you get" interface. This course will help you get up and running with Adobe Muse.
What you'll learn
Creating a mobile website for your company or product is important since the majority of people now view the web from mobile devices. In this course, Building a Responsive Single Page Website in Adobe Muse, you will build an entire single-page responsive website for a fictitious company and place it on a server. You will start with a look at the differences between responsive design, adaptive design, and mobile-first design. You will then get to use Adobe Muse for responsive site creation, including creating breakpoints for a mobile device and a desktop device and creating a typographic logo using fonts from Adobe. You'll also get to export the site in HTML using the built-in file transfer protocol to upload your site to your own hosting service. By the end of this course, you'll be better prepared to create a responsive site using Adobe Muse.
Table of contents
- Introduction 2m
- Responsive Design, Adaptive Design, and Mobile-first 4m
- Breakpoints and Muse 1m
- Where the Photos Came From 1m
- Looking at the Provided Photoshop File 1m
- Organizing the Provided Photoshop File 1m
- Getting the Division Sizes 1m
- Getting the Font Information and Looking at the Copy 3m
- Uploading the Photos to the Creative Cloud Library 2m
- Creating an SVG from an Illustrator File 1m
- Relinking Assets 2m
- Summary 1m
- Introduction 1m
- Placing the Hero Photo in the “Hero” Section 2m
- Importing the SVG Logo for the “Hero” Section 2m
- Pasting the Quote in the “Quote” Section 2m
- Creating the Rounded Photo in the “Quote” Section 1m
- Positioning the Triple-photo File 1m
- Adding the Background Photo in the “About” Section 1m
- Setting up the Copy in the “About” Section 2m
- Adding the States Button Widget in the “About” Section 2m
- Constructing the Text Block for the “Beaches” Section 3m
- Adding the Background Photo in the “Beaches” Section 1m
- Placing the Copy in the “Best Beaches” Section 3m
- Placing the Photos in the “Best Beaches” Section 2m
- Installing the Simple Contact Widget for the “Contact” Section 3m
- Exploring the Google Maps Widget for the “Find Us” Section 3m
- Moving the Anchors and Tweaking the Menu Widget 3m
- Summary 1m
- Introduction 1m
- The 1250 Breakpoint Mess 1m
- Adjusting the Hero Image and the SVG Logo 3m
- Arranging the Quote and Rounded Quote Photo 1m
- Reworking the Triple-photo File 1m
- Altering the “About” Section 2m
- Life's a Beach 6m
- Three Columns for the Best Beaches 7m
- Get a Handle on the “Contact” Section 3m
- Other Breakpoints 2m
- Summary 1m
About the author
Mario Macari has spent more than ten plus years as a coder specializing in HTML5, CSS3, Javascript and other client and server side languages. He is also an award-winning artist and holds a BFA in Illustration. He has worked on projects for companies like Disney, Apple Computers, Microsoft and DC Comics. He currently teaches coding, design, UX/UI and Adobe products at two Southeastern Wisconsin colleges. Mario Macari has an "A+" rating with the Better Business Bureau.