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'm developing a website for a photographer. The landing page is made of a big responsive background image and a menu. I know how to make a responsive background image, but the question I have is : Which resolution should the image be? Should I get 2-3 different sizes and apply them depending on the device width or one which I would reduce? Which should be the biggest size for the biggest screens? Thanks.
Focus more on compression and format than resolution. If you use caching and compression on the server you won't need to decrease the resolution of the image. As for this question:
Should I get 2-3 different sizes and apply them depending on the device width or one which I would reduce?
Use the same image for all screens. Also note that changing the image size attribute doesn't decrease load times, it just resizes the image after downloading it
I'm not sure I agree with Random User 100%. I would, if possible, use differently sized images for different media sizes. Since theres a huge range of screen sizes, and also a huge range of bandwidth limitations, If you can serve the smallest possible image size for the screen, it will have a large effect on load times. While Random User may be correct about compression and the size attribute, BUT caching won't help if users are loading your page for the first time. A high-res image loading on a 3G connection is gonna hang up your page load, one way or another.
Currently there isn't wide support natively in browsers for responsive images (yet), such as the srcset attibute or the picture element, but there are Javascript alternatives. The one I use is Interchange, part of the Foundation framework.
You do want to be careful that you are not trading image loading savings for Javascript loading losses. However, in general, javascript libraries are fairly small, and the additional HTTP request for a JS file will usually be outweighed by the savings gained by not loading a massive image on a mobile device. I would recommend combining and compressing your Javascript into a single file, but thats another thing altogether.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've read articles, forums posts, answers here and everyone suggests font-icons are a way to go when it comes to load times and speed of a website.
I was about to use FontAwesome for a couple of icons and the problem is large weight of a font itself (not to mention 25KB CSS unless you take what you need).
You end up with cross-browser compatible font extention list that weighs 705KB !! Just to use a couple of small icons on a page?
I've done those same icons on Photosohp and total file size is around 28KB. That's more than 20 times smaller for browser to download!! So why the heck everyone is talking about speed of font icons over images or image sprites?
yea fonts are faster than images because on loading of multiple images multiple http request needed but for fonts they can load from CDN server, there is another reason why we use fonts because we can change font size colour and dimension easily.
refer this link
why Fonts better than images
There are a few things to answer here.
First, why do people talk about iconfonts, well they are kinda old news, but the as for the reasons why they're still used they would include:
Browser backwards compatibility
Ease of use (especially inline with text)
Maturity, many existing icon sets come pre-packaged in this form
Second as to the size issue, you can customize icon fonts to include whatever you need specifically, check out IcoMoon (assuming you're not already using an automater such as gulp / grunt). It'll allow you to build / manage your fonts.
Third, i personally don't use icon fonts anymore, because of 2 reasons:
They are affected by font anti-aliasing
vertical alignment is more difficult (since it's affected by line height, etc)
Instead i use SVG sprites, i also have a nifty gulp process that will let me design in illustrator, and create sprites just by saving them in a particular directory, naturally it also optimizes / compresses them.
If you want to figure out how to do this for yourself i suggest checking out:
https://github.com/sindresorhus/gulp-imagemin
https://github.com/w0rm/gulp-svgstore
For the initial load of the page, there might be more data, but fonts tend to be cached, so subsequent loads, or loads of other pages that use the same font will be faster.
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 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 have made some websites in Photoshop CS5, but I usually tend to just make them raw in notepad++. I normally make them live on the site, and edit the code and refresh the page to see the changes. I am wanting to move to the more professional method and making the entire template/design in photoshop. The thing holding me back from diving right in, is the very very start lol..
What is a good resolution to use for the template? I have came across different tutorials and they have say different sizes. For instance, my laptop resolution is 1366x768. I have a 22in LCD at my office, and I know it is a really large resolution as well. I would assume the min resolution of most monitors is 1024x768...
When creating a new template in Photoshop to create website templates, what size should I make the image and why?
Also, since we are on the topic, do you guys have any links to good resources of image collections and such that you find helps you the most in creating your templates? I am a programmer, and as we all know, most coders suck at images.. I am just trying to strengthen the other half of my brain :)
Thanks in advance!
I would suggest the following course of action:
Take a look at current statistics for the most widely used screen resolutions. As you'll see, 1366x768 is the most popular resolution right now, followed by good old 1024x768 which still has a huge user base. And keep and eye out for mobile resolutions as well.
Factor in the necessary screen real estate taken by browser chrome and other OS fluff.
Since designing for multiple screen sizes is becoming more important every day, I would strongly encourage you to pick a few target resolutions rather than only one. This can all be nicely handled by CSS. Even if you're targeting only desktops, it still makes sense to consider different screen sizes.
Since you're still getting your feet wet with Photoshop, you could start from one of the many grid-based PSD templates available. I know a 960px one and a 1140px one, but you can find many more. You'll probably have to use multiple grids anyway if you decide to support more than one screen size.
And then when you feel like thinking about all this a bit harder, go straight for this article: A tale of two viewports by Peter-Paul Koch.
Look at smashing magazine and sign up for their newsletter as well as webdesignerdepot and check out Codrops.net. They have great freebies, tutorials, and standards updates. I LOVE checking my mail to see them.
As for the PSD - their's no set size. I've seen professional wordpress developers mockup at 1100px wide (height is SO variant based on your layout). I wouldn't recommend much more than 1366px wide.
I might do 1366 or 1440 because that is the resolution most people will see. When you send a mockup at 1920 wide people think the website is too small, when the content is still the 940-980 that they all
Edit:
I myself do PSD's at either at 1100px or 1440px wide and the main content is is always 940-980px wide.
I use 1100 when there isn't much to look at graphically in the body background, and 1440 when the background is more crucial to the "feel" of the website.
You want to design your website for the most used screen resolution which seems to be 1280px by 720px. Therefore that is what you want your width to be, you can create any type of background and just make sure you fade it to one color or transparently and use CSS to change the background color.
Make sure you have guides that help you keep the content inline, best way, create a new document with the width 960-100px and the height 720px, then drag guides to all four sides.
Then you can change document size to 1280px by 800-960px.
The reason why you have a guide at 720px is because everything above that line is guaranteed to be seen on all resolutions, it's called "above the fold". Good designers take this in account for to ensure the audience will be drawn into exploring the site, a featured content slider is an easy way out.
incomepitbull, I understand where you are coming from...
I am also a back end developer who is trying to learn Photoshop..
Many front end designers are ignorant of what goes on on development stage...
Mostly the Photoshop moke up depends on the customer specification...
The height doesn't matter; use 960 px (12col,16col,24col), 980 px (12col,24,col), 1000 px (100 % responsive friendly for those not using grid systems) or 1140 (for webs targeting bigger monitors ie not mobile first px...)
After all, as developers, we fix all this problems; but good mockups are important...
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 9 years ago.
Improve this question
is css-sprite good technique? I read about its pros at http://spriteme.org/ and have also I seen a lot of questions about css sprites here in stackoverflow.
What are its cons?
Will it work in all browsers as claimed in their site?
Yes, it is a good technique.
You can reduce the number of HTTP requests and it is a page optimization technique.
The first rule in
Best Practices for Speeding Websites by Yahoo
is
Minimize HTTP Requests
80% of the end-user response time is
spent on the front-end. Most of this
time is tied up in downloading all the
components in the page: images,
stylesheets, scripts, Flash, etc.
Reducing the number of components in
turn reduces the number of HTTP
requests required to render the page.
This is the key to faster pages.
CSS Sprites are the preferred method
for reducing the number of image
requests. Combine your background
images into a single image and use the
CSS background-image and
background-position properties to
display the desired image segment.
One way to reduce the number of
components in the page is to simplify
the page's design. But is there a way
to build pages with richer content
while also achieving fast response
times? Here are some techniques for
reducing the number of HTTP requests,
while still supporting rich page
designs.
When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.
It is supported by almost all modern browsers.
This is also a good article on CSS sprites
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
It worked for IE 6 Safari Opera 8+ and FF2+.
You should read this:
Gif Compression
It explains how GIF (and other image files) are compressed.
For example displaying the same data in "rows" instead of "columns" reduces the space usage dramatically.
Furthermore you preload all images and there is no delay if you swap images.
Another plus is that you can use one sprite for a "red" design and another sprite for a "blue" design.
However there is one disadvantage:
Most of the browsers cache the image sprites.
So you might running into troubles when it comes to updating the sprite.
Its a great technique, but you have to be real carefull as how you do it so it works correctly in every browser.
It can be done and is a good optimizing tip, but as always, pay attention as how it works in IE, Firefox and Chrome while you are doing it.
The cons are that it can't be used always, and you have to stick to the least common denominator for cross browser css support.
Done right, it should work fine in all browsers (even IE6).
The biggest con I can think of is that if you have too many images in one sprite, and need to change the dimensions for just one of them, it can cause you to have to change a lot of CSS (since the offsets for other images will probably change as well)
One downside i've run into is that CSS sprites don't seem to print properly in many browsers
Of course, because it saves lot of http request, that very important for your website loading time.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great explanation and everything you need to know about CSS Sprite.