I've been doing a lot of Googling on this topic and I havent been able to find anything helpful.
I've been given the task of creating a mobile website based on designs that my design team came up with. One of the features they came up with is to have different versions of images based on the orientation of your device. So for each image that they want to do this with you have two versions:
image1Portrait.jpg
image1Landscape.jpg
I was thinking of combining the two images into one image that would essentially be Sprite-esk. When the onorientationchange event fires, I'd change the css and the image would essentially move over and display the correct version.
My other option is to simply swap out the source of the image for the landscape version. I am not in favor of this though as you will have to wait for it to download.
My question is this: Is there any best practice for doing this sort of thing? Like I said, I've been Googling, but I havent found anything helpful.
Media queries are what you need for this:
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Related
Web page responsiveness with APPLE devices
i have various web pages ,that are responsive using various media queries that are working for various and operating system except apple devices and os(ios,ipad,iphone)
Now my pages are not responsive with apple devices.I have used
but still it is not working.please suggest me some way.
There is actually no difference in regards to the responsiveness on different platforms. It doesen't matter which browser (e.g. Safari on Apple devices) you use. Unless it's an antiquated version of Safari.
Maybe you have coded your media query wrong? Here is an Example how one should look like:
#media all and (max-width: 1200px) {
/* your css here */
}
In this example your css will take effect when the browser window is less than 1200px wide.
Hopefully this helped you a little bit.
I am not good at responsive stuff, i designed my site for high resulation , so when i try to use it low resulation its looks bad, i fixed it for google chrome with:
body {
zoom: 80%;
}
But still looks bad for ie and mozilla , i try "transform" and "scale" stuff but they didnt work out, they zoom out like you zooming picture, they didnt reflow pages.. I need something that works like browser zoom property.
Thank You
There are several ways to accommodate Mobile/Tablet devices with your website.
FIXED DESIGN
Create a stylesheet that works generically across all formats. Your site will appear the same on all devices but this process will be the simplest solution.
The fixed design process should primarily use percentages and max-widths to create content that changes based on the device width.
PROS
When used well this process uses least resources and is faster to create and modify.
CONS
If your site has large amounts of content on a page then your site can become very cramped on smaller devices
RESPONSIVE DESIGN
If you want your site to be viewed differently and arguably optimally on different devices then you need a responsive design. This can be achieve by using a dynamic stylesheet or by using multiple stylesheets for different devices.
PROS
A very versatile website that can be display uniquely and optimally based on the viewing device.
CONS
Larger or additional resources and marginally longer loading depending on design. Longer development and modification times.
CREATING RESPONSIVE CASCADING STYLESHEETS
It is no longer practical to use set width becuase there are simple to many varible sizes.
The answer is flexible everything.
Using a viewport metatag as in your example to target the device
that is accessing your website.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites.
Using media queries.
Media Queries let you write individual rules for specific screen widths.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
Using Javascript.
A good javascript solution other than bootstrap is jquery mobile which takes away the time and effort of designing a responsive site by doing the work for you.
You do not need to know or edit any javascript to use it.
I am coding HTML newsletter, I have to code one file that once sent it detects device if it's smartphone or PC. If PC it shows 600px width and for smartphones it shows 300px width.
So how should I set the width property so that it looks as per the width mentioned above.
You are looking for CSS Media Queries, here is a basic solution that may suit your needs:
/* ALL (Fallback), this will be used by browsers that don't support CSS Media Queries */
#container{width:300px;}
/* Screen more than 600px in width */
#media only screen and (min-width: 600px){
#container{width:600px;}
}
/* Screen less than 600px in width */
#media only screen and (max-width: 599px) {
#container{width:300px;}
}
More examples here: https://github.com/dhgamache/Skeleton/blob/master/stylesheets/skeleton.css#L79
It is very bad practice to use width % because if there are images within the page these will not be effected by this in most browsers. There is no proper way to code an EDM for both mobile devices and computers yet. Email clients and web services are just not up to par for this.
In my opinion, if you want to make it user friendly for both devices then you should be creating content fields similar to that if the windows 8 interface so that it will still look good on the computer and will have a decent look on a mobile device.
So lets take a look at what mobile devices support Media Queries. It is a HUGE hit and miss in this area.
Supported:
Android Mail (very buggy), Iphone mail and Ipad mail (>=320px <= 480px).
This does come with the risk of not having many elements displaying correctly still because it is relatively new still.
Not Supported
Android Gmail, Iphone Gmail, Ipad Gmail and Blackberry 8000
The only real option to go with for EDM's is to keep them static meaning you should never try and make it fluid. EDM's basically have a set amount of info in them and images then get sent so there is no need for the widths/heights to be fluid. Doing this only runs the rist of something breaking in another browser or email client.
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}
I have had a look around but need a more concise answer to this question.
I'm trying to workout the best way to construct the CSS in my current project for multiple media devices. I want to be able to have a stylesheet for:
CSS resets (everything to use)
The normal desktop 'screen'. (only desktop computers)
Printing 'print' (only printing)
The iPhone/handheld (only handheld)
IE6 stylesheet (only IE6)
So my question is: Am I right to think the right way to control this would be..
set the media="all" for the resets.css
set the media="screen" for the
desktop.css
use conditional comments 'here' for
legacy browsers.
set the media="print" for printing.css
use css3 media queries such as :
#media only screen and
(min-device-width: 320px) and
(max-device-width: 480px){ }
has anyone got a little more experience setting up multiple device css that could share their methods? how do you organize this yourself?
It can depend on several factors not the least of which is how your designs flows. This is a great article on designing from mobile up:
http://stuffandnonsense.co.uk/projects/320andup/
You can learn a lot just by looking at how these guys developed their boilerplate.
And, to see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.