I am trying to make my site responsive and was originally planning on using #media screen property in CSS, in order to optimise it for mobile devices.
I'm already using bootstrap but want to modify parts of it (which I have been doing using #media screen) for mobile devices. However, I've been told that this is unprofessional and that I should avoid using this. Is this true?
Thanks
It's hard to fathom why someone would tell you that using #media screen is unprofessional. That's how media queries work for, ya know, screens.
No, there is absolutely no reason to think that using media queries for screen, print, or speech is unprofessional in any way. It's a necessary tool in your web dev toolkit and you should feel free to use it as intended for your responsive websites.
See here for Mozilla's documentation for using media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
UPDATE
Based on the update to your question (where you added that you are using Bootstrap), I would tend to agree with #aaron-mcguire's answer below.
As he alluded to, it's impossible to discern exactly the context in which your friend/colleague/person told you it would be unprofessional to use #media screen. But if you're using Bootstrap, it probably makes sense to customize Bootstrap's built-in grid system in order to best meet your layout needs.
It's a very wide question, the answer to the whole question would be no - it's not unprofessional to use media queries, they are a fundamental part of the responsive development process. Where the question becomes a little jaded is when you mention you are using bootstrap.
As others have mentioned Bootstrap also uses media queries: https://getbootstrap.com/docs/4.3/layout/overview/
Since we have no context or design to go off it's hard to assume whether or not you would be fine using the preexisting media queries built into Bootstrap or if you would need to define your own.
Perhaps the person you were talking to has said it was unprofessional using custom media queries in place of bootstraps built in ones. Which again is hard for us to judge without seeing code/design. I would say unprofessional is the wrong choice of words - if you're trying to optimise your website on a mobile device then it's probably more a question of - is it the most efficient thing creating custom media queries in place of using the #include media-breakpoint-up(sm) { ... } one.
But again take my answer with a pinch of salt because there is no real context to the question. Web development is a constant learning process there is always somebody who is going to tell you that something you are doing isn't the correct way.
Related
I (like the rest of the world) use media queries to help with responsive design. As such, I am usually focused on writing a #media screen query.
But I am wondering - do I need to take screen readers (or even printers?) into consideration when using media queries for responsive design? I.e., are there situations where I would need to use #media speech in responsive design? If so, how.
And responsive design is irrelevant to speech readers, then when would I need to use a media query for a speech reader?
Based on the comments in the issue [mediaqueries-4 ] Deprecate 'speech' media type as well? there is currently neither a clear use-case nor any notable support for speech.
So based on that you currently don’t need to care about the speech media type.
The print media query on the other can be useful depending on what information your site provides, and if you want to hide e.g. the navigation of the website and include some contact information on the bottom of the site. Or change the font-family to a serife one that is easier to read when printed.
I'm designing a mobile-first site and the thing is, height-based media queries could really benefit my page layout in many ways. But I am holding myself from using them because like more than 90% articles I've read about responsive design don't even mention vertical media queries.
Even mixin libraries exclude them like the one I use (Rupture). And here in SO they don't recommend using it. It really feels like it's a broken feature or has loads of compatibility issues...
I just noticed Instagram uses min-height on their mobile site So I thought maybe it's really safe to use them.
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I am working on two different responsive websites (both work in progress and one is taken from lynda.com just for practice). This first one I did works fine as far as I can tell.
The HTML is HERE and CSS is HERE.
Then I started to work on this one, created the same css as above but the media query targeting #media only screen and (max-width: 768px) is not loading for some reason.
HTML is HERE and CSS is HERE.
I've spent hours trying to figure out why and I'm lost. I don't any differences between the two, yet one is working and one isn't. Any suggestions you have would be much appreciated!
I'm just testing them in a browser right now.
Thank You!
I think the issue is one site has a "meta...viewport..." in its HTML, while in the other site that statement is commented out.
In the site with no "meta...viewport..." the Media Queries are actually testing against the dimensions of the unconstrained "viewport" rather than the "screen" (an oversimplification is "devices sometimes lie"). On the other hand in the site with "meta...viewport...width=device-width" the "viewport" width is forced down to be the same as the "screen" width before the Media Queries test it, so you get different answers (especially on smaller devices).
(Depending on what devices you're targeting, you may need to dive down into thoroughly understanding a "viewport". There are good reasons for the way a "viewport" behaves; please don't misinterpret my sarcastic "devices sometimes lie" to mean "viewports are a bad idea".)
What's the best way to make an existing website fit for mobile devices(netbooks, mobile phones based on Android, Iphone, Blackberry etc.)?
Without going as far as implementing a mobile framework I would suggest taking advantave of CSS Media Queries which will allow you to serve up different css depending on the wdith of the browsing device.
A good start would be to look at the LessFramework which has taken all the hard work out the grid calculations.
Make it flexible.
You can detect different device widths with CSS media queries: https://www.w3.org/TR/css3-mediaqueries/#device-width
Less normative explanation: https://mislav.net/2010/04/targeted-css/
Great blog post: https://webdesignerwall.com/general/the-wall-is-redesigned
The CSS3 flexible box model can also be your best friend.
Twitter Bootstrap will also give you some nice out-of-the-box responsive functionality, meaning that the site's presentation will adjust based on the type of device and the size of its screen.
And I'd recommend checking out this book.
Current now many tools available, but how to keep good user experience is the most important.