Images.xcassets in watchkit has options for 1x, 2x and 3x.
But how do we know which one to use ? Both are retina, but have different screen sizes. Do we have to supply all three? What happens if you don't ?
EDIT: I have tried putting the image in 1x and 2x, and haven't noticed any difference so far, but that could just be an absence of my testing. Nothing else.
They are all #2x. You can configure your xcassets image set to actually be specific for the Apple Watch by specifying the device. Below is a screenshot demonstrating how to do this.
Hopefully that helps clarify things.
It'll use the closest available match. But the Watch is retina native so ideally you would provide just #2x; bundling more will just take up unneeded space.
Related
Hi Guys (& Girls of course)
I'm having a major problem with webkit and media queries. Basically they are only kicking in around 15-30px after they should.
When I load the page with Javascript enabled I can see from the console the correct device width and this corresponds with the array of extensions that I've thrown at it.
When I disable javascript I get the same result so obviously it isn't my javascript or any plugins that are throwing things out.
In the dev tools I can watch the inspector tab and the relevant media queries don't kick in until after they are supposed to and you can see the the resolution they have kicked in don't match the media queries themselves.
Any help would be much appreciated on this one as I'm now not really able to come up with any other suggestions.
If there is any information that I can give you that will help you to help me please let me know (I'm restricted in what screenshots I can provide due to non-disclosure).
Thanks in advance & here's hoping :-)
John
After sharing my question on Twitter I was sent this link which has fixes
http://mattstow.com/your-media-queries-are-wrong-fix-them-with-viewport-genie-and-mqgenie.html
It basically says that webkit doesn't take into account the scrollbars when applying media queries and that would (to me) explain the correct space that the media queries are off by. I hope that others find this answer useful as I couldn't find any information by searching Google. Obviously now that I am able to narrow down the search I would probably be able to to find the answer on there.
Check the difference between the browser width and the viewport width. It's the latter you want to design for with mobiles, tablets etc.
The scrollbar is the cause of this, the calculated width from js and the width you define in media query are not the same due to scrollbar (I think in some browsers they are the same but not all).
You need to sync the width so that js and media query is the same. If you want to go with media query width then you probably need an element to check for that changes with the css. If you wanna go with js width then you can easily add a class to the body and target your media query with that class. I am sure there are other ways of syncing as well.
I'm working on making my site more responsive. If I decrease my browser width to its minimal width, is this a good substitute for testing what will happen on mobile devices?
I don't have devices such as the iPad Mini or Galaxy S2/3 but still want to make sure the site will look good on them.
Ctrl + Shift + M on Firefox(Windows)
Cmd + Option + M on Firefox(Mac)
If you want to test your designs locally, in the browser, you can use Web Developer Add-On which will give you an option to view responsive layouts
Also you get ton's of online website out there which will do the job for you like
http://mattkersley.com/responsive/
http://www.studiopress.com/responsive/
http://www.responsivedesigntest.net/
http://screenqueri.es/
If you are using media queries, then yes just resize your browser. You can keep an eye on the window size by using an inspection tool like firebug and checking the body width.
CHECK Responsinator: Help you to test site on different devices and different orientations
http://www.responsinator.com/
I would suggest finding browser plugins that allow you to resize your browser to specific browser dimensions. Then set up the common sizes using it...320px, 480px, 600px, etc, and/or whatever needed for your project.
For Chrome, I use Window Resizer.
I use your described method myself, it is not 100% accurate, some textual sizes could change slightly especially if you are using em or rems. If testing box layout and stuff like that it can be fairly accurate.
Another solution would be to use a service like http://quirktools.com/screenfly is a relatively good solution also.
The best solution that I also use is Browser Stack: http://www.browserstack.com/ It is not free however. Browser Stack also allows you to test different operating systems, different browsers, and a multitude of different mobile devices.
The best way to go is with the devices, but, if some or all the devices are not available then you will have to resort to some other ( good ) tools out there. Here are a few examples :
Testing Tool 1
Testing Tool 2
Keep in mind, these sort of tools will show you pixel perfect output and the user interaction/behaviors maybe different.
How should I be preparing images for the web?
Each device seems to have a different resolution. I've always exported images at 72PPI. Is that even the proper number these days? Do some people use 96PPI? Which is better for non "retina" images?
Most of the tutorials I've encountered have suggested for UI graphics in the stylesheet that you take this sort of approach.
http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
Basically, make two images one exactly 2x the size of the other. Then...
background-size: 50% auto;
...on the #2x image. Note this article never specifies what PPI to export the images as.
Is it possible to export 1 image at 72PPI and one at 144PPI? Then you wouldn't need to even background-size the higher resolution one in the media query.
What should I be aiming for here? What are the defacto best practices for exporting images for the web?
Also, does anyone have a better article on the media query for higher dpi displays and handling it?
The PPI setting is completely irrelevant for images that you use on the web. The browser doesn't care at all what the PPI setting is, it only uses the pixel dimensions of the image.
So I've done a fair bit of reading on media queries and I get why for most situations just specifying a dimension and going after a device might be useful... But what if you're just looking for whether the device is portrait or landscape?
What I really want is to be able to check if the screen whether the width or height is longest, and then run different CSS depending on the answer. Ideally I want to be able to do this all inline rather than running different external stylesheets.
Any help much appreciated.
As Ryan and Cimmanon said, yes, it can be done. Media queries have a nifty little option called orientation, which you can set to "portrait" or "landscape".
Do keep in mind, though, that not all devices/browsers support some or any media queries, so make sure you have some default styles set up for those that would ignore your styles otherwise.
I often find myself in the need for matching up my webdesign to some reference-image. I used to use the PixelPerfect plugin for FireBug, to overlay an image on top of my design - however these days I mostly develop in Chrome, and there isn't a comparable tool to PixelPerfect.
My perfect tool would be some kind of HUD display that would overlay the entire screen, so I could use it disregarding whatever browser I'm currently working in.
How do you match up your webdesign to make it pixel perfect? Any tools and tips is highly appreciated.
How do you match up your webdesign to make it pixel perfect?
Don't, seriously.
There are so many devices and browsers and other factors that mean that, today more than ever, designs cannot be pixel perfect. To even try and make them so is going to cost a lot of time.
People don't compare websites between browsers so save yourself some valuable time and sanity!
A great way that I've seen done involves work on both ends, but it works nicely.
First, make sure that your designs fit a grid: repeating, same-sized columns with fixed width gutters. You can take that grid layer and turn it into a background image that you apply to your containers during development. That way, if anything doesn't line up with the grid, you'll see it immediately.
try online service like makiapp.com it just like pixelperfect for firebug.