Join Paul Trani for an in-depth discussion in this video Creating SVG images, part of Designing a Responsive Mobile Website with Muse.
- With all of the retina display or high resolution…screens out there,…it means all of my graphics have to be high…resolution as well.…Which means they're going to take longer to download…okay and that's what's going on here.…You can't help it…with bitmap graphics…or these images, quite frankly,…any photo is going to be bitmap.…But when you can you actually want to make vector graphics.…In this case,…SVG to be more specific.…They are made in Illustrator,…saved out from Illustrator…as SVG…means that it is scalable.…As we take a look at this…it's always going to be nice and clean.…
So that's how I want my graphics to be where I can,…in fact for this site,…I can easily drop those into the contact page.…So you can place graphics…just like any other graphic…selecting this Behance SVG,…let's select this LinkedIn…and then this YouTube SVG.…There are some others in there for you…and then I can just kind of drop them in.…So I'm just going to drop it in like that,…you can see that it actually is code, okay…so it's math that's being used…
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