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.
Course info
Level
Intermediate
Updated
Aug 30, 2016
Duration
2h 6m
Table of contents
Course Overview
Introduction
Responsive Site Creation
Setting up the Single-page Navigation
Adding Content for Mobile-first Design
Adding Content for Other Device Widths
Publishing the Site
Description
Course info
Level
Intermediate
Updated
Aug 30, 2016
Duration
2h 6m
Description

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.

About the author
About the author

Mario Macari is an award winning illustrator, animator and graphic designer that fell in love with writing code. He develops and codes for major corporations and teaches coding classes at a couple of colleges in Southeastern Wisconsin. Mario Macari holds a BFA in Illustration and certificates galore from software companies.

More from the author
Creating a Site with CSS Grid and Bootstrap 4
Intermediate
2h 14m
Feb 19, 2019
Bootstrap 4 for the Developer
Intermediate
4h 5m
Jun 20, 2018
Making Games in Scratch 2.0
Beginner
3h 14m
Dec 11, 2017
More courses by Mario Duilio Macari
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Mario Macari, and welcome to my course, Building a Responsive Single Page Website in Adobe Muse. I'm a graphic designer, front-end developer, freelancer, and college adjunct professor. I've been working with graphic design and websites a long, long time, and I have been creating art with computers for my entire career. In this course, we'll put together a single page responsive website using Adobe Muse. You can use Adobe Muse for your final project or for rapid prototyping to show your clients concepts interactively. I hope you'll join me on this journey to learn responsive web design with the Building a Responsive Single Page Website in Adobe Muse course at Pluralsight.

Responsive Site Creation
Hello, this is Mario with Pluralsight, and in this module we'll use Adobe Muse for responsive site creation. We'll discover how to get our site set up by creating the initial Muse file. Then we'll create breakpoints for a mobile device and a desktop device. We'll create the footer div and the header div. We'll create a typographic logo using fonts from Adobe. We'll add social media icons to our footer with the help of Font Awesome. And then we'll add customized HTML, CSS, and JavaScript to get our news page to work the way we'd like. So let's get started.

Setting up the Single-page Navigation
Hello, this is Mario with Pluralsight, and in this module we'll set up the navigation for our single page website. We'll adjust the header and footer elements because of a client design change. We'll add guidelines based on the designer's Photoshop file to divide the page into sections. We'll drop anchors into place to serve as in-page links and to mark off each section. We'll use the menu widget to get the page's sections linked up. We'll add a menu icon from Font Awesome. We'll nest the vertical menu widget inside of an accordion menu widget to give us drop-down menu action. And then we'll link up the social media page icons with anchor tags and URLs to get them to go off-site to our social media pages. So let's get started.

Adding Content for Mobile-first Design
Hello, this is Mario with Pluralsight, and in this module we'll first add the content for our mobile design. We'll talk about three ways of placing the hero photo in the Hero section. We'll import the SVG logo. We'll copy the quote from the copy. text file and set up rounded corners for the photo in the Quote section. We'll position the triple photo file. We'll add the background photo to a div for the About section. We'll set up the copy in the About section and add a States Button widget. We'll construct the text block for the Beaches section and duplicate it. We'll add the background photo and copy to the Best Beaches div. We'll import the photos for each beach in the Best Beaches section. We'll use the simple contact widget and a Google Maps widget for the Contact section. Then we'll move the anchors and tweak the menu. So let's get started.

Adding Content for Other Device Widths
Hello, this is Mario with Pluralsight, and in this module we'll be adding content for our other device widths. We'll talk about the mess at the 1250 breakpoint. We'll adjust the hero photo and the SVG logo. We'll rearrange the quote and rounded quote photo. We'll rework the triple photo file. We'll alter the About section. We'll completely reconstruct the text blocks for the Beaches section. We'll create three columns for the best beaches div. We'll split the simple contact widget and the Google Maps widget in the Contacts section into two columns. Then we'll talk about setting up the other breakpoints. So let's get started.

Publishing the Site
Hello, this is Mario with Pluralsight, and in this module we'll be looking at three ways to publish our site. We'll export the site in HTML to transfer to our very own hosting service. We'll use the built-in file transfer protocol. We'll upload our site to Adobe Business Catalyst. Then we'll talk about third-party widgets and templates. So let's get started.