Graphics Hi-Res Design

[Morrigan 1,826]

So as technology moves forward and we get more hi-resolution devices things are starting to become more high def. I sit here and visit the Initiative on my mobile device and realize I need to start optimizing for high resolution items. So do you think about mobile devices in your design? Are you starting to become more moibile friendly in your design?

 

Did you even know there was a difference? Have you ever viewed your site in mobile view before?

 

Do you have questions on how to design to be more high resolution friendly?

[Kit the Human 758]

I'm often checking things out on my phone and making myself RP on my phone to see what doesn't work well. I also ask one of my friends to look at things because she uses an iPhone, and of course, Apple just has to do things differently.

 

So shout out to @Josie for mentioning vh and vw in place of percentages or pixels.

 

As for hi-res devices, I'm not entirely certain how I'm doing with them. In order to judge, I need to see how the site looks. (I'm assuming you're referring to things like retina display when you're talking about hi-res devices. Apologies if you're using the terms interchangeably!)

 

When you talk about high resolution friendly, what kind of things makes a theme high-res friendly?

 

[Morrigan 1,826]

Retina is one of them but not everything has retina display, they are just considered "high resolution". Comparably you can say a 1080P TV versus a 4K TV.

 

A big thing is to have alternative images for high resolution screens. You would name them the same but at the end add an @2x at the end of the file name.

 

So you would have logo.png and the high res version would be logo@2x.png. So when a high-res/retina display pulls the website it pulls the higher quality image. Normally you want an image 2 times the size of the original one. It should still display the same but the more pixels will make the image clearer.

 

I know for the most part the images on this site are "alright" but I'm trying to figure out ways to make things like site buttons more mobile friendly. It would require requiring more images but there are some software drawbacks to this but I've been considering it. I know there are enough graphics to make for a website though. Making more would likely get annoying. But I would want to make it as optional as possible. I mean it is your site.

 

@Kit the Human

[Kit the Human 758]

Of course ... but it's interesting and I imagine when you start a new theme with both hi-res and mobile devices in mind, your processes will simply include doing those few extra steps for them. 

 

Anyway for the curious, I've been reading around here and here.

 

So at a guess, I bet my header background looks like utter shite on hi res displays XD I compressed it to buggery so it's a bit shite already at 1080p. The rest of the forum should be alright.