Join Paul Trani for an in-depth discussion in this video Creating a mobile layout, part of Designing a Responsive Mobile Website with Muse.
- View Offline
- Now when it comes to mobile, this could be…the most important layout that we make.…So we're going to preview the site in a browser.…We already know it looks good at larger sizes…for desktop and tablet, but when we scale it down,…again, looks great, scale it down,…we can see things start to get really tight…right in here, okay?…So this content looks a little choppy,…and I want to view this as if I'm viewing it…on a mobile device.…Am I really going to be reading this text clearly?…What about the portfolio page?…That looks pretty good.…
Experience page, things get really tight as well,…and really, do I need to be able to see this content,…is it clear enough?…And even the contact page, not,…not too tight there, either.…So a lot of adjustments need to happen,…starting with the home page, as I dive into it.…I'm going to scale this down, and kind of right here,…I want to add a break point.…Okay, so clicking there, I'm going to make…a new break point at 640.…We know that's a common size for mobile devices,…so at 640, I really need to start thinking about mobile.…
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