Luckily for us, this is actually a pretty easy trick. In this case, we have a sidebar on the right that will need to move under the rest of the content for the smaller views. Most email designers use a table structure to create a “float:left” type effect for their content blocks. In the next step, we’ll add a style to make the tables stack under each other. The email won’t get any smaller, though, because the table structure is still keeping it at the same size. Now we’re going to change the size of these images in the media queries, like this: you resize the window, you should see the blue bar and horizontal rules get small enough to accomodate the new responsive behaviors. On the other hand, if we don’t specify a height, it will automatically maintain its ratio. If we leave that height attribute, the image will look stretched to reach that height. Notice that we removed the height attribute. We’ll do the same thing for them, with a custom class. The featured image for the email is too wide, as is another image being used as a horizontal rule near the bottom. This bar is set to be 393 pixels wide, which will combine with the rest of the header to be too big. For instance, in the email’s header, we have a long horizontal bar. We’re going to add some special classes to help us resize them. Some of the images in this email are so wide (more than 440 or 280 pixels wide, respectively) that they’re going to break out of the new sizes for the table that we picked in step 2. That’s why, in the next step, we’re going to need to apply classes to some of the images in this email to control their size as well. Any image or table that is too wide for the new table width will cause it to stretch to accomodate the wider element. That’s because resizing the container element isn’t the only thing we need to do to make the email reach the correct width. Now, we’ll add this class to our media queries: you save your file and resize the window now, you won’t be able to see any changes. In this case, we’re looking at just: Īll we need to do is add a class to this table to control its width. To start, let’s identify the parts of the email that determine its width. We need to control the width of the containing element, so that the email slims down to a single column on smaller devices. Control the Width of the Container Element. You’ll see this in action in the next step.ģ. Then we can add the attribute selector to each style in the media queries. We’re going to place our styles inside these media queries in the later steps. The query that triggers on smaller screens comes last so that it will take precedence over the earlier CSS rules in the block. For more on min/max width, check out this blog. The second query triggers for screens of less than 479 pixels in width.
#RESPONSIVE DESIGN TUTORIAL 2014 CODE#
You can check out the basic code right here: first media query will trigger for screens of less than 640 pixels in width. For this email, we’re going to use the same media queries that we used in our Responsive Template. A media query is a conditional statement that contains extra CSS rules to change the appearance of the email when the conditions in the statement are met. This is where the media queries go, and that’s what is going to make your email responsive.
![responsive design tutorial 2014 responsive design tutorial 2014](https://www.htmlcenter.com/wp-content/uploads/2015/01/HTMLCenter-new-look-tablet.png)
Selecting a region changes the language and/or content on you don’t already have a style block, you’re going to need one. For more information, see Migrating existing Adobe Muse websites to responsive layout. Change the layout of your existing Adobe Muse websites to fluid width, and tweak the layout of objects to suit different browser widths.
![responsive design tutorial 2014 responsive design tutorial 2014](https://i.ytimg.com/vi/wYU5UuSuuzA/hqdefault.jpg)
Converting existing websites to responsive websites: Adobe Muse allows you to migrate your existing Adobe Muse sites to responsive layouts.To create a new responsive Adobe Muse website, see Create a new responsive site. Use a single Adobe Muse file to create different layouts for different browser widths. Using a blank layout: Adobe Muse provides a blank canvas without restrictive templates or grids to design a responsive site.For detailed information, see Using responsive starter templates. Customize the starter templates and publish your responsive site with a few clicks. Using starter files: Adobe Muse offers customizable, responsive starter templates to help you get started quickly.You can begin to create responsive websites in Adobe Muse in one of the following ways: