So I am making this personal website that has very litte content, and if I use the standard 960px width, there are very wide white spaces. It would be nice to have a shorter width, but then other problems arise such as bad view on other resolutions. What would you suggest?
To suit any screen resolution and make your website look good in any size, I would recommend going for a responsive design, using Media Queries. You can read up on the topic here.
That way, you can use 960px width for visitors with a browser window larger than that, and then make the website resize gracefully for visitors using mobile devices etc.
However, don't get too hung up on 960px width, that is no standard but simply a format that often works well, since 960 is a number that is easy do divide (to make columns) and is a width that is below the still quite common 1024px resolution.
You can try media queries, something like this
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) href="shetland.css" />
You should start thinking of building Responsive websites using CSS3 Media Queries.
I recommend the Skeleton CSS Framework (link), pretty easy and lightweight.
Its depends on your webpage. And there are some standards for dimensions.
Check this: http://www.hobo-web.co.uk/best-screen-size/
use "position=relative"
for every layer!!! this will eliminate your problem with width modifica
Related
Good day everybody! I am currently working on a web app, and I am using media-queries, in aims to support mobile and desktop.
I have tried to use max-width: 414px as my first break-point, to work on the current iPhones and other phones with smaller screen sizes. However, even after rereading various forum posts, responsive web design tutorials, and web documentations, to no luck, it wouldn't work the way I need it to.
See here that whenever I use max-width, even on screen sizes of 414px, or lower (I have tried), it really wouldn't work. The styles wouldn't apply.
Now, when I would use, min-width, it does work, however, I've read it's better RWD practice to use max-width for better functionality.
What are your suggestions? Thank you!
So I think your problem is that you are in zoom mode (like 2x or 3x). If you are in Safari responsive mode, please remember to go to use View > Actual Size , make sure it's not zoomed in in any way, as this will surely affect the media query used. Have a good day!
I have designed a website. When I opened the final website in different PCs which have different resolutions my webpage is not the same I designed. The contents are out of body position.
Could any one explain the reason?
And any solution?
This is an issue many developers are facing.
The problem is that my screen (or even your screen if you resize the window) will make the page look different, if you use px to control the position of all your divs.
I would suggest you learn a little about CSS and how to use it (including using units other than pixels).
It is handy to know when to use auto, %, px and other things that you need to know to make your webiste look the same across as many devices as possible.
W3 has a good Responsive Web Design - Introduction that you might want to check out.
Ultimately it teaches you what a responsive design is:
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
The topics the introduction covers include:
Intro
Viewport
Grid View
Media Queries
Images
Videos
Frameworks
Good luck! Hope your project goes well!
Use px units so that it does'nt change the size of the image and add the following code to head tag before the body tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)
Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.
I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?
I feel like I'm missing a very obvious trick!
How it should work when adopted into the CSS standards:
Use #media queries in CSS, along with the #viewport CSS tag, instead of the meta viewport tag. There's a good explanation of how to do this here:
http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/
An example from the above link:
#media (max-width: 699px) and (min-width: 520px) {
#viewport {
width: 640px;
}
}
You could use this to set different viewports on narrower and wider devices.
But for now, seems JavaScript is the only way to do it:
You can listen to the onResize event and check the width of the screen, and then adjust the viewport meta tag in the DOM accordingly.
See http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript
Use media queries for different sized screens, ie: small(phones), medium(tablets), and desktop versions. You will only change the content thay needs changed in the queries. Then also set a meta tag with the viewport set at 1.0. Search around for media queries, there's a lot of information of there. Good luck!
I'm designing a Website for Desktop and iPad. The same website will be used for iPad and Desktop PCs.
Site's design width is 1024px and in iPad Portrait mode it will be 768px. My questions is what things I should consider while making Design and writing CSS so writing specific css for Portrait mode should not be needed
I want to make flexible layout for both orientation without using media queries.
You are going to have to use relative width's for everything - think percentages and em's.
Without media queries, it's going to be impossible to serve up different layouts for orientations - however if your design and code is flexible (using relative widths), your design will expand and contract based on the available screen width.
The biggest design concern, in my opinion, would be what the site looks like at 768px wide vs 1024px wide; are the line lengths too long? How will images stretch/contract? Will a font size at 768px be legible at 1024?
The font size will adjust automatically based on the em you set it to, which is a nice thing so you won't have to worry about it.
I am a rookie learning to develop web sites. To this point I have been just making pages without any regard of screen resolutions. As I have been doing some research I see that everyone says to stay around 900 pixels wide.
With the size of monitors and screens today that seemed a little small. Am I making too much of this or should I be adhering to some type of screen resolution rules or nothing at all?
If you're only planning on desktop users viewing your site, 900 pixels could be a little small and you could, easily, go for a screen resolution of 1024 pixels x 768 pixels, or greater with no, or minimal, consequence.
On the other hand, if you're planning on your sites being usable to those surfing on a nettop, or a mobile phone, however, they may require a great deal of scrolling. Which is irritating at the best of times.
That said, you can take advantage of things like #media queries to serve different stylesheets to your users based on their screen size, so a desktop user with an Eyefinity > 3000 pixels display will get a different look to a user surfing via iPhone.
As an example:
<link rel="stylesheet" href="ridiculousDesktopScreen.css" media="only screen and (max-device width:3000)"/>
<link rel="stylesheet" href="largerDesktopScreen.css" media="only screen and (max-device width:1280)"/>
<link rel="stylesheet" href="normalDesktopScreen.css" media="only screen and (max-device width:1024px)"/>
<link rel="stylesheet" href="mobileStylesheet.css" media="only screen and (max-device width:480px)"/>
And then use each of these stylesheets to serve whichever is likely, based on screen size, to give the best view to the user.
Personally I'm a fan of the fixed-width-centred layout, which allows ease of designing and allows a certain liquidity. The benefits to this approach, for me, are that long-lines of text are difficult to read (and presumably why A List Apart a variation of that approach in its articles).
I think that if you design a site to be useful to yourself with the window maximised and then at different sizes, you should end up with something that looks good at most. But remember that as screen size gets larger, handling white-space properly becomes a necessity.
It's worth noting that, when you design for a particular horizontal resolution, you do have to take into account the browser's chrome (things like screen borders and scroll-bars. I think that's usually about 40 pixels for the scroll bar, if I remember correctly). This seems to have been the onus behind 960 Grid's use of 960 horizontal pixels, not only is it divisible into columns, but it also allows for the (average) user's browser to have a scroll-bar without causing an overflow and a horizontal scroll-bar as well.
I do work for many media agencies and they prefer the rule of thirds in their designs so they tend to stick with the 960 pixels grid system. You can read more in Optimal width for 1024 pixels resolution?.
It flows better and allows for late adopters to see your full site without scrolling.. That said, what is your target and what are the usage stats for that group?
http://www.w3schools.com/browsers/browsers_display.asp
Absolutely not.
The whole idea of a windowing system is to have several windows visible at the same time. If your website requires more than half of my screen, I won't bother with it.