Im working with a graphic designer who constantly wants to make websites larger than the 960 pixels i recommend. I can do a certain amount with liquid layouts but id really love to be able to load different CSS for larger resolutions. I googled it and found the link below, but im worried that I havnt heard more about this. Is this is a reliable method? Im concerned as I would have thought that more people would want to do this.
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
Thanks
To simply answer your question: No.
Even if it was, it seems inefficient to build multiple CSS files, etc. There are better methods than relying on resolution.
A longer-winded answer:
When 960 becomes "oh, that's so 2010..." how many of your sites will look dated? At the same time, not everyone that browses the internet has a 30" Cinema display either, or a dual monitor setup. I try to design to best accommodate MY traffic.
Although it may be nice to detect browser window widths, and/or screen widths (monitor resolution), I think the majority opinion is this: Know your intended audience and design/build for it.
Building a 960 grid and a CSS, then building a 1024 grid and a CSS = Inefficiency, and not very "future proof".
If you're watching your site traffic and see that 90% of your visitors are using 1 or 2 (or 3) resolutions, build a fluid layout that works well for that audience.
Fluid layouts are probably the best universal solution to the ever-expanding array of devices, resolutions, viewport sizes, screen definitions (low, medium, high) on the market now -- let alone 18 months from now.
Checkout #media queries to add to a fluid layout/design. Modify one CSS file (not 3). http://www.w3.org/TR/css3-mediaqueries/
#media screen and (max-width:960px) {
h1, h2 { color:#990000; font-size:1.4em; }
}
#media screen and (max-width:1280px) {
h1, h2 { color:#336699; font-size:1.8em; }
}
Add min- and max- widths to your CSS (or a similar logic) can also help satisfy a wider range of resolutions/browser sizes, as well as give your design a longer shelf life. And doesn't rely on a document.window.width() function.
Get the most bang for your buck. Fluid designs, #media queries, javascript to help bridge some gaps. You'll end up with less code, a more "future proof" design, and a larger percentage of satisfied visitors.
Related
I'm familiar with coding but I have severe time constraints and would rather not revisit Javascript for this issue. Any suggestions on how I can cut down the effort needed to load the different fonts? Much appreciated thanks!
Sure, you can do it in CSS, using #media rules to set different fonts based on the screen size. Here's a good source of information: http://css-tricks.com/snippets/css/media-queries-for-standard-devices.
I'd set the desktop font first, then override it with #media queries with your phone font.
Consider this scenario - I'm developing web applications for use on a tv, they will ALWAYS be in full screen. As you may or may not know, each TV has a different 'safe area', because most cut off a certain amount on one or both sides. I'd like to use a web page that displays some sort of visual ruler so that I could easily see a tv's 'visible' screen, to find this 'safe area'. Does a web page like this exist somewhere yet?
If not, what would be an easy way (I'm guessing javascript) to draw an on screen ruler that could be used to find the 'safe area'?
TV safe areas are approx 5% margin from the edge of the screen on new monitors.
When I do projects with this kind of resolution involved I simply add a generic 5% margin on the main container.
Not all monitors have the same safe area... but 5% is enough for all moderns one.
Edit:
Look at this as well: http://dev.opera.com/articles/view/creating-web-content-for-tv/#safe-areas
it say exactly what I wrote previously.
I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?
Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.
a simple listen on window resize would solve the problem:
$(window).on('resize',funciton(){
var self=$('#ur_id');
self.height( self.width() * (1080/1920))
})
You can use CSS #media queries for this
#media screen and (min-width: 1920px) {
/*Styles goes here*/
}
Or you can use media = projection
The design for a device supporting 1920x1080 resolution mostly is not applicable to a mobile device for example. Maybe you need to hide some elements (generally sidebar) or decrease the font-size, load a different logo... So the best solution is a responsive web design using #media queries as #Mr. Alien suggest.
Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
You can check some Guidelines and Tutorials at SmashingMagazine.
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.