How To: Responsive Web Design for Mobile and Tablet

100 thoughts on How To: Responsive Web Design for Mobile and Tablet

  1. 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.

    Here's a great site with a lot of device and css width ratios so you can see how different things have different ratios. http://mydevice.io/devices/
    And here you can see your device widthhttp://mydevice.io/devices/
    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.

  2. 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!

  3. Enjoying watching this project come to life. Interesting to hear that you use an off-premise dev team. Makes sense, you're more of the design shop and you work with a dev shop then? Very interesting! Watching the previous designs, I cringed (as a developer) at how much work making that design work on mobile would be on the pages that had no breaks in it. Was really looking forward to seeing how you guys would deal with it! I guess we'll have to wait for the next video!

  4. If you stop thinking in terms of pixels and start thinking in terms of 'em' units this will become much easier for you.

  5. I really enjoy watching the decisions talked about throughout this step of the process. I also appreciated your mention for designing by mobile-first; the design really benefits when the mobile foundations are defined initially.

    I would love for someone to argue against it, but isn't designing to the 960-grid a little outdated when screen sizes are in such a variety? What do you guys think?

    Also. You guys should check out Webflow. It is totally re-defining my web-design process.

    All in all. Awesome work. Keep up the great content!

  6. I've never been to any design school to learn design because there are some good channels on YouTube for us that keeps telling us that don't go to any school because TheSkoolNetwork is on YouTube. Than you very much sir for this kind of information.

  7. Personally I wouldn't care for such a basic tutorial. There are a million and one tutorials out there for adding drop shadows, you'd be wasting your time. Plus surely a massive segment of your audience already knows basic PS skills, in a way you'd be negatively effecting their perception of the quality of your content.

  8. I got a question for the designer: Why don't you guys design in Sketch and why? How come you guys use illustrator? Out of curiosity.

  9. 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.

  10. Mobile first approach…its 2016? The design process example feels very 2010 (desktop to mobile). Also why 960px? 1170/1200px is pretty much the current standard…just saying!

  11. insded of using the 960grid get familiar with bootstrap and maybe give your designers a basic bootcamp in how a site is developed and build. I work at an IT company as a designer so I know your pain of having to hold back fancy design sometimes in favour of usability XD

  12. What do you guys think of filtering clients through a questionnaire? Instead of having one message box at my site's contact page, there's a questionnaire. Sean McCabe of seanwes talks a lot about this when doing client work. Great show, loving the skool.

  13. Great video Chris! I like the fact we can now see how you interact with your team – Cool Leader!

  14. On fancy backgrounds with lots of elements I separate them in PNG files and use multiple background CSS property πŸ™‚ (or absolute positioned divs) that way you can control the crop

  15. Chris/Huang, on (27:38) tips, if you are using Adobe Photoshop CC, you could use "Device Preview" to preview your design without having to email your jpeg. I called it "Live preview". Here's the link to understand more: https://helpx.adobe.com/photoshop/using/devicepreview.html

  16. Hey great video, thank you! At some point could you explain the file structure being sent over to the developer to make the site work?

  17. Cris how do you balance (or justify) using large background images in relation to render speed and more importantly google's page speed insights? I find myself frequently sacrificing design for better SEO optimization and in making Google happy.

  18. Was a good app to view your png for mobile besides emailing it to yourself? Awesome environment btw, lol towards the end was funny.

  19. Hi, this is really helpful process. Thanks for sharing.
    I can't even imagine how many hours it takes to work on this kind of project
    and how many people are working on this.
    What's the budget of it?

  20. very helpful……definitely it will help us….
    and we can check designs by device preview (one of adobe facility) no need of jpeg or png.
    right?

  21. 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!

  22. I'm still waiting for the "Conversion of words into design." Or " how to translate words into design" .. I would loooove to see that one… πŸ˜€ great video by the way.. πŸ˜‰ Cheers from Serbia πŸ™‚

  23. I love love love these design and proces walkthroughs! We can see the real behind the scene. And thanks for the tip to save a JPEG for mobile view, brilliant! I also want to say thanks for making and sharing these videos and all the work you put in. I follow you for a while now and we creatives can learn a lot from it. And I especially adore the combination of design and strategy, its the-best-combination-ever!

  24. Hey Chris, out of curiosity: are there any legal implications when you are sharing client work through social media?

  25. Helpful video, especially when it comes to working at a 2x resolution for Retina, etc. However, I want to ask if one can also just simply work at a higher DPI, say 144dpi rather than doubling the size of elements. Essentially I can keep keep my fonts at their true size of say 15pt at 144dpi. Is this easier for those used to working in the past at 72dpi? Just curious. Also, would love to see the Drop Shadow tutorial too.

  26. 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!!!

  27. Google 1:1 grid or baseline grid for web. 960 is so dead. 960px grid limits you more than enables you to create great layouts with the use of white space. And your design(er) needs an update, the 1024 px is not the majority anymore. The new laptops (last 3 years or so) have a resolution of 1366Γ—768 which gives you a weird aspect ratio, so you might consider start with 1200 px. But again, when you talk about responsive design px is not a very accurate way to design. It's better to use percentage for fluid. Or you do the adaptive grid with at least 6 break points to make sure your design will look good for majority of users.

  28. 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 soooooo 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.

  29. The designer in this case was not confident in the job he was doing. I don't know, he gave me a shy impression. The female designer that that you linked in this video on the other hand was more open and more confident.

  30. This is amazing, I would like more videos like this for web design and also it would be good to learn smaller details like spacing, pixel size for certain components and fonts,etc

  31. Hey Chris, why doesn't your developer use background cover on your section so you don't get the white on the edges?

  32. can you guys make an episode on grid, because I think I'm missing out on this, and this is an essential part of the design process.
    and I read a lot of books on this subject and I'm still not able to know how to use it. and a lot of designers that I know that learned on design school don't know how to use a grid.

  33. Hey Chris, I really like your videos specially the videos where you discuss about the designs live.

    I have one question to ask regarding taking the canvas size before creating any website or mobile app. Few people suggest to take the 72 resolution for mobile apps in android and later take out assets on different sizes like- HDPI, XHDPI, XXHDPI and so on.

    So my question here is what exactly the resolution or canvas size a designer should take? Please help πŸ™‚

    Cheers,
    Suhail

  34. 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.

  35. Brilliant explanation , but I don't this is great idea to design the mobile version of website.Because if you see the mobile view at 10:02 minute of the video, this design is not going to view like this in browser.You have to take the consideration of frontend developer for making the mobile user experience.

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

  37. don't need shadow dropping – it's easy to find, better TOTB ideas! πŸ™‚ or more diificcult technical things. but if You do anyways, I definitely watch it, I know it's gonna be great :), so.. :))

  38. yet, in my very startup point of view, "job opportunities" would seem more in the same style/ vibe if it had that old paper background.

  39. Hi, Chris, I enjoy your videos very much. One question though- You started in 960 grid in AI, but I've noticed that it's a bootstrap-like nav at the top and the carousel is the default bootstrap too (on the demo site).
    Am I being mistaken? If not, how often/ how much do you guys use bootstrap?

  40. Visited https://www.ole.ca and it looks amazing! One thing though, tried to click the newsletter and a popup showed up but nothing's in it. Why? Is this still in progress?

  41. Hi Chris, yes pls I would love how to do these 3d shadows. Please could you do a video if you have the time. Thanks from Dublin Ireland!

  42. Great video! It's amazing to see a little about how is a typical work day/process in your agency. Please keep posting this kind of content πŸ™‚

  43. How do you set up all the web pages of a website side by side in photoshop like when I click this button I'll land on this page?

  44. 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…

  45. What about font sizes? If we have custom heading on desktop like 81 px and we gonna decrease it on mobile (lets say 2.5 rem) we have to do the rest headings? For ex h3 should be 2 rema, h4 1.5 rems etc?

  46. 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

  47. Team The Future you are HEROs and doing great I really appreciate your efforts. The solution for previewing in mobile is "Adobe Preview CC" its a mobile app just use your phone cable to have preview in your mobile. https://www.youtube.com/watch?v=xeTSjATn8jE

  48. 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

  49. Does anyone know what the transition is called at their intro at 0:34–0:52 where it's like building pixels? I'm trying to make something similar and I can't find a tutorial for it.

  50. This is funny. I used to be a back-end developer a long time ago and I feel like my web designs are shaped based on that. The good news is that a lot of things have changed and are changing for web and app design/development.

  51. i have seen some really cool "pro facebook adds" were a 1080P video plays….but when clicked the video plays in the upper 1/3 of the framing and a webpage content appears in the lower 2/3 of the framing appears while holding your phone in portrait mode.Are there any aplications/software/facebook manager apps to acomplish this, or is this hi-level webpage programmer skills?thx

  52. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *