I'm developing a mobile app using HTML5 and CSS3 using responsive design. Its quite difficult to find css resolution of mobile.
I'm using Samsugn galaxy Note2. my actual resolution is 1280 X 720. but css resolution is 640 X 360.
How can we calculate css resolution from actual resolution? and what is concept behind this?
Thanks in advance.
You can test for a certain aspect ratio using media queries, however you shouldn't be designing for specific devices or aspect ratios. Responsive design works best when you design for breakpoints as it relates to your content. This way, there's less to worry about, and your content almost always looks better on every device
Related
I am creating a responsive game web site. for that i don't want scroll bar in any resolution. i am using to test my website mozila "Responsive design View". in that they provided some standard screen resolution. I am OK with all resolution except 1280x600, And now my quesion is ...
1. Is there any devices in this resolution?
2. How many people are using this type of devices?
3. is it necessary to consider this resolution while creating responsive website?
Please replay me. Thanks in advance.
When it comes to desktop computers, screen resolution means nothing because a user can change the size of his browser window to any width and height. This means you may have a "resolution" of "1280x600 pixels" one moment, and "1281x599 pixels" the next.
Responsive design should gracefully accommodate all browser window sizes. All you need to worry is break points (i.e. your media queries), where page layout changes. Most designers typically set 2-3 break points to match the most commonly used screen sizes.
I've never heard of that exact ratio, 1280x600 pixels.
Here are some quick statistical resources:
https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
http://www.w3schools.com/browsers/browsers_display.asp
http://gs.statcounter.com/#resolution-na-monthly-200903-201203
I want to learn some basics in website development so that I can control the look and design of my site.
My website developer says that a full screen header with a gradient left to right won't work because screen size differs from 1920 down to 420 for mobile phones. My website is being optimised for browsing on mobile phones. Is there a way around this?
I have an image of what I am referring to. How do I post it for users to see here? (My website is a customised Magenta Go website.)
The question is not extremely clear, but it's possible that what you're looking for are CSS3 Media Queries and "responsive design".
I really recommend looking at how Twitter Bootstrap is doing it: http://twitter.github.io/bootstrap/scaffolding.html#responsive
Basically, you modify your CSS for different screen widths, possibly in your case providing different gradients for each case. And screen categories defined by Twitter Bootstrap in the aforementioned documentation seem pretty reasonable for most cases.
A general way to get a horizontal gradient to work on both large screens and mobiles is using CSS gradients, like this example. You can find an indication of browsers that support CSS gradients on the Can I Use website.
I received a website layout in Photoshop for three different resolutions: 1280, 1024 and 640 pixels wide. As my experience with RWD is somewhat limited, I would like to get a better understanding of how a web designer should think in terms of size breakpoints, fluidity etc. (at the time of writing).
My specific questions, stemming from this project are:
Why would a designer go with these 3 resolutions, given that the project is a typical company website?
Generally, are these resolutions optimal or should I our ask for others?
(Wouldn't 1024, 768, 320 make more sense? Or perhaps I should be looking for "natural breakpoints as opposed to canonical?)
How should I think about implementing the 640 layout in regard to iPhone 3 (#320px) and 4 (#640px)?
Thanks for any help.
These seem to be the more common landscape resolutions, 1280 being a wide version for desktop, 1024 being normal desktop/land scape tablet, and 640 being landscape for mobile. Personally though, I haven't seen these exact resolutions for responsive frameworks.
I'll give you 2 cool responsive frameworks as reference. Skeleton runs at 3 basic levels: 960px+ (desktop), 768px (tablet) and <480px (mobile). I think these are really good resolutions to work with, particularly if you're new to responsive and are still accustomed to working with pixels. Alternately, you can use the Goldilocks approach which uses the same principles (desktop, tablet, mobile) but uses ems instead of pixels, and is designed with a mobile-first in mind (as in, you start the design from the small version, and add the "extra stuff" for desktop). For cool articles and stuff on responsive, I also would encourage checking out the This is Responsive blog.
iPhone design is special. Don't think of them as different resolutions. In it's thinnest state (portrait, but even in landscape it's the same state), you are working at 320x480 (older models). The above frameworks target this in their mobile states. Retina-using models basically work at this same "resolution", but double each pixel for the high definition you are used to seeing. Your main concern with your design here is in regards to retina-ready images. As for that, this SmashingMag article should clear things up!
They're probably targeting wide desktop, desktop and landscape phone formats. See: http://astronautweb.co/2012/01/responsive-web-design-four-states/
(I sure hope the 1024-wide design is not actually 1024 pixels wide.)
Im doing some simple styling between different mobile devices and was wondering whats the best way to change depending on the resolution.
As my application looks fine on low resolution devices, but on high the fonts to small and other things are to small as well.
I was thinking of one style sheet depending on resolution but was wondering if this was the best way or is there better ways to implemented this situations.
The devices are all blackberry from new to old hence the high and low resolution.
Is there anyway even just to scale content up if the screens bigger?
Thanks
You can use media queries to target different screen sizes in CSS.
Here's a list for Blackberry devices http://responsive.co.za/blackberry-specific-media-queries/
You can do all this using CSS3 media queries.
Here are some resources
http://brendanmckenzie.com/2012/06/there-is-no-mobile-framework
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://html5boilerplate.com/mobile
You should create media queries like they said but if you are doing this for a large number of devices and/or your css file becomes very long, I would do it with if then statements so that each device doesn't have to download a huge css file that contains all of the media queries for every device.
I'm designing a Website for Desktop and iPad. The same website will be used for iPad and Desktop PCs.
Site's design width is 1024px and in iPad Portrait mode it will be 768px. My questions is what things I should consider while making Design and writing CSS so writing specific css for Portrait mode should not be needed
I want to make flexible layout for both orientation without using media queries.
You are going to have to use relative width's for everything - think percentages and em's.
Without media queries, it's going to be impossible to serve up different layouts for orientations - however if your design and code is flexible (using relative widths), your design will expand and contract based on the available screen width.
The biggest design concern, in my opinion, would be what the site looks like at 768px wide vs 1024px wide; are the line lengths too long? How will images stretch/contract? Will a font size at 768px be legible at 1024?
The font size will adjust automatically based on the em you set it to, which is a nice thing so you won't have to worry about it.