When you make a new document in InDesign you can choose a web document profile and InDesign will offer up a number of web appropriate preset sizes for you.mostly it depends on your target audience. Will visitors to your site be coming mostly on desktop machines, iPads, phones, older equipment or newer? The latest desktop Systems will allow your visitors to see wide screens older systems not so much.

1. Media Queries Definition

Form not Working on Mobile Devices using Adobe Muse Responsive (Breakpoints) Hi,Having trouble with the form not displaying at all on mobile devices.I am using Adobe Muse CC (responsive) to build the website.I have three breakpoints s.

Adobe Muse though now at end of life is still a viable option for creating a working prototype. It defaults to a screen width of 960 pixels so maybe a 960 x800 page would be a good place to start, maybe.

First, I would use Illustrator or Photoshop. They can support CSS export and are more appropriate for web design.For sizes, you will need two to three layout concepts.

I would suggest the following approximatesizes.Desktop: 1280 widthTablet: 1024 width (horizontal view)Phones, look at:Website technically don't have a depth limit, but if you want your home page to fit on screen, try the following.Desktop: 1024 heightTablet: 720 heightPhone: use previous linkFor the side navbar, it could change for each view. What you need to do if figure out the longest amount of text you would have in the nav links, then determine what size you want it to be in each view. For example, you might want it to be 240 px in the desktop view.(Note: ems or percentage might be an better measurement option than pixels when actually producing the site, but the problems in questions don't support those measurements.).

Usually, the various responsive sizes are linked to a static dimension (often in pixels), but the dimensions are modified by CSS queries as Rob mentioned.Just to clarify my last post, CSS media queries are trigger points they don't define static pixel dimensions, but are conditional i.e. If the screen size or browser space is less than 900 pixels then update all of the enclosed CSS styles. You could have a table or a div with a specific width and height defined in one of the styles, but you usually wouldn't want to do that because there are too many screen size variables to deal with.As you suggest, Marie could show what she wants to have happen at some chosen break point widths, but it is futile to get too specific or target any device.

Responsive web design is no longer cutting edge; it's required. But many designers are still intimidated by the terminology and the code.

Luckily, Adobe Muse makes it all very easy and visual to create a site that works and looks great across all screens. No need to worry about digging deep into HTML or CSS.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. For the past 15 years, Paul Trani has been developing interactive projects for agencies and corporations.He evolved from humble beginnings with Play-Doh and crayons to become the go-to guy for creative development and training. Paul has worked directly with Adobe and other companies as a presenter and trainer because of his technical abilities and his passion for the industry.

He has created numerous Adobe eSeminars, which he uses for self-evaluation, and he is constantly learning new hardware and software. Related courses. Welcome- 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. Zksoftware access control.

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.

Media Queries Definition

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. Practice while you learn with exercise files.