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 working on a web site which is supposed to have a fluid layout. I am currently presented with a dilemma: shall I use css sprite or opt for inline images?
All images will need to be fluid and reduce/enlarge their size on each respective screen size. I was thinking to use CSS sprite image but that would mean that I need to identify all major screen widths and then slice all images with those respective widths and add them to my sprite...
My questions is: what is the best approach for rendering images in fluid / responsive designs? Sprites, inline images or combination of both?
Thank you!
Personally I think sprites are a little unnecessary, the internet is fast enough now to just use separate bg images. Displaying the correct image by using media queries and constraining the size in fluid designs by using background-size: cover; or contain.
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 4 years ago.
Improve this question
If I set img {max-width: 100%) to make a default responsive feature to all images in a website. Is it a good practice? Should I do that?
Yes, it is a good practice but only if you implement it properly through inheritance and proper CSS naming to avoid convoluted HTML and CSS.
Having a default max-width:100% for images is a good thing as it set a standard for your website that no images should be larger than the window or the container in which it resides unless specified.
This way, you can give exceptions to specific images that should be allowed a size larger than the window or for different screen sizes using size specific rules.
It is better to make use of width and max-width. If the width of the image exceeds max-width, it will be constrained to the max value.
For example, consider the below CSS
img { width: 100%; max-width: 512px; }
If the width of the image exceeds more than 512px, then the image width is restriacted to 512px.
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
So, I'm learning CSS and came to know that you can create simple images by using CSS. The new google logo is entirely composed of circles and rectangles, so that its size is much lesser than the old one, which is in line with their mission to get google in underdeveloped countries, with slower internet. My question is, won't using CSS for logo be much smaller in size than using an image
According to Google's description of the process they went through redesigning their logo, there's a variant of the image that's only 305 bytes. So they wouldn't gain much by converting it to CSS.
As always there are multiple ways to solve a problem. Trying to recreate the logo in css is one of them but that's not what CSS is for.
There are multiple ways Google could show their logo:
As an image: png, jpg, svg
As a seperate file
Embedded in the html or css document
As a font
As you propose, recreate in html and css
Each of these solutions have their benefits and drawbacks. You only mentioned one benefit but their are so many other things you need to check: performance, platforms, accessibility, ...
In general you will notice that just displaying an image gives the best result.
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
From my knowledge, there are 2 primary ways to insert images into HTMl.
You can either use the traditional image tag and add the image via the "src" attribute.
Or you can add the image as a background-image to a div tag via the background-image property.
Can someone explain some of the pros and cons of using either of these approaches? When would you use one or the other?
If your images are for designing reasons, your best of placing them as background. But when your images are part of your content, for example your website logo, or some illustration as an explanation to your text, you put it in with an img tag.
I would say use css to insert background images. From my experience it's more efficient and easier to read if you can keep all attributes of a div in one language. You can then edit them without switching screens in your editor, unless you plan to add some kind of user interface (javascript, jquery, etc.)
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 8 years ago.
Improve this question
I´m trying to develop my first website. And I´m a bit confuse about some points.
I´m developping the html & css and then I want to do my website responsive.
First, I did some research to choose the width for my website, and i found information that the 960px is the best width, So I´m developing my content in 960px! But I have a 17 inch laptop and I have too much white space around the content. Its better do with 1024px for example? Or 960px is better?
And if I do with percentage for example, instead 960px use 70% I´ll resolve the white space, right? This is correct to do?
Second, to my site be responsive I was searching information and I was studying about media queries, but if I use percentage, I dont need to use the media queries, because the site is already responsive, right, or not?
Sorry to bother with this question that may seem simple but I am a beginner and I have this doubt, and maybe with your exprience, you can help me understand better.
Using percentage, your site will be fluid. To be responsive, use media queries, so you have a site adapted to the screen size, not forcing the content.
A little about CSS Media Queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
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 12 years ago.
Improve this question
First of all I want make clear that though I'm still learning CSS, I think I have fair understanding of it and especially liquid aspect of it and I also think that this is the way to go, however my question is about the graphic stage of web designing, so if I want to start a new project in Photoshop; what are the best page dimension should I use, keep in mind that I intend to use relative values when coding in CSS? and thanks in advance.
I usually use 1300px x 2000px for the photoshop document.
Then I "sketch" up the 960px width wrapper.
From there I start the creative process.
Take a look at http://photoshopetiquette.com/ for some more tips on web design in photoshop.
Cheers!
Most of the pages are being made to fit in 1024x768 (without a horizontal scroll) and the width of the page is about 950-980px. I can suggest you to start with 1200x1400 canvas in Photoshop and you can always resize it just go to Image -> Canvas Size