Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
In this page here, Compass gives allowance for 4 different types of layouts for sprites - vertical, horizontal, diagonal and smart.
It mentions that the smart layout is the most efficient use of space for a layout, which is very plain to see.
However, Compass defaults to using the vertical layout on Sprites! Why? And why even offer up different types of layouts? Is there any practical reason?
One difference is the generated file size.
Depending on the images that are combined to a sprite, it is advantageous to select the option which fits best the image space without much whitespace. This will result in a smaller image size than using one of the other options.
This may lead to use smart option most of the time. Google uses sprites of that style, too.
The smart sprites are most probably more cpu intensive to generate than simple horizontal or vertical sprites. I do not know if there are other reasons for selecting horizontal/vertical sprites over smart sprites.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am pretty new to front-end development. I wonder what are the disadvantages of vh and vw? I have been always using them because they can adjust the font size based on the screen size. However, I didn't see many people use them as much as I do and saw online that most people prefer to use em. So, it is okay to keep always using vh and vw? What are their disadvantages?
Thank you very much!
The disadvantage is the same as the advantage: it is relative to the screen dimensions.
This is something you probably don't want for a font, since "absolute" units like px and cm already are relative to the perceived size*, which accounts for how distant the observer is from the screen. For example: If a user is using a mobile phone to navigate a web page, you would want the font size to remain constant whether it has a big screen or a small screen.
So I would recommend using an absolute unit like px to set the font size, border thicknesses, etc...
* According to the spec. In practice, the size of px is often synchronized with the OS settings.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm adding a tile to the body tag as a background-image (for noise texture). As far as performance goes, does it matter whether that tile is 50x50, 200x200, etc.?
There doesn't appear to be any recent information regarding this. I found a few similar questions that haven't been updated in years and wasn't sure if browsers have changed the way they handle this.
Short answer: No.
The image only needs to be downloaded once. Instead, worry about how it displays to a user based on the size you choose. Watch out for any pixelation with too big of tile sizes.
This really doesn't matter but can be debated depending on the actual file size of the image . Otherwise of course setting the pixel size to 50x50 depending on the original size of the tile would look smaller but cleaner than 200x200 . At the end of the day I would prefer you to judge mainly on how it looks in this case .
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am new to responsive web designing and CSS3 media queries. I am designing a website that will be accessed through browser on all kind of devices like cell phones, tabs, desktop.
I am using CSS3 media queries and in the process of creating css for my website. I want the font-size, the width of the div should vary as per device's screen width
How many screen sizes should be handled typically if I want my website to look fine on all type of devices. Is there a standard for it?
Please advise.
While you resize your browser window, it should simply look good on every possible size (resize your browser window and make sure you drag it through all the sizes for yourself: smallest to largest for your monitor.)
Then test this as well for different browsers.
You can find a handy tool for this on www.quirktools.com/screenfly.
But remember it's a tool. It should look good on all sizes. No matter how you drag it.
Well, there are a lot of free responsive templates on the web that already do that, but if you want to build your own design from scratch, you should start with a full version of your site for desktop browsers, then add css styles for most common devices/sizes.
Keep in mind that there are a lot of different resolutions a tablet or smartphone could have. 1080p, 720p, 800x600 etc. and a lot in-between.
Just do a quick search for a reference of responsive design device resolution.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I have a website that pops-up animated icons when you mouseover them
But i think that maybe it could result in poor graphical performance from the browser. I could put animated icons in a sprite, and not-animated icons in another, but what is the point? in that way sprites stop being useful. Do you recommend using a script that animate the icons placed in the sprite manually?
What is your recommendation? Since i need a good performance.
Don’t guess, test! Seriously. As long as the animated gif is of reasonable dimensions, I doubt it’ll be a big problem. However, the best way to find out is to try it. Try using Chrome or Safari’s Web Inspector to profile page load times with the various strategies (no animation, animated icons in a separate file, everything in one image), and see which performs the best. If there’s not much difference, choose the easiest one. You can always change it later if performance becomes an issue.
The gif compression format is a tricky one because all of the blank space isn't treated like it would be in a jpg or png (bitwise). However as the number of animations increases and the number of colors increases, the gif format will begin to break down. What you should do is test the individual sizes against the size of the sprite image. The performance of moving the sprite shouldn't really be an issue at all, but as other answers have said you'll have to test it with different browsers and form factors.
The support for animated GIF is present in all majors browsers since nearly the beginning of the World Wide Web (www); 2 decades ago. I would be very surprised if they were of any concern for any modern browser excerpt for those who don't support graphics like Lynx.
You might have a problem with some browsers if the frame rate is too high but this clearly not the case for these icons that you are showing us.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I'm working on my web project and am looking for the way
all the big ones like twitter, facebook, etc. created their icon set.
Did you ever take a look at their sprite?
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yI/x/4jB4tvIAAbU.png
How do they draw those tiny icons?
Is that technique called pixel art? And where can I hire someone to draw some for me?
I'm sorry if this is not the place to ask, had no idea where to post this.
You can create pixel art using a variety of programs, including Adobe Photoshop, Fireworks, etc, but there are also freeware and inexpensive offerings too.
Check out this one: http://code.google.com/p/grafx2/
If you are not familiar with graphic design, you can hire someone using a freelance service, such as Freelancer.com, Odesk.com, or a variety of others. Just Google it.
Yes, it is called pixel art, and it uses a limited palette of colors (usually 8 or 16 bit) -- where each pixel is represented by one 8-bit byte (maximum colors: 256). As opposed to modern graphics which use a technique of anti-aliasing which blurs the edge to create the illusion of a smooth edge.