Making sure to create an adaptive layout is an essential part of the app development process. This course will teach you how to create mobile layouts for a website built with Muse CC. Software required: Muse CC.
Nowadays, an app's functionality and design both need to be adapted for mobile phones. This course, Muse CC Adaptive Layouts, will show you how to create a unique mobile layout for a website built with Muse CC. Along the way you'll be taught best practices and common techniques used to create a successful layout. First, you'll learn how to copy elements from a desktop layout. Next, you'll discover how to add widgets for interactive elements. Finally, you'll learn how to test and publish your site to the web. By the end of this course, you'll be able to use Muse CC to create well-designed and functional mobile apps. Software required: Muse CC.
Introduction In this course, we're going to talk about how we can create unique layouts for mobile devices. We'll talk about mobile design, usability, and design best practices. We'll also review how we can create unique phone layouts, whether that be out of the gate when creating a new Muse site, or how you can add a phone layout to an existing desktop site. We're going to focus on how we can create interactive mobile content using the available widgets within Muse. We'll talk about the accordion widget, the slideshow widget, and also some of the different social and form widgets as well. We'll review how we can use paragraph styles effectively to increase your productivity when working on mobile layouts. We'll then wrap up the course by talking about how we can test our mobile layouts and how we can go about publishing them.
Course Overview Before we get started creating content inside of Muse, I think it's important to take a look at the completed example of the desktop site, and then look at the mobile version that we'll be building. So here I am on the home page of the site, and you can see that it's broken up into several different sections. There's also some interactivity happening here with a lightbox. If I click one of these portfolio elements, you'll notice I'm brought into a lightbox and I can see that design. If I click in the gray area, the lightbox goes away. Not only do we have the Home page, but we also have an About page that we'll take a look at building in the mobile version, and also a Contact page. This Contact page contains a couple of different widgets. We have a form widget over here on the left-hand side. We have a map widget over here on the right-hand side. So let's go ahead and take a look at what this looks like in the completed mobile version. Here's the completed mobile version of the site running on an iPhone. Here we can scroll through the different areas. The Portfolio section is an interactive element that we can swipe through to see each of the portfolio pieces, and you can see all the content that we have added to this page. We have an interactive menu. If we click these three horizontal lines, you'll see we have a menu, and we can simply click on one of those elements to navigate to the page. You'll see that the widgets that we used within the Contact page have been updated for the mobile layout. So that should hopefully give you some idea as to where we're headed throughout the course. Like I said, we're going to be taking a look at how we can take an existing desktop site and translate it to a mobile-friendly site.