Join Paul Trani for an in-depth discussion in this video Creating a fixed header, part of Designing a Responsive Mobile Website with Muse.
- You could argue that the header's…probably the most important part to a site…because really it's going to have the name of the site…or the logo, as well as allow you to navigate…all the other pages.…So it gets to be pretty important.…And if we double click into this A-Master page…you can see this is not looking very good.…So I want to do a couple things.…I want to change the look of this menu bar…and I want to start pinning the contents…so it's always available…regardless of what size you scale it at.…So if I click again, I can jump into this home button…but really what I'm going to do…is I'm going to change the look of this,…not only for the home button.…
If I change the background to a color or nothing…it changes it across all of those buttons…just like I did right there, okay?…You can see that pretty well,…in fact, let's zoom in about 150%.…You can see what happens there.…In fact I can change the font,…change it from dare I say a boring Georgia…to a font that's going to match our site,…which is the Acumin Pro bold, okay?…
Author
Paul Trani
Released
2/8/2016These tutorials teach the basics of designing a responsive website in Muse CC 2015. The site you complete in this course will "respond" and look great across desktop, tablet, and mobile. You'll never have to create separate versions of your sites again! And the site is not just responsive. Author Paul Trani also shows how to make it modern and fully functional, complete with Typekit fonts, flexible imagery, a portfolio, social media integration, and even a contact form. All without writing any code.
Unlike creating and maintaining different sites for mobile, tablets, and desktops, with a responsive design you'll only have to update one site. That content changes and adjusts based on the screen it's on—whether it's on a laptop, tablet, or mobile phone. Follow along to learn how images, text, and other content can be made to respond based on the screen size, orientation, and other options. The end result is a gorgeous site that looks great regardless of where it's being viewed.
- Understanding responsive design
- Using images and text in Muse
- Creating flexible ("fluid") and fixed content and layouts
- Adding a portfolio, contact forms, and social media buttons
- Creating tablet and mobile layouts
- Using resolution-independent SVG images
- Uploading and testing the website
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome1m 7s
-
-
1. Creating a Website
-
Importing images8m 24s
-
Using fonts and text4m 18s
-
2. Creating Fluid and Fixed Elements
-
Adding flexible images3m 26s
-
Creating a desktop layout5m 49s
-
Creating a fixed header4m 46s
-
-
3. Adding Content to Your Website
-
Creating a portfolio5m 49s
-
Adding a contact form4m 54s
-
Implementing social media4m 23s
-
-
4. Creating Layouts for Tablet and Mobile Devices
-
Creating a tablet layout7m 16s
-
Creating a mobile layout5m 34s
-
Adding a menu for mobile6m 7s
-
-
5. Making Flexible Graphics
-
Creating SVG images2m 39s
-
Linking graphics and text1m 31s
-
6. Testing and Uploading
-
Conclusion
-
Goodbye49s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating a fixed header