The following quote comes from here: http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-3142768
"Any fixed-width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two."
But, I can't help but wonder why this matters. Sure, the transitioning is smooth and looks pretty when a developer is playing around with browser size, but what visiting customer (on an ecommerce site or blog) is realistically going to be doing this?? In general, visitors will visit on one device at a time, click around, then leave. Even if they come back on another device, smooth transitioning isn't necessary for the UX, so, why do we care about linear progression between media queries?
This became a practical issue for us in one of our eCommerce clients, the "change" in size would occur when someone switches from landscape to portrait (especially in devices like iPhone where the width is significantly different) i.e. hoding the device vertically and then shifting to horizontal or the other way around and in fact since we used media queries there was a very minor delay (a fraction of a second) in the layout adopting to the new width.
Another realistic scenario is that people may switch between restored and maximised versions of browsers , then again as commented, wasting spaces is also an issue.
So I'm building a website for a client on the Wordpress platform and he says that when he views it on an old square monitor, the layout is all messed up. I know most monitors nowadays are more widescreen and you'd be pressed to find a smaller, square monitor, but he wants it to look good on every monitor, which I completely understand.
I'm just having a hard time trying to fix it because I'm building it on a widescreen laptop and widescreen monitor so I can't really tell if it's fixed when I make changes.
So my question is, how can I view the changes I've made as a square monitor? I've tried resizing the browser window, but it doesn't make any changes. It's not looking like anything he describes. Also, I know this is a longshot, but are there any WP plugins or anything that will fix it?
P.S. I've been making changes to the style.css file with the #media property. Thanks!
Back in the day, websites were always developed to accommodate the "square" monitor resolution. Today, the number of users using 800x600 or 640x480 is negligible which is why most sites leverage the space benefits introduced by the wider ratio. And, without getting into the possibility of an antiquated browser to go with his antiquated hardware and why one wouldn't want to pander to either of those over the mass as a whole, I'll stick to the question at hand.
Without seeing the website, I can't say for sure what's going on but I'm willing to guess that one of two things is happening:
The way in which the content is organized is causing one area to push into another
He has to use the horizontal scroll his on browser to see the whole site.
The solution for overcoming both of those problems is a whole other issue but, to get you both looking at the same page, set your monitor's resolution equal to his to simulate his view. On both my desktop and laptop, I can set it to 800x600 so I'm willing to be you can too.
Really not sure why this is occuring but with some systems the backround image gradient appears choppy and only half of it even appears, also some systems display the color so light is can barely even be seen especially those with lower resolution settings. Any ideas why this is occuring?
Here is the link to the page: http://www.kapacitive.com/Main_Page_Template.html I have it here just for testing purposes.
I also noticed that if I change the CSS positioning of the background to background-position:50% 50%; the issue of only having half the backround appear occurs on my main system.
I have a small touch screen Garmin device that has a web browser and with that device the background appears both choppy and only half appears, though I really didn't expect much from that device in the first place.
My secondary machine has a lower resolution display and with that system the background can barely be seen. This also occurs using an entirely different machine and display which has a lower resolution setting.
Maybe, I should just trash the background all together with all these damn bugs occuring, though in my opinion it does look better with the background.
If anyone wants to volunteer test the page using other devices and provide the results that would also be cool, I currently do not own any Apple devices.
Like I've stated any suggestions or ideas on resolving this issue would be great and even any insight about why this is occuring. I realize each machine is different but the differences in how this page is rendering between different machines is way too drastic in my opinion to be acceptable for deployment.
I believe the problem is with the color-depth of the machines viewing the background image. That nicely faded gradient relies on a LOT of colors, and on a screen with a limited palette, it's going to be choppy.
A work around would be to test the pixelDepth/colorDepth of visitors' screens, and to dynamically change the background image to something plainer if it is too low. Most browsers provide that information [via JavaScript] in the screen variable.
window.screen.colorDepth
window.screen.pixelDepth
I am building a learning product(in flex/flash) that will get used both by an individual on her desktop, and also by a instructor in a large room. The challenge is rooms, where this will be used, tend to be quite large- as big as 80-90 people and seating far from screen
I am not sure a single font size(12-14 font) will work for all- currently I have built it for "personal use" to use real-estate best and am hoping tweak slightly for "projector mode"- plan is to allow user to selectively pick and magnify various sections of the screen- is this a model that is done elsewhere- what are the best practices here?
Any thoughts on how to program for this?
You should keep it down to only a few short lines of text and an image/video if you're presenting this on a projector. The fact is, 12-14px fonts are much too small for that application - you should use 24px and up. Consider that projectors will typically have lower resolutions than monitors and your display will be scaled down somehow, which usually renders small / thin text unreadable. You might want to design for a 1024x768 projector, and let your interface scale so the users see the same display (same proportions and positioning) on their computer - I caution you that if you must use raster images, use high enough resolution images that they don't see a pixelated mess on their high res screens.
A useful article on slide design can be found at http://www.thinkoutsidetheslide.com/articles/select_and_use_fonts.htm and you can probably use the default templates in Powerpoint as a starting point for your layout. Don't shoehorn too much information into one screen!
Back in the day, 800 x 600 was the screen resolution to design for - and maybe 640 x 480. Then along came 1024 x 768, etc, etc, etc.
But then it gets worse: now we have not only different resolutions but also different aspect ratios.
What strategies do people use to accommodate today's ever-expanding range of screen sizes and aspect ratios?
(BTW - I was only thinking about laptop / desktop hardware, but of course there's smart-phones and tablets to consider too.)
I know this would be a somewhat controversial opinion, but I'd say it anyway: Don't
Don't design for multiple screen sizes or aspect ratios. There are of course a few exceptions: Heavy web applications like webmail clients can definitely do with more screen real estate, and are probably flexible enough to accommodate a large range of screen sizes anyway. Mobile versions of said website, with a more flexible design to accommodate the incredible spectrum of mobile screen sizes can help too for sites with high mobile volumes. However, if you stick to the so called 'desktop web', then I think we can say that 95% of the time there are more important things to care about than screen sizes, resolution and aspect ratio.
First off, lets tackle the easy one. I don't really understand why you would care so much for aspect ratio - it isn't like we care that much for the 'below the fold' nonsense anymore, do we? The web is a vertical medium - scrolling will always have a place in websites. Having everything above the magical 600px line is just stupid.
Next, screen resolution/size: Again, I find it difficult to defend.
Users with large screens do not usually maximize their browser windows, because they find that most website do not take advantage of them. While the web adjust to the user, the user also adjust to the web. Although you could argue that this is a chicken and egg problem, the fact remains that website are usually designed for the lowest common denominator. I'm not defending this position, but rather, pointing it out as the current prevailing trend in the industry.
There are certain things that simply won't work with resolution that are too high or too low. There is, for example, a small range of widths that allow people to read comfortably on screen. Any longer and the amount of movement for the eye to the next line would be annoying. Too low and the text would appear cramped. The fact that the web was designed to be resolution neutral means that paradoxically not many provisions has been made for those who wish to build fluid layouts. min-height and max-height would help, of course, but the wider the range, the more difficulties you will face. Things like orphaned elements, displaced images, backgrounds that run out, etc. are unavoidable for truly flexible sites built with today's technology.
So my opinion is that the simplest method for dealing with multiple resolutions is to ignore it altogether - with today's technology there are not many options anyway - and design for the lowest common denominator.
Watch out for high DPI settings
I think one of the most undiscussed issues facing front-end web development today is testing on high DPI systems. Everyone has learned to test and test and test on different browsers but designers/developers have not caught on to testing on different DPI settings.
High (or even low, for that matter) DPI settings break designs when fonts are scaled but images are not (which can happen), can cause images to look fuzzy/blurry, and absolutely positioned objects may not appear in the desired location (which would be devastating for CSS menus.) If nothing else, test your images at high DPI and re-render them as necessary.
This has never really been an issue until recently with the release of Windows 7 and people buying computers with high resolution monitors. First off, Windows 7 uses 96DPI as default (which is different from the rest of the computing world that has been using 72DPI as the standard. Moreover, Windows 7 will automatically adjust DPI settings and I have seen people with DPI of 150% of normal (96 DPI in Windows).
Here's a great link discussing this issue in more details: http://webkit.org/blog/55/high-dpi-web-sites/
A great cross-browser website designed with web standards is the goal but don't forget about DPI testing.
Well, trying to keep the answer not-too-long, this is what I do.
(A) Always start from the most likely used ratio/resolution
If your average joe is going to be on a modern laptop or a desktop machine he likely has AT LEAST 1024x768 (refs: w3schools elykinnovation), that gives you roughly a usable 960px width (you might want to check the 960grid system - there are a hell lot of new framework since I first wrote this).
If you users are more likely to start with a mobile device or a tablet, thing about them first.
If it's 50%-50%, it's usually better to start from small and then grow up, eg. Rock Hammer or Foundation
(B) Layout: fluid or not?
If your website could benefit from a larger width, pick a fluid design starting from this resolution. Be careful that the human eye does not like to read text over long lines, so do not abuse of fluid design; often sticking to 960px with large margins is acceptable.
You might want to add (javascript) some additional side-menus if you really have a lot more space. But design your website to work without JS as much as possible.
(C) Other resolutions
Finally it's time to check that with least used resolutions things are still acceptable.
(D) Other devices, ratios and stuff
There are not many options for different ratios; it often means you are running on a mobile, ipad, AAA or similar device.
My advice is to ... design for those devices specifically.
While writing your HTML keep in mind what you are going to need and remember to do HTML by semantic and not for design. Use properly HTML5 semantic tags if you can.
Avoid < bold > or similar tags, and properly use tags and classes that you are going to style with CSS instead.
Use a framework!
But you still can make a few different designs for very different devices. You don't have to do everything responsive /in the same design/.
There are several ways to serve a different CSS depending on the client; you can do it:
server side, checking the browser in the HTTP heading coming from the client, either with your web server or your dynamic scripting environment - be it python/django, php, or whatever else
javascript (you can easily get the window size)
html - in particular with some specific devices such as iphone
You can easily produce a generic design for small (eg. mobile) devices by following some simple rules:
1. fluid layout capable of fitting in very small widths
2. compact header/footers not too waste too much space
3. few, clear contents per 'page'
4. avoid :over effects as they won't work on touch devices!!!
If you want to go further, you have to check individual devices customizations; an example is the iphone viewport, see the apple ref library.
This is just to get you started. Experience and specific needs will drive the rest!
Your site can't work perfectly for every display. Even if you had enough hours in the day (or should I say year/decade) to design for every possible display, you'd have to do it over every time a new device comes out.
In my development, I still religiously try to avoid horizontal scrolling, and that isn't too hard with floating divs / variable-width divs. But beyond that, we really are at the "there's an app for that" cross-roads, where you need a specially designed display for specific devices.
One strategy I use is to reduce dependence on a single display -- a customer probably doesn't need to see your entire web page to do what they came to do. You can parse-out functionality to smaller/simpler web pages that scale better on differently-sized devices.
At work, I have a little more "power", as it were -- I can develop internal web apps that are "designed to run on...some specific browser, some specific display setting, etc. -- use other configurations at your own risk". This, only after getting the managers to agree that spending an extra week in development (and even more in upgrades / future maintenance) just to placate that one vegetarian at the other end of campus who refuses to use IE really isn't worth the cost. In that case, we need another Timmy, not a more flexible web app that can look good on his favorite non-IE browser.
This is a common but complex question, which unfortunately does not have a single best solution. It all depends on the kind of content that you have. You can use a fluid layout, or design your site differently for different resolutions (see http://www.maxdesign.com.au/articles/resolution/). For an example of a fluid design, check this out - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
I think that responsive web design is the answer to your question. Have a look at these examples and techniques...Responsive Web Design