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.)
Related
4k phones are still new in the market, but I suppose it's only a matter of time the tech becomes more widespread. Should I be concerned when it comes to designing responsive websites?
Is there any other unit of measure that I should use that's not px to avoid issues in the future or are my worries unfounded?
Short answer: Your worries are probably unfounded.
Longer answer: I don't know the exact specs of some 4k phones, but the interpreted CSS-resolution of smartphones these days is in most cases much lower than the physical resolution. (see this thread about device pixel ratio). 4k phones will just have a much higher device pixel ratio. So if your responsive websites work on devices like the iphone 5 or 6, they will probably also do well on 4k phones.
That said, to be at least somehow future proof, I advise to follow best practices. Some examples:
Use SVGs instead of pixel graphics where possible, so the graphics stay sharp on devices with high pixel ratio.
Work mobile first and set your breakpoints where they make logical sense, not targeting specific devices
You should use % instead of px and use em for font-size
I don't often get to work for high resolution displays as most of my clients tend to work with the oldest machines known to man, however I'm currently working on something which will only be displayed on retina display iPads. A graphic has been mocked up of the design they want to the retina resolution (2,048 by 1,536) and I've been building my site based off the dimensions in the graphic. However now I'm actually trying to view it on an iPad, everything is far too big, my '260px header' which I assumed would take up a 6th of the page (ish) is closer to double that.
I don't seem to be able to find anything regarding a workable HTML size for retina displays, only pages talking about how to prep images for retina, what size resolution should I work to when building the HTML?
I believe the best way for you to achieve this is to use CSS where possible and build your site at 1024x768 utilising #2x graphics for retina devices.
A simple guide on utilising these ideas can be found here - http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
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'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
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.