What is responsive web design
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Responsive web design is a way to change your website depending on the browser size. Now I'm showing here, Smashing magazine. Smashing magazine is a website that I read a lot. And I really like the effort they went into to redesign the different pages depending on the browser size. So at the moment we are looking at it as you would on a really big screen like an iMac or kind of a 4k monitor, something really big and high definition. You can see there’s a nav on the left, a subnav, our main content and some ads. But once I get smaller, say down to a regular desktop view, can you see it changes? It goes down to this navigation here, our main content and ads. But it gets smaller, say down to a tablet view. It changes quite a bit, ditches the ads, navigation becomes a bit smaller, this is along the top here now. If I go down even smaller down to the mobile view, things change quite a bit again. Now the easiest way at the moment to do responsive is to use something called bootstrap. Now bootstrap is what Dreamweaver uses to makes responsive and I guess it’s special enough to have its own little section so lets go off now and find out what bootstrap is and how it works with Dreamweaver.