While searching for an easy way to make my menu (http://www.ck-game.com/newIndex.html) fit screen size I stumbled over the possibility of using the browser's zoom functionalities (zoom, moz-zoom, etc.). I could imagine that it's much easier than using "em", "%" and media queries to make an elastic layout, more so because I have background-images which need to keep aspect ratio. Is there anything that speaks against using it besides someone wanting to actually zoom in/out and then the menu would adjust to it?
EDIT:
Proof of concept: http://www.ck-game.com/newIndex.html
Please try with different viewports and see how well it adapts :) Tested in IE9, latest FF and latest Chrome. Works on Android devices, breaks on most iOS devices.
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'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I'm a graphic designer, I have a small question, Ive learnt some of css and completed the HTML tutorial package over the internet multi time, so I have a good base of html-css coding at least, I do want to start converting PSD webdesigns into HTML-CSS, I've seen many tutorials step by step guides etc.. and they were helpful for sure but I'm afraid of many points:
The flexible point of the website, which means the following: my monitor is currently 1920x1080, let's say that I will code the website to fit on my screen and someone with a small / big screen than mine would open the site, will he see the objects moved from its original place? because defining by px is measured to fit to the user's monitor as far as I know.
Ensuring that the site will be working on at least 3 browsers plus, I know that every browser has its own css base reader and its very hard to set the website to fit all browsers especially internet explorer.
So, I don't want a special help to be honest, all I need is some points / well-guided tutorials to follow to ensure that the points I've reviewed being at least 50% solved..
What you are talking about is Responsive Web Design. Literally just search it up on the internet and you'll find tons of resources and blogs.
My tips are:
For testing multiple browsers download all of them (Chrome, Firefox, Opera, IE) and when you save your work (do this all the time) open it in all browsers so you know where your errors are coming from
Use the developer tools on your browsers. Chrome and Firefox have very good developer tools and help me figure our my problems. You can also use it to emulate mobile browsers and show your media queries (explained later).
Use em instead of px. pixels may look nice on your screen, but if the users screen is small they may find it hard to read your text. here is a good px to em converter http://pxtoem.com/
Use percentages. For example you can make your content div have width of 80% so that you have some space on both sides of your screen (like the design of stackoverflow). This means that your content will fit on most desktops well. Another example is a navbar, you can make it 100% wide so that it always fits the screen no matter the desktop.
Then we have media queries. These allows us to change the content based on the size of the screen. For example you can hide the navbar using a media query when a mobile user is viewing your website. Here is onc elink about media queries:http://cssmediaqueries.com/what-are-css-media-queries.html
Some people still develop for IE8 but it is a pain in the ass. You need to decide whether your audience will be using IE8. I'm guessing as a graphics designer you're going to be making a graphics blog, meaning that your audience will probably be using up to date browsers. So have a think if you really need to develop for older browsers.
As for the first point: there are some ready css frameworks, with responsive elements included. The most popular, I suppose, is Twitter Bootstrap. It has a grid system to help you make your html blocks change their width and even get hidden depending on the viewport width.
If you want to understand the techniques, you can study how media queries work.
As about cross browser stuff: you will have to test your pages in all browsers you want to support. That's the rule. On your way, this link can be useful.
The flexible point of the website, which means the following: my
monitor is currently 1920x1080, let's say that I will code the website
to fit on my screen and someone with a small / big screen than mine
would open the site, will he see the objects moved from its original
place?
The general way to get around this is to build a centered window, thus:
<html>
<div id="container">
<!-- your design lives here -->
</div>
</html>
#container
{
width:728px;
margin: auto 0;
}
Your design is now set at 728px which should fit most resolutions. You can have graphics that expand beyond this, see the bar at the top of SO, but your content should live inside this container.
Another potential solution to this is to allow you design to be completely flexible and contain all your elements in divs that float about, see Masonry for an example of a tool that helps with this.
Ensuring that the site will be working on at least 3 browsers plus, I
know that every browser has its own css base reader and its very hard
to set the website to fit all browsers especially internet explorer.
This is a bain of every web designers life. There is no substitute for good testing here. Something that will help is a CSS rest script like this one. This will remove some of the inconsistencies across browsers. But really you just need to, test and test again.
I want to learn some basics in website development so that I can control the look and design of my site.
My website developer says that a full screen header with a gradient left to right won't work because screen size differs from 1920 down to 420 for mobile phones. My website is being optimised for browsing on mobile phones. Is there a way around this?
I have an image of what I am referring to. How do I post it for users to see here? (My website is a customised Magenta Go website.)
The question is not extremely clear, but it's possible that what you're looking for are CSS3 Media Queries and "responsive design".
I really recommend looking at how Twitter Bootstrap is doing it: http://twitter.github.io/bootstrap/scaffolding.html#responsive
Basically, you modify your CSS for different screen widths, possibly in your case providing different gradients for each case. And screen categories defined by Twitter Bootstrap in the aforementioned documentation seem pretty reasonable for most cases.
A general way to get a horizontal gradient to work on both large screens and mobiles is using CSS gradients, like this example. You can find an indication of browsers that support CSS gradients on the Can I Use website.
I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?
Re replies:
Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?
Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.
Two basic approaches off the top of my head:
Resize your browser to be the width of your minumum supported desktop/browser size.
Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.
The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.
Don't maximize your browser window? Just shrink it horizontally a bit?
But any website that has such a high dependence on the shape of your display is poorly designed. It should fit to any size display that's bigger than some minimum (no use spending extra effort to make it fit on a 100x100 pixel screen)
If you use IE's Developer Tools, you can resize the window to see what it would look like at different resolutions.
Check it out in:
Tools > Developer Tools > Tools menu > Resize.
You will also want to make sure you are testing your website on other browser / OS combinations at the very least.