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
Related
I am using max-width: 768px to change looks on my website. But there are many high resolution devices on market (4K Mobile phones etc). How can I detect them? should I use orientation portrait? Or can I specify a aspect ratio as a code? What is the best way to catch all devices for responsive web design?
You have multiple options for this problem:
Within your media query you can test for the device width, resolution (pixel density), orientation, aspect ratio, pointer option and many more. See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for a full list of options.
It is recommended to support your implementation by feature and not by environment. For example you can target dark/light mode or if a device supports hover events instead of checking for phone, tablet, desktop, tv, gaming console …
Also you can combine different CSS units like em, vmin, vh, vh, % to get relative measurements.
This in combination with CSS grid can already solve many problems without defining a media query.
Of course in the end you probably still end up with some media queries. For that I recommend to pick 2-4 common screen sizes even though this is no guarantee that it will cover all devices.
I can also recommend you these episodes from The CSS Podcast
#rules
Preference Media Queries
I've been researching for a while now, but there's still something I cannot understand.
Many websites (1, 2) suggest some common breakpoints to use for media queries when we develop for smartphones.
Despite the debate between pixels, ems or rems (I usually use ems), the problem is that nowadays smartphones have increasingly high resolutions, up to 1080p or even 1440p.
It seems to me that this makes pointless differentiating the different types of devices using media queries, since modern smartphones have the same pixels width of many older desktops.
Writing a media query using #media (max-width: 600px) (or 37.5) doesn't make sense anymore, since (I tested it using my smartphone) it doesn't get triggered.
I cannot just increase the breakpoint level, since some older desktops or tablets have a lower resolution than modern smartphones. Furthermore, I would have an huge breakpoint going from 0 to, let's say, 1080px (which is still not enough).
I know about #media (hover: ...) but I didn't see anyone suggesting it for breakpoints and I couldn't find it anywhere peeking into some big websites' CSS
Am I missing something?
How do modern websites distinguish between smartphones and desktops?
Please don't attack me if I'm asking something stupid... I know that I could missing something easy but I cannot just get it. Any answer would be appreciated.
Thanks in advance.
Even though mobile screens might have high resolutions, it doesn't matter - because the pixel density is the important thing here.
As long as you set your viewport to support mobile devices, media queries would work as you expect (using small numbers such as 600px).
You can read more about the meaning of CSS pixels on MDN.
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 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.