Join Paul Trani for an in-depth discussion in this video Adding a menu for mobile, part of Designing a Responsive Mobile Website with Muse.
- When you're creating for mobile,…it's not only the size of items and the contrast…and legibility of things that we need to worry about,…but it's dealing with mobile menus…because we know as we scale this down,…not only does this get broken,…but can you actually select each one of those…if you're on a small mobile device with your thumb.…So we want to swap this out for a mobile menu…that expands and contracts, so that's our goal.…In which case, we're going to dive…into this A Master page right here…and what I want to do at this point…is I want to select this and really,…I just want to hide it at a smaller size.…
So as I scale it down, about 640,…I'm going to add a new media query…by clicking that plus button, typing in 640 right here…and at this point, selecting this item and right-clicking,…I want to hide it in the breakpoint…and I want to replace that with another widget,…so check this out.…This is actually pretty interesting.…Open up your Widget Library, which it's right over here,…and I'm going to use two widget libraries.…
These 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