I have about 5 years experience as a webdeveloper. But sometimes I have this question and I couldn't answer it on my self. There are sooo many devices nowadays with different screensolutions either in landscape & portrait and so on.
I still work with the Bootstrap breakpoints (1200px, 1024px, 768px, and for mobile i use 480px max-width) but recently I had some issues with my websites, because the customer is using as example a huawai or some smartphone that is not as popular as the iphone and the website was not optimized for this specific smartphone.
So how can i avoid something like that? Do you have any good tipps for me?
Working for clients with multiple devices requirements could be a bit of a nightmare... What you could do in the future is ask your client to give you an specification of the application you are building and the targeted devices (even to the model).
I use the page below as a reference to build very specific media queries or as general as you want.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/#phone-queries
Hope this helps.
Sometimes you need to make some "fixes" for some devices.
One way to solve this would be to get the user agent:
$_SERVER['HTTP_USER_AGENT'];
after this you could use regex or load them in an array to match the user agent or device:
user agents in array:
$mobile_agents = array('w3c ','acs-','and','so', 'on');
for devices:
$regex_match.= "htc|huawei";
now that the page can detect the user agent, the page also
can give out specific stylesheets/media queries for devices.
This is a simple example in php and you can group devices and user agents as well.
For truly responsive design, avoid using breakpoints to affect the style. There are already too many possibilities, and far more on the way, for anyone to ever get it right.
About the only uses I've found for #media size queries are:
Test aspect ratio to determine whether it is in landscape or portrait mode.
#media (max-aspect-ratio 1/1) { ...
Test physical size to move buttons farther apart on small screens.
#media screen and (max-width: 6in) {
a { line-height: 200%; } /* fat-finger clickables */
input[type=radio] { margin: .5em; }
}
And of course, in all your CSS, remember to never use absolute units and to always use relative units (%, em, vh, vw).
Related
I'm new to responsive css. I've learnt a lot about media queries, but I still have not figured out which is the best way to catch if the user is using a mobile or not.
The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?
When using my android smartphone with Google chrome, the width of the page is about 400px, even thought the real resolution is full hd, 1080px width. Does this depends form the browser, or what? I saw that someone uses the em mesure to set the breakpoint, is this more accurate? I'd like to know about the handheld property more, too.
Finally, after having read lots of different informations, can you please tell me which is the moste effective way, the best media query to catch if the client is mobile or not? Thank you.
The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?
There are a few theories out there on how to handle this. Some people go and find the most popular device widths and set their breakpoints at those places. This is great if you know for certain what most users on your site use. However, the downsides are that you have to mold your design to those widths and you have to continually update your code as new devices come out.
So your breakpoints would be something like:
// iPhone 6
#media only screen and (min-device-width : 375px) {
// styles go here
}
// iPhone 6+
#media only screen and (min-device-width : 414px) {
// styles go here
}
The other theory is to make it fully scalable at any size regardless of what the device is. The upside to this is that you can insure that your design looks great on all devices. The downside is that it makes your code a bit more bloated. the breakpoints here would be wherever you need them. I personally use this method but start with break points at 1200 and go to 1100, 1000, as needed. If I'm going mobile first I'll start with 320, 350, 400, 500, etc...
When using my android smartphone with Google chrome, the width of the
page is about 400px, even thought the real resolution is full hd,
1080px width. Does this depends form the browser, or what?
The device width has many factors to it. But the device width is basically the number of pixels across that the browser is displaying. There's a little more to it than this, but your best bet is to Google device widths.
I saw that someone uses the em mesure to set the breakpoint, is this
more accurate?
Nope. It's just a way of subdividing from a parent element. Until you have more time to research this, stick with pixels.
Finally, after having read lots of different informations, can you
please tell me which is the moste effective way, the best media query
to catch if the client is mobile or not? Thank you.
The best way to do this is to determine your break points. You cannot target mobile browsers specifically using CSS. You can only target the attributes of those browsers (width, height, orientation) so you can know that iPhone6's are 375 pixels across in portrait. So you can target them using that width. As Allan said, you can target devices with Javascript or server side libraries and add classes that way. But IMO it's better to stick with device widths and save those for situations where you're absolutely stuck.
Well, my question is rather short: Is it somehow possible to fake a mobile environment in order to display a preview of a mobile version of a view inside a regular web browser?
I couldn't find anything - but maybe I just can't figure out the right keywords for an effective search. On the other hand it could also be that this is simply not possible.
Please note: I am not talking about a developer console. What I want is to embed a widget onto a life website. The use case is a user who can update information, add images etc. and what I want is to provide a mobile preview to the user.
Alright, I think the best way to do this would be using iframes. But there is something that needs to be taken into consideration. Your media queries cannot be targeting devices so no max-device-width but max-width here is why
Lets say you want to simulate how your website would look like on a phones, your media queries need to look a bit like this
#media only screen and (min-width : 320px) and (max-width: 400px){ {
/*Your rules here*/
}
And your iframe for that media query would need a width of anywhere between 320 and 400 pixels
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 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!
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">