I am designing horizontal website with 1024*768 resolution ,but when i changed the my computer resolution to 1600*900 that time website layout shows the some part of second page on a screen . what to do solve this ?
You have a few main options.
Completely disable the website using Javascript to detect screen resolution and redirecting if they have the incorrect resolution (something I would not recommend).
Dynamically size everything so that everything scales based on the resolution.
Pad out the extra space with a plain background colour and center the 1024 x 768 area. (Note this will not work for people with smaller screen res than your fixed layout size)
There are of course other options but I would consider these three. It depends though what it is you are trying to achieve.
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 formatting my Django web application using Twitter Bootstrap, but things start getting weird when I resize the browser.
Ideally, I would like to keep the same format regardless of browser size, and if they go too small, than just a horizontal scroll is introduced:
If the screen resolution is 1024x768, I want the site to look good (using the full width of the screen, no warping or adjustments of image files, no horizontal scroll). If the display is wider than 1024px, there are blank space on either size. If narrower than 1024px, a horizontal scroll is introduced.
I was wondering what the best way to go about this is. Is there a way with Twitter Bootstrap? I was also thinking of putting everything into a border-less table with defined widths and centering the table on the screen? Hoping then things inside the table wouldn't resize down.
I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen.
So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width in css and have zoomed in/out as needed by device itself?
I apologize if the question is too generic, will explain details if needed.
EDIT:
So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for widths, fonts sizes etc is that right?
If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.
Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.
So I tried to set <meta name="viewport" content="width=640"> and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.
I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).
Would love to know your thoughts and I appreciate all the answers so far.
This is called Responsive Web Design when a website adjusts according to screen size...
You can make this kind of responsive website easily through CSS3 Media Queries:
How to write CSS Media Queries for common types of devices
Responsive Web Design: What It is and How to Use It
If you google for Responsive Web Design you will find lots more information on this topic. It's really an amazing method to make your website look great on all devices from small to large screens.
We have a series of tutorials on creating web pages using responsive web design. If you want a quick introduction to it checkout Introduction: Creating a Responsive Web Design, it lists common mobile phone and tablet sizes, so it might lead you to the answer you need. You can find the link to our tutorial series in the article. The solutions provided use Bootstrap in order to provide easy to create pages. And it also provides free samples of responsive web design pages.
I hope this helps to provide the answer that you need, if not, then please let us know if we can provide any further assistance.
Regards,
Arnel C.
InMotion Hosting Community Support Team
Specify the width in percentage say width=100%,which automatically adjusts the width with the screen.
I am sure you have all come across this before but I just wondered if there were any new techniques out there.
I have been making a design for a client and they want everything 'above the fold' basically so that the pages fill the screen without scroll bars. I have explained that people look at web pages in browsers at different sizes and resolutions of different sizes etc etc, but this is what they want.
So I made a design that fit the viewport of Firefox at 1280 by 1024 which is the most common size.
Inevitable the client is now moaning that when they view this on their laptop screen 'the bottom gets cut off' so I change the design to fit 16x9, but then 'theres too much space at the bottom on the desktop now'...
I then stupidly showed them the ctrl+ zoom on Firefox, and they said, 'Thats exactly what I want, I dont want the layout or proportions on the site or text to change, I just want the whole thing to scale as it is to fill up the space'
I told them that I didn't think that was gonna happen, but I just thought I'd ask the community if they had any new answers to this unfortunately common request?
I think you're looking for a liquid layout
I've been told to look into using a framework like Blueprint or 960 for my CSS.
What I don't understand is how it makes a site look consisent even if two users have different screen resolutions.
How does that work?
They specify sizes using units that are not relative to the window size. So if the user has a wide window there is a gutter and if a narrow window, a horizontal scrollbar.
Resolution is irrelevant except as a limiting factor on the user's maximum window size.