Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
One of the more unique challenges facing web designers is creating websites for small screens. While it is possible for smartphones to display an entire desktop site, the user experience can be subpar, since you may have to zoom in and pan around to find a relevant information that has been designed for a much larger screen size than you are looking at. Let's take a look at how to create a specific site dedicated for a mobile phone within Muse. Now, we are looking at a document that has been designed for the desktop and--if I click on the Tablet--for the tablet already. But what we want to do is add a phone to this site.
So we are going to click at the +Phone button. Similar to what we did with a Tablet Layout, we are going to copy from the Desktop and we will copy the Site Plan and all the Page attributes. Now, this time, rather than bringing over all of the information from the main desktop site, we are going to create a simplified, shorter, smaller, phone site, so we are going to remove some pages we do not need. I am going to remove the Collections because I do not want people to browse the Collections from their phone-optimized site, because it is far too complex for a small screen.
So let me get rid of those pages, and I am also going to get rid of this Pasteboard page. So now, we have a very short four-paged site, and now we have to copy over the content to fill these pages. Back on our Desktop site, I have a Pasteboard over here called the Phone pasteboard, and I have already predesigned all of these pages for the phone size. So what we need to do is I am just going to select this and copy that to the Clipboard. I am going to go back to the adding phone page and we will choose Phone (Home). I will paste this in, and that looks pretty good right there.
Now, at the moment, we see that we don't have a header or a footer, so I need to add a master page to this. So, back to the Plan view, I am going to go to my Desktop, and on my Desktop, I am going to grab that homepage. I am going to zoom out and I am going to select all of this and copy it to the Clipboard. We will go back to the Plan view, go to the Phone page, and go to the Phone's master. On the master, we are going to paste. We're probably we are not going to use all this content. We will have to zoom out to see it, because we are on a very small site, and I am going to get rid of the logo. And we are just going to bring the menus right down here, and we are going to bring the other items up. So I am just going to click and drag to bring this up here.
This repeating tile is a little too busy for this page, and we are just going to resize this footer. There's some extra text over here we do not want. And I will zoom in so we can see this a little easier. That's looking pretty good, and we will make it fit it nicely on the sides, there. Now for the text, I am going to have to wrap this down to a second line, so I am just going to select this and put a Return in, and then reposition this so it is nice and centered and get rid of the extra spacing over here. There we are.
That looks like a good footer. Now, back up at the top, there is no way this is going to fit on the page; it is far too large. So I am going to grab the side of this and just bring this in to get it a little closer, so we can have everything fit nicely. But looking at this, this text is a little too big, so we are just going to go to our Font Size--and that is going to be in our Text menu-- and we are going to bring the Font Size down to about--I think 13 point looks pretty good. There we are, and maybe we would make this line separator a little taller. That is looking pretty good! With this closed, I can close these additional pages, and now I am going to the Home Phone page, we can see that, oh, that looks pretty good at the top, and that's looking pretty good at the bottom. And I will just position this centered right here.
And back in out Pasteboard, I can just go and start to copy the rest of this. So I am going to copy this page, go back to Plan. We will grab About Us, paste it in here. That looks pretty good, on the Pasteboard page. We will grab this text, copy it to the clipboard, back in the Phone view, Volunteer, paste this one in here. And as you can see, as I drag down, the footer, just like the desktop pages, will continue to expand to give us more room.
And then finally, the last page in the Plan view we need to get is the Contact Us information. I'll grab this, go to Contact Us, we will paste it in, and that is looking pretty good. And just so you know, if you are pasting over the map from the larger size, like the desktop or a tablet, the map may not fit, and you can't click to drag and resize it to make it fit because we have to edit the HTML. So all you have to do is select this HTML widget, right-click, and choose Edit HTML.
Within this you can change the Height and the Width code to make it whatever size you need this to be, and that is looking pretty good here. While we made the decision to create a phone-optimized site with less content, you are able to making longer pages with all the content from the desktop. However, you may need to design some of the widgets in order to make the links larger, so people can use their fingers to interact with them properly on smaller screens.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.