You may see a warning for missing fonts or missing/modified images.
Navigate to the Lessons > Lesson10 folder, and open the SPC-mobile.muse file. You can open the final mobile site in Muse by choosing File > Open Site. Open a browser and type to open the site to preview what you’ll build.The alternate layout allows you to serve up smaller, resized image files therefore, the site performs well across all platforms and browsers.įirst, you’ll explore the final site in your browser.
#RESPONSIVE RESIZE MUSE DOWNLOAD#
The mobile layout features in Adobe Muse enable you to optimize your mobile layouts so device users do not download larger files unnecessarily. So sending all of the same larger images and content to a mobile device may make for a slower and less-than-optimal experience. Mobile devices that view your site tend to have slower processors and connection speeds. Why would you create alternate layouts for a mobile device? Often, a site designed with desktop viewing in mind has larger images and more information (images, scripts, etc.). You’ll notice that the Pin options are grayed out and inactive when you’re designing phone or tablet layouts. As a result, it’s necessary to come up with alternate strategies such as using motion scroll effects to ensure an element stays in the same location in relation to the browser window, even if the page is scrolled for pinned objects when you’re designing phone and tablet layouts. It all happens behind the scenes.Īt the time of this writing, mobile browsers do not equally support pinned objects. You don’t have to do anything to ensure that visitors using a tablet will see the tablet layout and visitors using smartphones will see the phone layout.
#RESPONSIVE RESIZE MUSE CODE#
The detection code then automatically displays the correct layout. Adobe Muse generates code for the site that includes detection scripts that identify which type of computer or device and which type of browser the visitor is using to access the page. When a page is opened in a device, the correct page is opened, depending on the size of that device. For every version you create, Adobe Muse will create another set of HTML pages. You can start with any of those design layouts, and then create versions for the other layouts. Here’s how alternate layouts work in Adobe Muse: For the sake of simplicity, suppose you have a website with a single web page and you decide that you need the viewing experience to be optimal on desktop, mobile, and tablet devices. Although this isn’t “responsive design,” which means the entire design detects and resizes to display optimally on the viewport size, it is a form of adaptive design. Adobe Muse allows you to create alternate layouts for each page of your site. These days when you’re creating a website, you may need to consider which mobile devices the site will be viewed on. See “Getting Started” at the beginning of the book. Another reason why starting fresh is not a bad thing.If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. I deleted the existing ones and simply put them back in fresh and they worked fine after that. The next day I played with one of the downloadable starter designs and realized that they can in fact be responsive. The second problem that was a little more elusive at first was that my existing YouTube videos and Google Maps didn’t give me the option to make them responsive width. I had a few and it wasn’t a big deal to lose them. 1st as I mentioned in the video, currently Muse Scroll Effects are not supported if you use a Fluid Design. I did run into a couple of things during the process. You’ll likely end up with fewer breakpoints that way. With the CC Libraries feature now in Muse it would be easy to put all your existing elements in a CC Library and then layout the pages from scratch. The amount of work at the end might be the same depending on the site. Obviously you can convert your existing sites to a fluid responsive design, but you may want to take this opportunity to start fresh with a blank page. I learned a lot over the weekend converting four sites and it really made me think in terms of how I would design a site from scratch. It’s great now to have the choice of doing either fixed layouts for desktop, tablet or mobile OR a responsive layout to cover all display sizes. The replays are usually posted to my YouTube channel afterwards. Be sure to tune in to my show LIVE on Tuesdays and Fridays from 10AM – 12 Noon ET at /adobe.