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.
Related
I am currently studying responsive concept and media queries, and I havent be able to understand the purpose of it, since we can use "%" for size properties in our CSS files. In fact for example in my CSS file if I add the "width" style property like this : "{width: 70%;}", my Web page will fit into any screen sizes because it will take 70% of it, without regarding the screen ? Or maybe she will be displayed with too small characters, that would be the explanation of why we use responsive methods ? It seems like maybe I didnt really get the purpose of it. Thank you for all your help.
Have you used a news website? In broad devices like laptops, there are multiple columns across the screens. While you use the same website on mobile phone, a single column takes all the available space. This is where responsive design and media queries come in. You can observe the same effect almost everywhere on the web.
Suppose if the news website had set the width of each column as 25%, the it would look good on a laptop, but the width of each column would be then very less when you view it in mobile phone (as 25% of mobile screen width would be very low) and this would make the text unreadable. This is why % units don't work everywhere and we need responsive design and media queries.
This is not the only use of media queries. You can even specify how your webpage will look when printed with the help of media queries. Modern css frameworks like Bootstrap are completely based on media queries
Still if you have any doubts related to the use of responsive techniques like media queries, you can just google "uses of media query" or "uses of responsive design" and you will get tons of articles and posts on their usability.
The use of % and other units can be done to a small extent but they don't give us the freedom responsive design gives us. Responsive design is more than using such units.
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.
I'm a little bit confuse when using Media query for responsive web design.
Actually, I'm new to it and I also want to ask that: is it necessary to add media query every single time you have a CSS error when shrinking down the web browser? I used to do it and my css had like a lot of media queries in it!
You should use media queries when you want to specify different style for a particular height/width of the screen.
Media queries can also be used to change layout of a page depending on the orientation of the browser.
Please use this link to find out more..
7 Practices for Effective Media Queries
Do use media query to design layout for desktop version. You should always think for mobile first layout then use media query to decide how should it look like in desktop version of site.
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.
Should we think about CSS media other than screen and print? http://www.w3.org/TR/CSS2/media.html#media-types
all
Suitable for all devices.
braille
Intended for braille tactile feedback devices.
embossed
Intended for paged braille printers.
handheld
Intended for handheld devices (typically small screen, limited bandwidth).
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
is there any practical benefit for other media items? or all others ( other than Screen and Print")
what are benefits to use other media types?
Well, if you support accessibility devices, speech and braille can be very useful very quickly. The majority of sites don't support these; you'd perhaps be better served by making an alternative text-only site that could display well in lynx, for example.
For the average web developer, screen and print are probably the only ones to worry about.
Even the iPhone ignores the handheld media type:
iPhone OS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone OS.
Source: Optimizing for Safari on iPhone
Most of the other media types target users with disabilities. Those users typically will have some kind of assistive technology for their computers (like a screen reader or magnifier), and it's really hard to know which ones they might be using and if they would also support the alternate stylesheets. Unless you're targeting these users specifically (and know what kinds of technologies they are using), it's probably better to stick with the de-facto standards.
It depends on the audience you are targeting.
In general screen and print are sufficient.
Mobile devices using CSS3 media queries and "handheld" :)
I like the idea of being able to provide a viable alternative to mobile users; smartphone users (media queries related to screen size filter these) deserve attention as a rule.
Focus on information structure and content design become more important with the difference between the different representations.
I wonder to what extent "print" really is a good idea: should we encourage people to print content from the web? I can see the validity of this in a few cases, but not as a general rule.
If you are trying to build a highly accessible web site, it might be worth it to implement media types that aren't commonly used in order to potentially support future devices.
Presentation media would be pretty cool if it was supported, though. tv is supposed to be supported by devices like Boxee or the PS3, but the only one I've ever heard of supporting it is the Wii.
For 99% of the cases, don't waste your time.