Prioritize phone compatibility over desktop?

Hey guys I try not to go to far in a rabbit hole whenever I see something about code but the topic of media queries I feel is very relevant and I want some advice. Should design be prioritized for mobile first? Here is the W3 schools link (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) saying to prioritize mobile design first but I don’t know if that’s another layer of abstraction that I shouldn’t have to worry about. Although at the same time it is very relevant considering the use of phones in this time. And being that I just finished a few simple projects without keeping that in mind does worry me a bit because I don’t know if EVERYTHING should be phone AND desktop compatible( and if employers would consider it valuable if someone knows how to do such things). I do see relevance in the phone compatibility but especially since i’m a beginner, I sorta feel like i’m banging my head trying to make something appear on a phone the same as on a desktop. To add some perspective i’m about a month in on coding and have only learned CSS and HTML but I feel very good on both. Thanks for the time.

What you are talking about is “mobile first design”. Yes, it is a valid strategy and yes some companies lean into it hard. It is work researching and knowing about.

i’m about a month in on coding and have only learned CSS and HTML but I feel very good on both.

Wow, I’ve been doing CSS for years and still feel weak. Many people hate CSS but it is amazingly powerful and can do magical things that would take a lot of JS and still wouldn’t work as well. Learning CSS is a good thing to have. I recommend the book CSS Mastery, but I’m sure there are other good ones too.

1 Like

lol well when I say i’m very comfortable with it I mean with the basics, and even then, my basics is for sure different from youryour interpretation of basics. Like position and basic display manipulations is what I feel comfortable with. But without going too far to try and explain myself… I do thank you for the input. So with that being said, making my portfolio (when I get there) and all my other projects for that matter, with a “mobile design first” attitude would be recommended?

Give it a try and see which approach fits your needs.

In my opinion, it’s easier to start with the smallest width, because you have to make better layout decisions, you don’t go overboard with too much complexity and you have to re-write less code.

1 Like

Honestly, I was a bit overwhelmed with the idea at first but I started the next project on the responsive web design projects, the technical documentation page, and have found that it is much easier than I thought. Especially since I have a phone, I can literally look and see what I need to adjust if needed. Plus when I’m finished I want to send it to some friends and see if the layout is consistent. But regardless, after looking into it more I did realize it would be pretty silly to ignore phone compatability since no matter the route, A LOT of people are going to looking at the result on their phones. but yes I well definitely keep my audience in mind when making content.

Thank you for feedback. The FCC forums are more interactive and helpful than I thought so thank you so much!!

1 Like

I think it’s definitely an approach worth learning. And it will impress people if your app deals with different widths elegantly.

As to CSS, I had a friend who specialized in CSS. He was a designer and could do almost no other coding but was a wizard at CSS and loved it. I’m pretty sure he was an alien.

1 Like

Basically, small screens and touch-based interactions are more restrictive and finnicky when it comes to design. That means it’s much easier in the long run to start out designing for that scenario and adapting it to add desktop support than the other way around.

1 Like

The idea of developing “depth-first”, meaning finishing website/app for one screen and then starting working on queries to make other screens work gives me chills to be honest and even without trying I guarantee that it’s more error-prone and will take much more time to develop - it’s known subject in software development.

In reality you most likely want to develop “breadth-first” - making one component looking great on every screen and proceeding to the next component. In this per-component way it doesn’t really matter what screen you’ll be developing first (which is also a healthy sign by the way)

1 Like

Thank You all for input. And Snigo, yeah that’s exactly what happened to me in terms of the nightmare. Because I finished making my Landing Page and then realized it wasnt compatible with my phone then got in a mini freak out trying to fix it all (sorta wishing one line of code would me a magic one) but then just said i’d come back to it then started the Technical Documentation Page. This time I took the exact approach you said, where making one component look great for every screen and then proceeding to the next and yes it took me a about an hour to make a nav bar and a few sections titles but, I do know that I can do this mobile design because the appearance on my phone is looking pretty good so far! And the phone isn’y lying to me!( or at least I hope it’s not). And since I see progress with this project, I know coming back to edit my landing page won’t be as bad as I though it may be. But I will test and see the response I get from multiple phones and then eventually share on here maybe to see if there’s more I can improve. THANK YOU

i suggest to check Jonas CSS tutorial.
You will be amazed how Fast and Easy to create responsive design. And he shows both ways to start project desktop/mobile

And it will be 1 magic code line if you code css correctly :wink:

1 Like

Hey,

you should DEFINITELY make your website responsive to mobiles because you can actually get penalized by google rankings if your website isn’t mobile friendly enough. People these days tend to go on websites a lot more through their phones then a computer (actual studies on that topic).

P.S: It’s not an issue if your website design is not exactly the same on mobile vs computer. Look at facebook for example…if you google facebook.com and m.facebook.com (the m stand for mobile), you’ll get to see the difference in both designs.

To practice your skills you should try and design your website both ways. What I mean by that is: try to design your website for computer first and then make it responsive to mobile and then try designing a website for mobile first and then adapt to a computer screen.

Hope that helps!

1 Like

WOW tell me why I feel attacked by google rankings lol I did not know that wow that’s crazy. and the approach i’m taking is the one that snigo mentioned where once I finish a component for desktop, I will then work on it’s functionality on mobile. But wow that’s crazy I didn’t know it was like that thank you for sharing.

1 Like

Hey guys this is just an update. And I think since I made this project https://codepen.io/ArmandoElNino/pen/xxVbVZP first to suite my laptop then to my phone, it feels like phone compatability is a lot harder then I thought. I honestly feel like
I have to restart this one since it’s just too much things I keep moving and its a hassle. I keep adding styles to something that’s already in a container and it becomes inception but with styling so not fun so far. My other project, https://codepen.io/ArmandoElNino/pen/LYNpNZy is what I made with a different strategy doing one piece of it on the laptop then styling to fit my phone. I would just like some critique on it. like does it matter if I still get the job done even if the code isn’t so pretty? because that’s kinda how it feels since i’m just doing everything one by one. I still feel like im learning but am just not sure if i’m going in the wrong direction. Thanks and if I could get some advice on how how code is looking I would appreciate it.