I use large images in most of my (Wordpress) posts. I'd like to optimize these for mobile users. I'm not sure what optimize means but I'm guessing CSS, jquery or JS switches out the larger image for a smaller one?
Are there any examples of how this should be done?
Jquery Bires will do exactly what you want.
https://github.com/ahoward/jquery.bires
I would use CSS Media Queries to serve different CSS based on screen size
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example
#media (max-width: 700px) { ... }
Would serve specific CSS to any device with screen below 700px
Related
I've never really been good with front end designing here and I am stuck with something here. What I'm trying to achieve is make the header of website fixed only on mobile
Say
<div class='row' id='header' > </div>
I can use bootstrap and Foundation since I am familiar with the basics of it but I can't get my head around doing what I want. I want the header div to be fixed only for mobile devices so that when you're visiting from large screens/computer it's not fixed and goes with the flow with scrolling but only with mobile devices it remains fixed at top. Now I can simply change the css property with Jquery but I dont know how to find out and check for the device if it's big or small screen something like
if(deviceScreen==big){//keep it relative/absoolute} else //make it fixed
If it can be done with css only I would more than love to do it.
Another problem that I'm facing here is with the fixed elements(specifically a sidebar that only appears for small devices /main nav becomes sidebar) I want it to be fixed at the left but be scrollable in its own since some options are not visible because they dont fit in screen. I really need help here, the site wasn't developed by me. I am hired to make some backend changes and require to fix some front end bugs too that are mentioned here
Use CSS Media Queries to determine the screen size.
If lets say the screen is no wider than 600 px:
#media (max-width: 600px) {
#header {
position:fixed;
top:0;
}
}
This css rule for header will only be applied when the screen is no wider than 600. And then set it fixed to top.
You can add multiple meda queries to a single dom element, adjusting it to your needs when the user changes browser width.
More about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
you can simply do this by using css(Media Queries)
here is the demo:
http://jsfiddle.net/3cndjsx1/
#media (max-width: 600px) {
header{
position:fixed;
z-index:2;
}
footer {
position:fixed;
z-index:2;
}
}
Header (you can change selectors according to your code) and footer(you can change selectors according to your code) will be fixed for screen size less the 600px(you may also change the screen size in css Media Queries)
In case a media query will be good enough to approximate the target's device, I suggest you use orientation, like this...
#media (orientation:portrait) {
#header {
position:fixed;
top:0;}
}
...as you probably don't want the fixed menu to show up on mobiles held horizontally either.
The best approach is media queries.
You should also use 640px:
#media (max-width: 640px) {
#header {
position:fixed;
top:0;
}
}
Here a link where you can see the media queries for standard devices.
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I am going to make a website that is using responsive design. I read some information about css media query. What I wanna do is that the layout of my webpage should looks difference by using different devices (like PC, tablets or smartphones).
If I use media query to determine the device by using the width of the screen (in pixel), I always worry about if there will be a new device using a extremely high ppi screen. That device may threat as tablet or something like PC?
Another solution that is using the user agent to determine the device category by using userAgent. There's also a problem is that if the device not interpret the javascript fine then the page maybe broken.
Any great solution that can solve my worries above? Or Which solution is better?
Or I misunderstand the method of using media query?
Thank you.
CSS is the way to go, and you can always provide fallback for browsers that don't support media queries using a js plugin like css3mediaqueries.js, but relying on JS solely to make your website responsive is a risk because you can't tell for sure if the user will have Javascript enabled, and when it's not enabled it's not going to be responsive anymore.
Also, it's considered best practice now to use em values for media queries instead of pixels to make sure your website always scales right. More on this topic in this article.
Another tip is that you determine the media query values according to your content's best break points instead of device dimensions, that way you also make sure your content will always look right no matter how many new devices are made.
Hope that helped :)
id' personally use CSS and set min-width and max-width. Most responsive designs now days use CSS. This way if there is a new device on the market it will just adjust according to it's screen size.
#media screen and (max-width:480px) { }
#media screen and (min-width:481px) { ) etc... etccc....
I prefer use media queries in CSS.
Just write the queries after the default CSS...
#media screen and (max-width: 600px) { write here only the elements that must change de code for responsive performance }
.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}
#media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}
Don't forget to insert the viewport code into the head/HTML.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
I prefer Twtitter Bootstrap over using CSS3 media queries for such various devices.
Try jRWD, a JavaScript-only module I designed recently. It uses 12 lines of pure JavaScript and 2 small helper functions. It's available on GitHub, at https://github.com/BlackMagic/jRWD.
If you want to see jRWD in action, visit http://ieee-qld.org. Make sure you inspect the source code. Minimal JavaScript, minimal CSS stylesheet. No jQuery either.
I´m using zurb foundation to create a responsive website. When i resize my window the grid changes to the mobile mode, it´s normal behavior. Is there any way that when i resize the window the website stays put and the browser only adds a scrollbar?
I still need the mobile version to exist, for mobiles only, and i have already try to use min-width to set the point where the scrollbar is added.
Does any one have any idea how to do this?
EDITED
I have the folowing media query:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {}
And in the html i have elements whith the folowing class:
small-block-grid-1 large-block-grid-3
In the css file change the media query to max-device-width to target devices only.
I hope this helps :)
I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/