Creating Responsive Web Design
Running time: 92 minutes
Learn to create a web design that automatically conforms itself to multiple screen sizes. This course will show you a step-by-step process for creating a design that rearranges content, resizes elements, and adapts itself based on the size of your visitor's screen size.
Learn how to reposition the main navigation of the site based on the device browsing your website.
We'll create a web design that makes use of HTML5 and CSS3, while maintaining backwards compatibility with older browsers. The secret ingredient of CSS3 that makes this all possible is the media querying capability. CSS media queries allow us to define CSS rules based on screen size, and ultimately give us precise control over how our designs adapt to different screen sizes. In addition to adjusting layout, we'll explore using CSS to define all imagery in our design, allowing us to send optimized imagery along with our customized design experience.
Apply varied amounts of compression to images to optimize download speeds across devices.
Course includes HTML, CSS, and Photoshop templates for use in your own multiscreen web design projects.
Table Of Contents
- Over 11 lectures and 1.5 hours of content!
- Learn CSS3 media queries.
- Integrate Google's HTML5 Shiv JavaScript.
- Make CSS rules specifically for Internet Explorer.
- Learn image slicing and optimization techniques in Photoshop.
- Develop strategies for HTML markup.
- Consider design adaptations for multiple screens.
- and much more...
Dale DennemeyerMay 10, 2013How and why designThe explanation and pace makes it very worth while, thank you I learned a lot.
Arden WeissApril 07, 2013Hit my target need dead center.Drove right to the center of my need -- without any fluff. I will be able to transfer the example to my reality -- transferring existing table-based website for desktop environment to progressive/responsive environment that support both desktop and tablet/phone devices with one set of HTML code -- thanks.... With this kick start, I will be able to proceed and incorporate more detail -- want to eventual adopt Twitter's bootstrap framework. Finally, what editor were you using???
Anders LökholmMarch 19, 2013you have to really focus because it´s a speedy course. It helped me a lot!
Zane StaggsMarch 15, 2013It's only one approachWould be nice to expand more on alternative approaches, optimizing device resolutions and pros and cons of each.
Pamela HarperMarch 07, 2013The class was very easy to follow for me since I have a background in development. This class made developing a responsive design page seem so easy. I wish you could teach a class on MVC. There is a lot of information out there but to hard to follow. PDH
Clay AsburyFebruary 25, 2013Best instruction I've seen onlineHe explains more than just responsive design. He breaks down each attribute of each line of code. I learned some invaluable CSS styling techniques as well.
Memo M. LizarragaJanuary 28, 2013Very helpful :)For a non designer with basic html knowledge like me it is the missing piece i ve had looking for a long time..
Igor KrstevskiJanuary 14, 2013Very informativeThis course is very informative and straight to the point. I am familiar with HTML and CSS and I had no problem following along. It guides you through all the necessary steps required to create a responsive website. The author is also using best practices that will speed up the page load on mobile devices.
John TaylorDecember 18, 2012excellentVery clear and concise to the point
DarrenDecember 14, 2012Nice courseProfessional videos that are easy to follow along with. Chris really knows what he is talking about. Will be trying to incorporate these principles in future websites of my own. Thanks.
Rob ÅndersonNovember 20, 2012Nicely doneI'm an instructional designer for my job and I think you've structured and executed this well.
Alexis DiazNovember 16, 2012Excelent!Congrats, great course!
Ryan HogueOctober 31, 2012Great CourseVery informative, goes beyond just responsive design principles!
Nino SilvaOctober 26, 2012Great lesson!The best part of this course is it's use of time. If you are already familiar with HTML and CSS you are able follow along very easily and quickly because of how concise the instructions are. I've come across other lessons on responsive design that are just full of too much technical jargon and unneeded info. This course gets right to the point in an easy to follow method.
Michaela StephensOctober 11, 2012basic level introductionthis course is fine for a beginner level, i was really looking for a more in-depth discussion on the concepts and strategies of responsive design. this course simply provides a coding walk through for a simple responsive webpage and does not go into the theory behind it.
Nico EshuisSeptember 20, 2012Too basicOnly the last two lectures where really on responsive design the rest was only plain html/css and cutting up images. This is not worth $150 dollar. I was kind of disappointed after having a couple of good experiences with courses from Udemy
Kenji KatoSeptember 05, 2012Great course for a quick look at a responsive web design model.While I would have liked a bit more reasoning, and explanation of some of the design decisions made in the tutorial (why some of the CSS elements behave as they do). Overall this is a great course for a quick intro looking at a responsive web design model that doesn't rely on JavaScript to build the page (as some others do), but rather relies strictly on CSS techniques and good HTML structure. Also, the tutorial is a bit light on the IE compatibility elements, if that is something you really need in your design. In the end, you will have an HTML page and CSS file you can use as a basis for other designs, and expand upon.
Communications Officer Amy SandersonAugust 29, 2012Great tutorial!I like how methodical Chris is in explaining WHY he does what he does. This is important when personalizing the code. Thanks! Amy
Ross TejeroAugust 19, 2012Great TutorialEverything was explained clearly and easy to follow. The process was breaked down systemetically which made it easy for me to understand. Two thumbs up!
YuiJuly 30, 2012Good content, worth it.Precise and comfortable tone of voice to follow. I am beginner but understandable over all. If the author explained more details or used another example of layout (maybe because I am not web developer or designer), it would have been great. Thanks you.
Andres AbelloJuly 06, 2012Great hands on course to learn Responsive Design.I love this course because it makes you work. The difference with other courses about Responsive Design is that with other material is mostly about reading and theory. Practice is always important, so I recommend this course to anyone who wants to satr designing Reponsive Websites.
Steffen SchneiderJune 29, 2012Almost perfect, highly recommended.This course is really great and easy to follow. Only sometimes was it necessary to use the "pause" key while typing - Chris is a fast speaker and typer. I'm not a native speaker but was able to understand everything. The only thing I would have wished was referencing the mockup more often when editing the CSS - in order to getting a better idea what region we're covering with this and that rule. However, I highly recommend this course to anyone who wants to learn the basics of responsive web design in a short time. I'm already enrolled in Chris' next course (Twitter Bootstrap) :)
Pam MayerMay 18, 2012ExcellentI found this class covered every detail, which was a nice review for the stuff I already knew. It was also a nice intro to HTML5 from a design perspective. Thanks Chris!
Chai NakpibanFebruary 16, 2012Complexity Simplified once again by Mr ConverseChris Converse is the king of taking complex subject and simplifying them by breaking them down step by step into easy-to-follow processes. Having purchased his previous web course "Bring Your Web Design to Life: Creating Rich Media Websites with Adobe Creative Suite" I knew what to expect and got exactly that - knowledge that works. I particularly enjoyed the fact that he didn't work in Dreamweaver with this title but with a simple text editor. What I also enjoyed about this course was that it came with all source files, including the photoshop graphics as psd's. I will say however - the HUGE advantage of this course is the message boards - being able to ask questions and get responses in a timely manner is really amazing. It's also a great learning experience to see what others have asked and to see Chris's response - again, yet another opportunity to learn for free or as they call it, "added value." I already rated this course a 5 star but if you compare Chris Converse to others who teach getting your design to code, nobody can come close to him. He is the standout guru who is able to make the world of web design a fun, exciting and enjoyable experience. Can't wait for the next course.
Katherine ChalmersJanuary 29, 2012Outstanding!Thank you so much for this clear, concise and informative course. This has been quite helpful for several new mobile-friendly designs that I needed to create for my own startup and my consulting clients.
Lynn GanoJanuary 21, 2012More than what I had expected!This was a great course! I learned so much more here than I have had in other courses on this subject. Chris delivers clear and concise instructions that are easy to follow. He also explains why he is doing something rather than just have you copy the code. Bravo! I will look forward to more courses from Chris.
Randy TibbottJanuary 12, 2012Excellent CourseI learned much from this online course, which makes it worth it in my book. I have one suggestion: instead of talking and typing, could you just talk us through the pre-typed code. There is a lot of redundancy, This is a very small quibble. I loved the information that was presented.
Jordan HudgensDecember 04, 2011Chris did a great job on this course, it was easy to follow and helpful for my current project.
Arnold DanielsDecember 06, 2011A bit dry, but good none the lessThe course delivers what's promised. It shows every step of creating the web-page seen in the first movie. The material is a little dry and dull. You literately see Cris code every single line of CSS. If you're already an experienced HTML/CSS developer, you can just fast forward through most of the course and just watch the second and last lecture in full.
Roberto DelgadoNovember 29, 2011Great courseHi, I've just finished this course, and I've to say that I've learned a lot of about this way of designing webs. I've read a lot of books about this issue before and it's the first time I understand the rules of responsive web design. The videos are very easy to follow, and the steps are quite clear. Maybe the web made in the course it's a bit ugly, but it's enought elements to understand the main concepts. Thanks for this course, Regards, Roberto Delgado.
Gffects WebGraphicsDecember 02, 2011Very InformativeHad a watch of each lecture and finally someone able to help me get rid of the pesky problems of sizing and also with the fact that I.E just can't keep up. Will begin to practise these methods to become second nature with my own coding, great for functionality.
James EggersNovember 12, 2011A Practical Take on Responsive Web DesignThis is a very good, clear tutorial/course on designing a responsive web site. Having read the books and recommended best practices from various people, it's good to see a practical guide that strays away from the theory slightly. Compared to the theory that I've read, this course does not push for using single, over-sized images that scale to different viewports nor does it focus on percentage based widths, margins, and padding values everywhere. The percentages are present where applicable and then absolute measurements are applied. Beyond the focus of the course being RWD, Chris does a fantastic job at providing clear explanations as to what a number of CSS properties were and why they were being used. Some are common to those that use it daily; however, for those that do not, his explanations are a great assistance. The only things that caught my attention were a couple of the typos in the video code (but not in the downloaded files) and the price feels a bit steep to me. Ended up using a coupon for the course and was very satisfied with such; however, the list price would have truly kept me away from the course. All in all, I'm glad that I had that coupon and was able to take this course since it provided a lot of information.
Jesus E TopeteOctober 05, 2011A direct solution to growing issuesYou can find no end to suggested "best practices" by using scripts to determine screen resolutions to even determine devices. This course presents a great way to handle those same pesky issues. It also provides a clear way of presenting across multiple screens and even gives some helpful tips on dealing with the looming reality that although HTML 5 and CSS3 are upon us, not all browsers currently display them correctly. A very useful cherry on top in my opinion.
Othman Adel AlkhanOctober 06, 2011Great Course.. and i am really enjoy it.. I just finish now from my deaisng by using this technich, its really great, the problems only with the image.. i hope to find a diffrent way for the image.. Thanks Chris for this course.. Good luck for all
Dustin SteinleSeptember 26, 2011Purchased but can't DownloadTrying to download these for offline viewing and keeping handy. Why can't I download the courses like the intros and coursefiles? This is very disappointing. Thanks for getting this fixed so fast. Greatly appreciated ,look forward to reviewing the content!
David SanbornSeptember 29, 2011Pleased with the courseI did not have any problem with downloading the videos or project files. After taking the course I had one of those aha moments of how to do things. It seems so simple now that Chris has shown the way... Yes there are some spelling errors that were created while he typed. It would of been nice to see the effect (or lack of) due to those. That or correcting them during. Other than that I thought the course was a great and gave a lot of info.
Ruben PereiraSeptember 22, 2011Can't find the downloadsI cant find the downloads of the videos, can someone help?
Virgilio de la VegaMarch 23, 2013bien explicado
EDUARDO PARRASeptember 20, 2012A quick course that really makes you understand Responsive Web Design
- How long do I have access to the course materials?You can view and review the lecture materials indefinitely, like an on-demand channel.
- What is the refund policy on the course?We like to keep our users happy, so we have a 30-day no questions asked refund policy. Send an email to support@udemy.com for refund requests.
- Can I take my courses with me wherever I go?Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
RELATED ARTICLES
Most Popular UX Seminars




