I'm using the visibility-classes of Foundation (http://foundation.zurb.com/docs/components/visibility.html) in order to display my website differently on mobile devices.
However the more recent smartphones have insane scree-dimensions (e.g. Nexus 6 2560 × 1440 Pixel).
I don't have such a device and therefore can't test whether classes like hide-for-small-onlystill work there. Afaik small means less than 640 pixels.
So how can I deliver the same page across all smartphones? Even though these devices have huge screen-dimensions I'd still like to display a simplified homepage.
Foundation visibility classes are based on media queries that checks only screen width.
If you want to target mobile devices you can detect mobile device (not the best practice but useful many times). here is a good way to do it: http://detectmobilebrowsers.com/
once you detect the mobile user (on the back-end or front-end) you can add a class to your body and target that separately on your css.
Unfortunately, I don't think there an easy workaround this.
I'm working on a responsive website, but 1 question always bother me is that should we always work from smaller screen size and move up to bigger screen or other way round?
For me I find it easier to work from bigger screen then reduce the browser screen and adjust it slowly. The reason I do this is because I can preserve my original pc screen's design much easier, if I work from smaller screen onwards, adjust it to original pc screen design would be difficult.
Is it better to work from bigger/smaller screen onwards? What is your opinion in terms of performance, loading speed, and coding difficulty?
This goes far beyond just responsive layouts or even CSS. You should optimize anything based on the way it will be used most. If I were making a site that most users would want to use from their phone, then of course, I would start development with the mobile version first! My reasoning is that there tend to be some trade-offs (albeit minor) with how things degrade as the screen size becomes smaller. To make sure the tradeoffs favor the mobile version, it may be best to start there and work toward the desktop version. However, I have always found myself in situations where starting with the desktop size is most practical, then I reduce the screen size and re-style it to my liking with media queries - reduce screen size, restyle, etc. It sounds like that's the approach you are taking and that should be fine unless a project calls for more attention to mobile from the beginning as I said.
No matter what you choose, if you are writing sensible code, the performance will be fine and the code should be understandable.
As m59 said, start with whatever device will be most used. A scenario that can benefit from the mobile to monitor workflow is when you create a new site from the ground up. This scenario leans more towards affecting design decisions because by starting mobile, you include all of the features and contents that are absolutely necessary for the user - the bare necessities . This way you filter out any filler that go into some desktop sites, making your design cleaner and the UI more user-friendly. Also, starting from mobile will allow you to explore and enhance your mobile UI development ability for the future, rather than just learning how to cram it all in.
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
px? em? pt? seems like with varying device sizes and densities it's getting to be time to use something absolute like pts. Can anyone point me to a good, recent write-up of what to use when?
(I'm specifically targeting webkit-based mobile devices as my primary platform, though the site needs to work on large monitors, as well. I'm fine ignoring IE and older browsers for the most part.)
Check out this and that from Luke Wroblewski. Googling his name will find more.
As you say with high density phones you should avoid px but also pt that originally was for printing. As you setup your site to comply with most browsers, mobile or not, set your body font-size using percentage (historically better support I say without source) and then use em through your document. This allow your users to set their preferred font-size in their (mobile phones) browser settings and let you keep your relations between your different font-sizes.
As a web developer, I stick to pixels because this is already a standard for all digital display devices. Most mobile phones now come in screens based on pixels, and phones are able to resize to fit your content.
You simply have to make sure that you minimize the amount of content on each page for fast loading and rendering.
I think that you are best designing multiple CSS style sheets for browser window sizes,
Aside from that the best method in my mind is percentages - that way the content is always relative to the screen it is being viewed on. And then use em for font-sizes which is similar in the way it works to the way percentage works for layout sizes.
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