Join Paul Trani for an in-depth discussion in this video Understanding responsive design, part of Designing a Responsive Mobile Website with Muse.
- I'd like to first start off by giving you a good understanding of what responsive design is. Well, what is responsive design? Simply put, responsive design is just a way of building webpages or websites that detect the visitor's screen size and orientation, among other things, which then changes the layout and content accordingly. But the great thing is, is it doesn't have to change the content. I can use the same content, it just gets formatted differently and more appropriately for the device it's displaying on.
So that's what makes it really powerful. Now, a responsive design approach might use flexible layouts, flexible images, and then media queries which are probably the most common when it comes to responsive design. Media queries are just Cascading Style Sheet module that allows content to adapt to these various conditions. So that's what it's technically known as is media queries. And we can dive into this, but really since it's the cornerstone of responsive design, that's why I wanted to point out media queries.
But it's more commonly known as breakpoints. So in Adobe Muse CC 2015 it's known as breakpoints. Real easy to work with. In fact, you can see the screenshot here. That purple bar at the top, well that's a 1280 breakpoint, otherwise known as a media query because that CSS gets written sort of behind the scenes. So if we scale down that screen we end up with something like this, so it's 785. You can see how the layout changes a little bit differently. It's more of a flexible, fluid layout.
And at this point we have this breakpoint at 640 for mobile. So content gets hidden and other content is revealed as well just as easily. Now let's take a look at screen sizes now that we know how breakpoints are added. Screen sizes vary widely. Now I'm actually on a monitor that's 1360 by 768, but it really runs the gamut if you're on a desktop machine like an iMac. You can get into the Macbook Pro retina displays, default is 1440 by 900 and you can change that as well.
And then you can get into Macbook Airs for instance. And again I'm just covering one platform by the way. And you can see that's an even different size. But overall, out of all of those you can start to see a size emerge, 1280 by 720 which is pretty common. We know that as a sort of good base resolution. And then just think about how you sort of navigate websites and use your web browser. Are you always displaying content full screen? You might always be. So, 1280 by 720 is good to just remember for desktop. Now we can go into smartphones, and we have a number of them out there.
I can just start, say for instance, with the iPhone 4 which plenty of them out there, 640 by 960. And then we have this orientation that's happening, 960 by 640. So what happens to our content when the phone gets rotated like that. And then what happens when they upgrade to the iPhone 5? So, 640 by 1136, all right? iPhone 6s, 6 and 6s actually, 750 by 1334. And I'm not even getting into these retina displays, sort of these high dpi devices as well, because it's effectively like doubling the pixels.
So our graphics have the opportunity to look really crisp. So we want to make sure we have a responsive images. And I'll show you how to do that. But even as we dive into the iPhone 6 plus, even larger, almost the size of a desktop in terms of resolution it's really wild. And I didn't even get into all of the various Android devices and other platforms out there. But I just wanted to show you how it runs the gamut. And again you start to see sort of a base size emerge, 640 by 960 is roughly the size that any decent phone is at these days.
But you can go to an older phone, smartphone that is, 240 by 320, okay. So that's what's going on, and we want to remember these things. We also want to get into tablets, iPad 3 we can look at that size. Pretty much the resolution of a desktop and then we need to remember that if they rotate the iPad what does that content look like? And just think about how you might use your smartphone or a tablet, and that will be a good indication of how you should build your content. And we can get into iPad mini again, 768 by 1024.
So you should start to feel a little overwhelmed because there are so many screens, okay? And I didn't even get into the Android screens, okay? So, apologize for that, but it's going to be more of the same running the gamut. But in general we'll start to see 1024 by 768 emerge. And then we've got to remember the horizontal orientation of it as well. So either way we have to remember 1024 in this case. Then we can dive into sort of the common sizes. What have we learned? Well, the common sizes for a phone might be 640 by 960.
There is also a 320 by 240, that's the bare minimum. But that's what I'm going to remember in general. Tablets, 1024 by 768, and then desktop about 1280 by 720. So this is what I'm just going to remember in the back of my head as I'm building out my content. But these sizes could determine where there are breakpoints. That's pretty much a given. I could remember that and say okay, here are all my breakpoints. Notice that if you accommodated for every single device, you would have so many breakpoints it would be unmanageable.
That's why I just offered up the most common sizes. Now when it comes to determining breakpoints, a better practice is actually keep in mind those common sizes that I just mentioned, but let the content determine where there are breakpoints. So if a design starts to look bad at a certain size regardless of what devices are out there, I want to make sure my content looks good regardless of the screen that it's on. So that's the goal even in this case. We want to make sure that it looks good as we dive into these different sizes regardless of where they're at.
They could be common sizes, but they might not be necessarily, even if you take a look at 785. Well that's not a resolution we looked at, but I needed to change it at that breakpoint size in order for my content to look good. And then the common size of 640. All right, this also helps us design for the future because when we let the content determine where the breakpoints are, we're safeguarding us for any new devices that come out in the hopes that it will look good regardless of what's in the future.
And consider how usage changes across devices. So we have different cases for smartphones and tablets. Well, chances are we need to make buttons large enough to touch with a finger. So think about your finger size. It's about 40 pixels by 40 pixels roughly. We want to make it big enough to where you can actually click on any option available. Also for tablets we want to make sure the contrast is sufficient to read in bright light, even in low light. So you just increase the contrast. You can't leave a lot of room for subtly because it will start to get lost on the mobile.
And lastly, consider the bandwidth, okay? Now we might have a high bandwidth connection at home, but that's not necessarily the case of course, as you're traveling around on your smartphone and tablet. But either way, you want to have your content look good on desktop, on your tablet device, and then formatted correctly as well. You can see this little, it's called a hamburger if you will is the slang term for that menu option there. So large enough to click and expand that menu. And you can easily select any one of those additional options. The nice thing is that Adobe Muse makes it easy to create content that looks and works great across devices.
So I'm really excited about this course. Let's go ahead and dive right on.
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