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.
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.
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.
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.