How To: Responsive Web Design for Mobile and Tablet

How do you design for mobile and tablet? Responsive web design.

1:10 Link to other video

4:40 Using a 960 grid. Here's a link to the 960 grid system:

_
Listen to our podcast on iTunes: The Futur

_________________________________________________
🚀 Futur Accelerator
The step-by-step blueprint and coaching program designed to get your creative business off the ground:

🥇 Futur Pro
The professional creative community designed to grow your personal brand, your business, and your network:

✍️ Other Courses, Templates, and Tools:

🎙 The Futur Podcast:

Recommended books, tools, music, resources, typefaces & more:

Music by Epidemic Sound:

Shorts Playlist:

We love getting your letters. Send them here:
The Futur c/o Chris Do
1702 Olympic Blvd.
Santa Monica, CA 90404

*By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you.

—
Connect with Chris Do:

The PROCESS
Credits:
Executive Producer– Chris Do
Hosts– Chris Do
Director– Aaron Szekely
Cameraman– Aaron Szekely, Andrew Truong
Producer– Aaron Szekely
Editor– Mark Contreras
Show Open– designed by William VanSkaik, animated by Bara Kwon

Musical Director– Adam Sanborne

===
*By making a purchase through any of our affiliate links, we receive a very small commission at no extra cost to you. This helps us on our mission to provide quality education to you. Thank you.

[DavidHager]

The way the pixel itself works is:
You have css pixels which are what you're referring to when you say 960 pixels wide
And you have the device pixels, which are the literal pixels the device has.

css pixels can be shown as a ratio of device pixels, so say my normal sized android phone will render it's 1080 device pixels as 360 css pixels. The reason for this is if the device pixels were at a 1:1 ratio where 1080 device pixels was still 1080 css pixels, that would be super wide for a phone in portrait and it would be showing lots of info on that tiny screen.
So your phone says, ok, my device is 1080 pixels wide, but lets make every 3 pixels 1 pixel. so you now have a screen that is 360 css pixels. This was your phone is showing way less info rather than if it were really 1080 pixels wide.

Image turning the phone sideways to landscape which would make it 1920 pixels wide. That's the same width as my desktop, imagine viewing everything the same size as your desktop on a little 5 inch screen sideways. It would all be way too small and you wouldn't be able to read anything.

And here you can see your device
Desktops mostly have ratios of 1:1 because they were the thing to design for when css was being made, so no ratios to fit the pixels were needed.

[marketam.]

Thank you!! :) As a beginning designer, I find all the videos you make really valuable.

[maeceseirafi]

I think the art direction videos are a great way to get a glimpse into the raw stages of the project, how things can go on the designers side and the developer's side. I remember one video you had focused on giving art direction for editorial design so its nice to see another medium of art direction and would love to see more. Keep it up!

[elis]

Love how you fixed the background problem on the fly. I'm guessing that comes with experience lol. And your designer was right there with you. You are surrounded by a ton of talent!

[Kuwandi]

Reason I liked this approach it was very candid...unprepared...what was good is that you were asking questions and it wasn't a passive how to presentation...

[jpanda]

Great Vid Chris!!! Love It! Also Yes to the Drop Shadow Tut

[eliotnguyen]

I think this is where you have the market cornered, Chris: you're able to actually interact with your designers and we get to see design guidelines delivered with concrete examples to support the conversation and guidelines. It's not a conversation I get to experience, since most didactic you tubers interact only with themselves and while their knowledge is great, it lacks conflict and may often come across as too exclusive in its purposes. However, when we get to see you interacting with your students, designers, peers, and even clients there is the inherent value of the conversation having a solid, contextual basis. I like fake clients meant as mental exercise props but real clients with real world problems and an in depth analysis of those clients are dope and precious. Thanks for doing that.

