Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I'm looking for someone to steer me in the right direction. I have a functional web page that runs crisply on my 13" MacBook. The issue is viewing the web page at different sizes and how the elements get distorted. What kind of things need to be done to ensure it looks crisp and beautiful on any screen size. Does it require me to use percentages when detailing height and widths of elements or does it require some javascript.
I realize this is broad and all im looking for is someone to steer me towards what should be changed so I can get the site live.
Thanks!
General direction:
You want to check out media queries to make your design responsive to different viewing media. You will want to consider other meta tags such as ones defining the viewport size, but in general you can do it all with CSS.
Here are example queries that can wrap your custom CSS rules for each device size:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
Obviously you will want to fill-in the CSS rules as needed to ensure your content doesn't get scrunched.
A good strategy is to design for small mobile application, then go bigger from there. That way you don't find yourself trying to cram way. too. much. into a small interface.
In general you can also use the float:left; property for your main layout blocks (instead of absolute positioning, etc) That way your sidebar, etc will float above/below your main content when the parent element is too narrow to have both side-by-side.
Also, yes. You can use percentages, etc to fill areas fluidly. Use background- properties instead of <img> tags. Hope that helps.
I guess you may take bootstrap as a refer!
It is responsive, and will display almost the same on different resolution screen!
So try something like this.
and if you want to make your site looks like the same on all screen, try precentage!(but not suggested!)
You will need css3-mediaqueries for responsive designs or fluid designs
We Can assign different stylesheets depending on browser window size.
You must know How to use CSS Media Queries & Using Available Space
Have a go here
What are CSS Media Queries
and how to implement them.
too
I thought of not editing my answer any more, but i have got some good points to change my mind From http://www.webmonkey.com/2011/06/tips-tricks-and-best-practices-for-responsive-design/
Use #media to scale your layout for any screen, but remember that
this alone isn’t really responsive design.
Use liquid layouts that can accommodate any screen size. Don’t
simply design one look for the iPhone/Android, one for tablets and
one for the desktop. Keep it liquid, otherwise what happens when
some new, intermediate screen size suddenly becomes popular?
Roll your own grids based on the specifics of your site’s content.
Canned grid systems will rarely fit the bill. The problem with
canned grids is that they don’t fit your unique content. Create
layouts from the content out, rather than the canvas (or grid) in.
Start small. Start with the smallest size screen and work your way
up, adding #media rules to float elements into the larger windows of
tablet and desktop browsers. Start with a narrow, single-column
layout to handle mobile browsers and then scale up from there rather
than the other way around.
Use the Respond or CSS3 Media Queries JavaScript libraries to
bootstrap #media query support into older browsers that won’t
otherwise know what to do with it. Starting with the smallest screen
and working your way up means it’s the desktop browsers that need to
handle #media, make sure older browsers work by using polyfills like
Respond.
Forget Photoshop, build your comps in the browser. It’s virtually
impossible to mock up liquid layouts in Photoshop, start in the
browser instead.
Scale images using img { max-width: 100%; }. For very large images,
consider using something like Responsive Images to offer the very
smallest screens smaller image downloads and then use JavaScript to
swap in larger images for larger screen.
Embrace lazy loading. There may be items on your site, auxiliary
content that’s nice to have, but not essential. Load that content
using JavaScript after the primary content is done loading.
Forget about perfect. Even with these suggestions you’re still
leaving out users who have old browsers with JavaScript disabled.
Such users are increasingly rare and if they see the mobile layout
on their desktop, guess what, it’s not the end of the world. Your
site is still perfectly usable.
Related
We have a website designed for mobile, and its appearance and operation are awful on desktop. I want to make a change to the CSS or javascript/jquery of the website so that it will be rendered good on the desktop. for example by something like this:
#media only screen and (max-width: 500px) {
body {
width: 500px;
background-image: * ;
}
}
One of the problems to be solved is that the vw's used to make the display responsive for different mobile sizes would be so big on the desktop that would mess everything.
please help thank in advance
Vw or viewport width is a percentage of the screen size. (So 10vw is 10% of the screen's width) Which means that vw always keeps the same size ratio regardless of what screen it is on. If you want to change a certain css element's size when screen width exceeds a certain size in px than add a new media query with a minimum width of a desktop screen. For example 1920px.
You can try search for ideas in bootstrap's classes and methodologies, like using different class modifiers for different screen sizes (col, col-md, col-xl, etc)
As Jalen said, you might want to look into inserting media query and breakpoints at sizes that you find less usable, and optimize those.
From experience, making an existing app reactive (meaning that it can run in both enviroments with a single codebase) can be daunting, but with few changes in css and templates you might be able to achieve it
My Web application is meant to be used on desktop computers and also on computers that are connected to TV screens.
I would like to apply different styling in these two different cases, but simple media queries do not work here: TVs resolutions are even smaller than computer monitors, even though the screen is much bigger.
Is there any way to detect such a scenario and apply proper styling ?
there is a CSS media query to check if the client screen is a tv
#media tv
(instead of #media screen for a classic computer screen).
There is also #media projector.
Suggest to take a look at CSS Units, especially the ones beginning with v, which are relative to the viewport's size...
Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.
I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).
I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.
What i need is a javascript function like this:
if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}
If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks
It would be nice with examples for the html code too.
you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.
you can also use this class Mobile Detect
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// any mobile platform
}
Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.
#media screen, projection and (max-device-width: 800px) {}
#media screen and (max-device-width: 300px) {}
On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.
You can use css media queries to target different screen resolutions. eg:
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad in landscape orientation css */
}
#media only screen and (max-device-width: 480px{
/* iPhone css */
}
More info:
https://mislav.net/2010/04/targeted-css/
https://webdesignerwall.com/tutorials/css3-media-queries
you should try CSS media queries instead
In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.
Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.