I have been reading a couple of topics about making responsive web sites and then the problems it comes with when using images, as apparently it can take up a lot of bandwidth (as you would have one image which would fit on a desktop which could be 1080px, and then scale it down to be on a mobile which might only be 300px but it would still be the same file size as the larger one)
My question is, within the interchangeable CSS for the different layouts, can't you define an image within that? So that say, you have 2 #media enquiries, you would then have 2 images of different sizes to cater to the layouts which would then take up less bandwidth (example, you have a 1080px for the desktop site and an image which is 300px for the mobile site which would then take up a lot less bandwidth)
Is this practice wrong? Or is this a viable fix? Could someone explain how this wouldn't solve the issue, as I believe it would? I would like to make some responsive sites, but that are kind to bandwidth
Well you can use media queries and set the image as background-image on a div element maybe.
Ex here: http://jsfiddle.net/qsByJ/
#media all and (min-width: 520px) {
#demo{
background-image:url(http://unreasonableatsea.com/wp-content/uploads/2012/03/demo-logo-large.png);
height:439px;
width:660px;
}
}
#media all and (max-width: 520px) {
#demo{
background-image:url(http://i1.sndcdn.com/artworks-000043575260-xlr304-original.jpg?164b459);
background-repeat:no-repeat;
height:282px;
width:425px;
}
}
This way you can serve a different image for a different device.
Some points why you should consider using different images:
on older devices a big image can crash the website or make it move really slow since the memory is small.
if you have more images on the page, performance will be affected since on some devices, on every draw, the images must be scaled down.
if you have a lot of images (social websites for example) the bandwidth consumption will be a lot larger.
This I think is a great question!
I have been having this exact problem myself. After a number of days of searching around I have managed to find a perfect solution.
Take a look at sprite sheets for images. This is where all your images are contained within a single image and then that only requires one image request to be sent. Therefor saving a lot of bandwidth.
What is even better is that if you make the sprite sheet at a high resolution and make it so it scales down dependant on screen size no pixelation will occur, giving you the desired results.
I hope this helps!
Related
Hi so I wanted to put 3 screenshots on 3 columns in one row like step 1,2,3 I wanted to make them all the same size. I was wondering what's the max width, height I could put before it gets stretch or compress or something (using bootstrap grid col-4). Also is there a command that helps reduce blurry picture. My pictures are a little bigger (not too big but bigger than it's suppose to be so it gets a litte blurry. so for example 300px width 300px height
What you're asking entirely depends on the pixels of your said screenshots. The smaller the pixel dimension, the smaller width and height before it starts to get too pixelated. Generally you can optimize pictures pretty neatly for web by using either Photoshop, similar or online tools.
Back in the old days (actually not that old), people used to say 72dpi/ppi (dots/pixel per inch) would be the optimal use for web, and 300dpi/ppi would be optimal for print. It honestly doesn't matter what the dpi/ppi is for web unless you are going to optimize for retina displays, in which case you'd want a better quality image than normal. You can for instance use media queries for that to check what the pixel ratio on a certain device should be before you change your pictures to a higher pixel resolution scale.
Example:
#media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}
This example along with more information about retina displays can be found here.
Normally when you're thinking webdesign / webdevelopment, you'll have a design guide / documentation, dictating the exact dimensions for x,y,z images on a certain page / pages.
My advice would be to think more about the overall memory size of the image. You can have nicely optimized images for practically any dimension at 200kb in size. Too heavy images will affect your page performance hugely in a negative way as the loading speed will be significally longer.
I am currently trying to build a personal profile page. It's a work in progress, and I know little HTML, but I'm getting there.
I'm having an issue with my webpage with regards to how it scales with changes of the browser window size. On my (quite wide) screen at university, it looks fine. However, reducing the browser window size manually - or simply viewing it in a full size browser window on a smaller screen - appears to mess everything up - it doesn't look very nice. Text goes close to my pictures, and it all looks a bit tatty.
I think this is probably because my design is quite poor.
1. Is it because my design is bad or is there something else I'm doing blatantly wrong?
My current idea for a solution is to resize things so that they would look more reasonable on a smaller screen (i.e. on a normal sized laptop). I'm worried that this might end up making things look a bit odd on a bigger screen, though.
2. Is it possible/within reason for a beginner to have two different designs, one for smaller screens and one for big screens, which could be detected and then utilised depending on what screen size viewer is using? Should my page be designed to simply work with whatever screen size?
3. If I do reorganize the page such that it works better with smaller
screens, is there a way to "lock" this design in place, so that it
doesn't get messed up if someone views my page in a wider window?
Perhaps a way to ensure that only the boundaries of the page increase
in width?
What I'm essentially asking is how I should go about designing my page in order to resolve the evident issue - where the issue is that it looks rubbish when the browser window is any smaller than the max size of my screen at university.
You've created your page using tables. It is not a good practise nowadays exactly due to the problems your are facing. In practise, tables should not be used for layout purposes.
To make your layout fluid it'd be better to develop using div with float and relative positioning.
You can see another discussion related to this topic here
https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design/6037
You could use css property #media, to handle different styles for different screen width: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have an SVG image which I'd like to display on screen at exactly 15×15cm, regardless of screen resolution, pixel density, etc.
<img src="foo.svg" class="foo">
.foo {
width: 15cm;
height: 15cm;
}
This causes the image to render at approximately 15×15cm, but there is quite a bit of deviation, particularly on tablet devices (my iPad rendered it at 8.3×8.3cm).
I get that cm measurements are intended mainly for print, but is there a way to reliably replicate them on screen?
There really isn't any good way to do this. While devices do sometimes know how large their physical screen is, they won't communicate this information to a Web page.
If you think about it, most of the time you wouldn't want exact physical sizes anyway. Some devices, like phones, are held closer to your face, so their text is smaller. On the other hand, if your page is showing up on a TV screen you'd want the text to be larger so you could read it from farther away.
You might be able to get close by checking user agents on mobile devices, but this approach will not work for desktop browsers, where user agents tell you very little about the hardware.
That is (as good as) impossible.
My monitor is full HD. So is my phone, it has the same amount of pixels so we can not use that. After that, there isn't really anything left.
The nearest solution I can come up with is to find some database with actual sizes of screen, and scale from there. But I doubt you can find such a database for the thousands of types of screens.
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!
Now that I've nailed how I want my website to look, I need a way to make it look good on any screen resolution. To make my life easier, I set static dimensions while I was playing with the design. The dimensions are set at 1040x690. At home I use 1920x1080 resolution, and my boss's laptop is on 800x600. The website looks either too big or too small.
I realize I can set things by percentage in my CSS to fix this. The problem is the webpage has images of varying sizes based on the dimensions of my design. How do I make the dimensions of my website dynamic without making it look bad with the pictures being sized the way they are.
This is called responsive design and is usually applied to re-formatting your layout for mobile devices. Formatting for different sizes is usually done using Media Queries which apply different stylesheets based on the user's screen size.
In general, sites don't make different versions for different resolutions of the non-mobile version and stick to common resolutions: generally 960-wide. The added complexity of supporting EVERY resolution is usually not worth it once you get into supporting different sizes of images.
In short, you CAN support various resolutions, but it's a lot more work. Consider your audience and make it work for the majority of people.
98% of people have a monitors larger than 1024-wide, so your boss is the odd one out.
See: http://gs.statcounter.com/#resolution-ww-monthly-201106-201206
You can try with media queries.
for example, something like this
#media only screen and (max-width: 1023px) and (min-width: 768px) {
div#container {width: 768px;}
}
Try this links
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://www.danstorm.com/dan-storm-article-css-15.html
You are able to use CSS framework and prototype design called Foundation. You are able to find it at the follwoing URL:
http://foundation.zurb.com/
It will offer flexible and easy ti use design for your web page suitable for many devices and resolutions.
Yes you can do this by scaling your html division(i.e. area covered by HTML tag -whole site) by scale property of CSS.
CSS Provides property named scale which can scale the size(width x height) of any element in the document.
For example,
<div id ="t_div"></div>
Now we can scale the size of the division as follow:
#t_div
{
-moz-transform:scale(1.5,1.5); //for Firefox
}
Above code will increase the size of division by x1.5 .
you can use this property of CSS to scale your website's main Tag(<html>) to adjust size according to screen size.
Link given below describe in very thorough manner about how to apply this scale property dynamically to your site.
Here have a look at this. http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html
Try adding this in the head section : <meta name="viewport" content="width=device-width">