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">
Related
I'm not familiar with responsive websites and would like to start creating a website taking all the screens into account.
Obviously media queries is the way to go but they only concern CSS.
In my current project, I would like to organise the page differently according to the width of the page (being completely device agnostic).
The thing is, on small widths, I would like the HTML layout to change completely so I will have to make the HTML "responsive" as well as it should change according to the website width.
How can I achieve that?
Is there any js library (jQuery if possible but not mandatory) that will "serve" another html page according to the width of the page?
The whole website should be build this way so the script should be more than a gadget, it should be rock solid enough to allow the whole website to rely on it.
And, of course, it should work on any device or screen or browser.
Some would say that I'm looking for adaptive techniques more than responsive ones but I believe it's a mix between those two as the elements will still be responsive in general but between some critical breakpoints, it will indeed adapt and change the html.
I read a lot about different techniques but I can't find something that suits my needs.
Any lead would be appreciated.
Thank you for your help.
What you are describing is adaptive delivery. What you want to to is detect the user agent string using a server side language, and then conditionally render your templates according to whether the device is a phone, tablet, or desktop. Realistically, you'll share a lot of code between the screens, but you might have a different navigation layout, or opt to not show more rich features on the smaller screens. This approach not only saves a bunch of hide/show code, but saves a lot of overhead on smaller screens where you would otherwise be loading stuff that would be hidden the entire time anyway.
You can do a lot with CSS and media queries to alter your page layout ("completly") depending on device and screen width. If I were you I would dig a little deeper through the possibilities these techniques can offer.
If you are positive this is not enough. I would look into Redirects and User-Agent Detection to redirect your users to a different page depending on the user-agent.
If you are looking for a full framework that can handle both what you need (redirecting and dynamic content depending on user-agent or width) and a whole lot more, you should look into AngularJS.
You CAN of course do some DOM manipulation with pure JS depending on your criteria, but as your project gets bigger you might be in for a world of hurt.
Is it possible you could use an existing CSS framework such as Bootstrap to achieve a responsive design across your various target browser widths and device types?
Bootstrap in particular will let you specify different layouts depending on the device width where the page is being rendered. More information here - adjust your browser width to see it in action.
If, after evaluating an existing framework, you're still determined to develop your own you can perhaps at least use the techniques in Bootstrap or another framework as a starting point for your own.
try Bootstrap
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
I do not know if it is sufficient to your project, but you can to some extent use CSS to control what markup you would like to show or hide on smaller or larger devices. For example:
<div class="mobile-only">
<p>This content will only be visible on small screens such as mobile devices</p>
</div>
<div class="tablet-up">
<p>This content will only be visible in tablet and larger devices</p>
</div>
/* media query for small screens, such as mobile devices */
#media screen and (max-width: 767px) {
.tablet-up {
display: none !important;
}
}
/* media query for tablet and larger devices*/
#media screen and (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
But be sure that you do not use this technique if you have a really big project, you might be ending up choking performance.
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 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!
Im looking for some options regarding scaling some HTML elements for use on a large screen (like a kiosk). I'm currently using CSS3 scale() to get a relatively cross-browser scale (thanks to cssplease), but seeing if anyone else has any better suggestion.
Primarily, I'm looking at rendering widgets (HTML, js, and images) on a large scale (from 400x200px to 800x500 for example). While I could rewrite each widget for a larger scale, I thought I'd check my options.
Is there something that SVG can do, or canvas? CSS3 scale() is okay, but images need to be replaced with high-res versions. Text spacing seems to also be slightly off.
Thanks!
CSS3 Transforms are still the best option for what I want, especially for browser performance.
Not sure if Understood you right, but if you need your website, images, videos etc to look good on any screen (with any resolution) you could try to go for responsive design. You have option of using css media queries to adjust website for different screen resolutions, it will also maintain original image quality etc.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
I found them very help full and once you get into it you would easily build scalable websites ;))
This may be an extensive retrofit but you might be able to define your elements' dimensions using ems then use media queries to increase the base font size for different screen sizes. So if your base font size is 16px, you main column might be 47em, sidebar 12em, for an approximate site width of 1000px. You could then use media queries to detect a larger browser and all you need to do is increase the base font size to 20px and viola your site is now 25% bigger.
I am creating a website and would like to get the opinion of some of the more experienced web developers.
How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?
With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.
For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.
What do more experienced web developers do in regards to screen resolution differences?
It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.
If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.
It depends entirely on your design goals.
Most designers use fixed-width areas and let it center on the screen.
In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).
You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.
SVG graphics can be used to provide scalable images that look good at any resolution.
Some companies provide an entirely separate site for mobile users.
There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.
I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.