1 What the heck is Responsive Web Design presentation by John Polacek 2 responsive websites respond to their environment 3 Adaptive(Multiple Fixed Width Layouts) Responsive (Multiple Fluid Grid Layouts) OR 4 Mixed Approach Fixed width for large and medium.Fluid width for small. 5 Why Day by day the number of devices platforms and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how well build websites for the decade to come. - Jeffrey Veen 6 Small Medium Large One site for every screen. 7 Taking a closer look
A Responsive Website can be achieved through these short features
The site must be built with a flexible grid foundation.
Images that are incorporated into the design must be flexible themselves.
Different views must be enabled in different contexts via media queries.
8 Flexibility Part of any good web design in these modern times is a flexible grid. This practice will accommodate a variety of browsers already that demand the design be flexible and fluid. Tiny Fluid Grid is a great tool for creating fluid grids. It lets you make grids with up to 1200px maximum widths and is based on 1kb grid. 70 essential resources for creating liquid and elastic layouts has everything you need to get started creating your own flexible layouts. 9 Images Another feature of Responsive Web Design is images that move and scale with your flexible grid. Unstoppable Robot Ninja has a simple script that automatically resizes your images. Zomigi allows you to selectively hide parts of your image dynamically. 10 Media Queries Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agents features such as the browser windows size. Media queries and responsive design allow us to think outside of the constraints of a screen size or resolution and start building websites that flexibly adapts to all mediums. 11 Who is doing it Not just demos design shops and vanity pages. Real client work. 12 The Boston Globe Largest responsive web design project to datebostonglobe.com 13 Grey Goose Responsive site for Grey Goose with parallax scrolling animationwww.greygoose.com 14 Clean Air Commute Challenge Promo siteclearairchallenge.com 15 Barack Obama The Obama campaign continues to be at the leading edge of web technology.barackobama.com 16 ...and plenty more mediaqueri.es 17 Time Money Browser Support Performance Content W ebsite vs. Web App When to use it Things to consider 18 How Stop Thinking in Pages. Start Thinking in Systems. - Jeremy Keith 19 Frameworks (save time) OR Roll Your Own (more control) 20 Best Practices Content Check Start Small (Mobile First) Exit Photoshop Enter Browser Make it modular Always be optimizing Best practices still emerging! 21 Where can you learn more 22 (No Transcript) 23 (No Transcript)
PowerShow.com is a leading presentation/slideshow sharing website. Whether your application is business, how-to, education, medicine, school, church, sales, marketing, online training or just for fun, PowerShow.com is a great resource. And, best of all, most of its cool features are free and easy to use.
You can use PowerShow.com to find and download example online PowerPoint ppt presentations on just about any topic you can imagine so you can learn how to improve your own slides and presentations for free. Or use it to find and download high-quality how-to PowerPoint ppt presentations with illustrated or animated slides that will teach you how to do something new, also for free. Or use it to upload your own PowerPoint slides so you can share them with your teachers, class, students, bosses, employees, customers, potential investors or the world. Or use it to create really cool photo slideshows - with 2D and 3D transitions, animation, and your choice of music - that you can share with your Facebook friends or Google+ circles. That's all free as well!
For a small fee you can get the industry's best online privacy or publicly promote your presentations and slide shows with top rankings. But aside from that it's free. We'll even convert your presentations and slide shows into the universal Flash format with all their original multimedia glory, including animation, 2D and 3D transition effects, embedded music or other audio, or even video embedded in slides. All for free. Most of the presentations and slideshows on PowerShow.com are free to view, many are even free to download. (You can choose whether to allow people to download your original PowerPoint presentations and photo slideshows for a fee or free or not at all.) Check out PowerShow.com today - for FREE. There is truly something for everyone!