We're creating the interface for an admin panel and we have a dilemma: chose a fixed width approach as opposed to a fluid/elastic one.
The main argument for a fixed width is that is will look the same on all screens, irrespective of screen size.
But we're talking about admin consoles here, where the target is a very small set of people. And we'd like to bundle in lots of info on the screen. We don't know what our clients are going to use when browsing this admin panel (laptop, desktop, or both) and we wouldn't like to limit their experience.
Most CMS's out there chose an elastic approach for their backends, like Wordpress, Joomla, etc.
Do you have any advices?
Thanks
No doubts : choose an elastic design !
It is far more future-proof, with all types of screen-width we begin to encounter today : mobile, netbook, tablets, large desktop screens...
it's not harder to code, only a different approach, and a rewarding one in the long term.
More on the subject :
http://www.alistapart.com/articles/elastic/
http://htmldog.com/articles/elasticdesign/demo/
Go for the Liquid layout.It will allow you to display more content on larger monitors, but still remain viable on smaller displays.
More detail visit
http://www.sendesignz.com/index.php/css/52-how-to-do-liquid-layout
Related
I've built flat page sites for years, largely with table architecture, and I know they must become more mobile compatible.
However, I actually WANT some of my non responsive sites to display in mobile screens as simply reduced-sized versions of themselves.
In an effort to understand the basics, I've created a simple page, no tables, one piece of art, and the meta tag which I understand is supposed to reduce a large size HTML page to fit within a mobile screen. But when I check this in a mobile screen emulator, my page is huge with just part of itself showing in the mobile screen. It's not reducing so that its full contents show within the screen.
What's the basic concept I'm missing?
http://ldihealtheconomist.com/html5-test-single-col.html
You're using a set width.
No matter what screen you're using, if you set the width as pixels then it will be displayed as that many pixels.
No offense, but if you've been making sites for years and don't know this, then maybe it's not the right thing for you...
Read up on #media queries, vw,vh and viewport widths.
Look at frameworks such as Bootstrap or Skeleton.
Preface: I am not a developer, but I was able to figure out enough about CSS to modify the twenty twelve theme for desktop browsers into this website: http://www.abcllc.org
Now that I have that looking the way I need it to, I've turned my attention to mobile. The theme has responsiveness built into it, but when I access the site from a mobile device, it scrunches it way up into the left side of the screen. Can I set a minimum width for mobile screens, or set it to auto-fill a mobile screen? The only thing I've figured out is the cutoff width between mobile and a regular browser (which I set to 640px).
I found varying threads throughout the interweb with people having the same issue, but with no answers. Any help would be greatly appreciated!
You can check out mine and see if that helps.
http://www.fossfolks.com/
My site is by no means the best example of css and design, but there's a lot less going on and it might be easier to see. There's a link to the stylesheet in the source. My current struggle is getting images to resize (width AND height) based on a percentage of screen width; I've not been able to sit down long enough to make it go.
I was wondering what are you opinions about when coding css, when/why coding fixed or liquid style sheets?
I agree that fixed size style sheets are easier/faster to code because liquid requires more time in order to have all elements well adapting to their parents.
So, when do you chose liquid over fixed (or vice versa)? Why?
Update 2 I think the best practice now is design a site with responsive and adaptive capabilities for any screen size. Liquid CSS may not have the pitfalls that you would think such as long lines of text (instead the block of text position adjusts on-the-fly) - examples of Responsive Design - browser-side code where pages adapt to any screensize:
http://surrey.ac.uk/
http://bostonglobe.com/
http://thoughtfulweb.co.uk/
Adaptive design: server hosting the site detects browser type that requested the page and serves up appropriate page layouts e.g. mobile. This has pitfalls in that the user agent identifiers aren't always precise - e.g. many browsers include the mozilla string in their id, for example, so it might not always be best to rely on this data.
Previous answer
Liquid layouts (layouts that horizontally shrink or stretch to fit the horizontal width of a window)
Advantages: the content reformats on the fly to fully utilise the
Window width. Which means that the dilemma of choosing the most
popular fixed width e.g. 940px, 960px or 978px is not required. This
is particularly useful for small screen handheld devices which vary
slightly. You have to do less work in considering all possible screen
sizes.
Disadvantages: For the reason that the site will shrink or stretch to
fit horizontally, you cannot control the layout as much as fixed
width. Aesthetics and how nice the site looks will be less under your
control. You may find that my point about having to do less work to support all screen widths is not true after all - as here you are considering scenarios where the screen is really small and your menu navigation is all bunched up and ugly or too far apart on a large screen
Fixed layouts (layouts that are fixed and don't change to fit the available horizontal width).
Advantages: Once you have settled on the most popular width e.g. 940px, 960px etc. you would not need to test the site at different screen widths. The layout is neat and things don't move around, aesthetics, how nice things look remains constant
Disadvantages: Some users with small screens, handhelds may need to scroll horizontally to view your site if your fixed width is larger. Unless you also support a mobile edition too that those users can use
Have a look around at major sites - what are they using. To me it seems fixed widths are more popular, including stackoverflow.com
That said, look at this fluid site: http://derekallard.com/
Here, the developer uses fluid layouts to advantage by using layers of graphics that slide over each other as the site width adjusted in your window.
update: There is no wrong or right answer. Both Have merits. Media folk who have come from television, film and newspaper into web may tend to favour fix widths owing to their familiarity with those media having that.
It's not a matter of technique, it's a matter of decision making.
You choose liquid if you (or the client) WANT liquid.
I myself do NOT WANT liquid. Why? With a very wide window you get very long copy text lines, which are hard to read.
OK there are some other parts you must consider. Is your page intended to be accessible? Then you have to make a sort of liquid layout for the ones which zoom the page.
You could also look for responsive web design. The one that works in mobile browsers, too.
http://www.alistapart.com/articles/responsive-web-design/
When left with a choice, I rarely use liquid layout in anything except business style web apps.
I.e. for apps where the customer insists on lots of horizontal information in e.g. tables, I'll go with a liquid layout for obvious reasons. For more standard websites, I'll stick with fixed if at all possible.
When I do go liquid for the latter, I'll mostly still enforce a max-width on copy text, because I'm not particularly politically correct, and making the site a joy to read for 99% of visitors is more important to me than making it a (relative) breeze to use for a few - as long as I keep it accessible to those few. Like yunzen says, line length of copy text is very important to both design and readability. Don't let those lines stretch to infinity...
Mostly, my fixed layout sites will have different ways of accomodating the smaller screen size rather than just simple liquid stretching - moving side bars and such beneath the text, and possibly adjusting the copy text width to fit the device viewport. Sometimes, but not always, that requires css media queries.
(see e.g. http://www.quirksmode.org/mobile/viewports2.html)
Usually fixed layouts are easier to design and develop, also visitors are used to this kind of layout.
Fluid layouts need more planning and also do not fit in all kinds of web application. I do not use the fluid approach very often.
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.
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