The interaction is worth its weight in gold. Chris, you're coming from a very experienced, tried and true perspective. When you interact with your designers, it is a familiar context other designers have, be it they're talking to the dope Chris Do or another person whose has a greater range of design senses. When Sang learns off the banter, the audience learns it tenfold. When sang speaks and has an idea, it's inspirational for us other designers who don't doubt the validity of our design choices but maybe are hesitant to want to voice the validity for constructive purposes. The lessons learned here are not polished and sent for copy right and that's what makes them a lot more tangible to those starting out.

Since I know you want more feedback from the audience, I do want to lastly say that I like the trend of this channel because it's not just showing pretty stuff but the behind-the-scenes (maybe that could be a dope additional segment or a stand alone) where each creative stage is sequenced like a rocky training Montage. Hahah.

Though I say little about how dope you are compared to the suggestion, the truest tone of this message is of appreciation for the wealth of good education you give back to the community.

[justinroy]

I love these videos! I wish you guys would do more videos like this, because it gives you a more retrospect in the reality of working at an agency along with working through a project. #theprocess

[natealspaugh]

I prefer the 1200px grid but this is awesome! Also a good comparison for using the grid is like bleed in print. You want to keep all the important content preserved at different screen sizes like you would want to take note of where you'd place typography on a business card.

[HAHACHEN]

I am surprised with this video. I can't believe that you guys are just a group of wonderful designer but without coding skills?! I thought designers should have basic html coding skills and even achieve a little dynamic layout.

[victorflores]

First of, I would like to thank you for the process. I've learned a lot from those videos, and I believe you're teaching something that a lot of people do not have a lot of understanding which is the designer/digital business. There is so much more value in those videos than this one.

That said, I don't think you guys should focus on showing introductory web design techniques. I don't think you are taking care of the audience you have grown with the previous videos in the process.

As a front-end developer with UX/UI design experience, I think this video tried explaining something that both the designers don't have a strong core understanding of.

Also from a development perceptive, there are solutions to making your design work the way you want it to regardless of the screen size.

[beqrama]

Hi Chris, about that hot tip, there is a app called Skala Preview (for Mac's) and allows you to see your responsive design in LIVE VIEW. Just save that mobile PSD file and Drag & Drop in Skala Preview and just like that it's in your Mobile Phone/Tablet.

btw i like that entire design from Desktop to Responsive Design.

Peace and pls make more videos like this with complex mobile design issues.

[Polymath_amore]

All your video contents are really good and informative.. :) but I have a suggestion. If you guys can add visual slides in between or like a note at the end with just the important points like a recap to the entire video then that would be really awesome as well as helpful.. coz u guys say a lot of important stuffs inbetween conversations and while explaining something, which sometimes is hard to follow... or if I have to find one particular info (like the pixel width mentioned in this video) I have to play through the entire video again to find where that particular info was mentioned...
Love your videos 👍 this is just a suggestion😉

[TrvisXXIII]

Great commentary, and I love your approach towards art direction Chris

[itpedia]

Such a great series i learnt alot
Btw i noticed now that this series is old from 2016 the girl in the previous video used illustrator for web design and she did an amazing job, but now mostly people use sketch, xd, figma but i think illustrator gives cool result then them the reason is wide range of tools and the play around typography

[ziolp]

Yes ! I'll watch your How to on drop shadows. Better to learn it the right way.

[mfaizanattique]

When I do design II usually connect my phone using adobe preview app. In that way, I get live mockup of the live thing

[simon_smale]

Loving the way you talk though this process as a designer. Is there a playlist with all the videos related to this project? I seem to have missed out a few bits and can’t seem to find them

[sg-hu]

Just learning here. What is the program you are using to create the website? Is it Adobe Muse? Thx!

[agustinruiz]

Do you guys always work on desktop design first? If so, why? I usually work with mobile first approach, but of course I have never made designs as good and complex as you do hahaha (developer trying to become a designer here).
Great video! I love this kind of videos and thanks for the hot tip Sang!!!