What should i do so that my website fits properly for different screens.. for example 32" 24" 17" monitors as well as for mobile device(netbooks etc.) with 9" - 11" screens and mobile phones that have anywhere between 2.5" - 5" screen?
How should i design the layout of my homepage/template etc. What should i keep in mind... what would i require for this css, javascript or server languages to read the type of device?
Any other recommendations you'd like to suggest to make the site accessible and usable for various types of devices.
Thanks in advance for all your help.
there no need to write js you can did it simply with CSS. In meta we define that the website adjust according the viewport of the device & also if you want to change in design then write different css for the things which you want to change for example:
for mobile device
<meta name="viewport" content = "user-scalable=no, width=device-width" />'
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;
for window resize
<link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;
<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
type="text/css" />;
For more information must saw these link's http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
Nothing personal sandeep, but most of the answers to mobile web design questions here are only targeting iPhone or Android. Mobile internet is not just iPhone or Android. There are many devices (in fact more than iPhone and Android put together) that doesn't understand view-port or media queries and active on the mobile internet
If you want to be accessible as many devices as possible.
design light weight pages
do not use horizontal layouts. such as 2-3 boxes next to each other.
make everything vertical so they would fit on small screens
do not use heavy java-script, avoid it as much as possible
do not use too many graphics
avoid using min-width and/or max-witdh in your css
Related
I'm trying to find out if it will be a better use of my time (now and in the long-run) to make a separate style sheet for my mobile site (which will look drastically different, but use the same database information and elements), or , make a whole new mobile page and steal what I need from my desktop site.
Does anyone have an advise or know what most developers practice when it comes to mobile sites?
you can use media queries.
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />
Or in css3
http://www.w3.org/TR/css3-mediaqueries/
A lot of sites these days are concentrating on mobile first, then porting to a full web app for desktops. More and more peyote are using their mobiles to browse the web and a site designed for mobile will generally support desktops better than a desktop site will support mobile browsers.
I read about device.is at HTML5 rocks here: http://www.html5rocks.com/en/mobile/cross-device/
There's a lot of controversy in that. I personally prefer media queries. and it they aren't TOO complex, I put them right in my css file using #media FOO and ( max-size: ### ) { /*stuff*/ }
A "mobile website" usually like m.domain.com, is usually a very stripped down version. containing some products, info, and a way to contact.
Why would you hide the rest of your valuable site info just because someone is on a smaller device? the load time can be a bit longer since there is more content, just make sure you super important stuff is above the fold. (or at least higher up in the draw order)
You can also very easily include click to call and click for map buttons that appear at a certain size using media queries.
I am trying to make this site more responsive and have started by making all the attributes in responsive terms such as % and ems, but for some reason it isn't as responsive as I would like. I decided to use media queries to make up for the design flaws.
I've been reading Responsive Web Design by Ethan Marcotte and it helps a lot with most of the design, but the media queries don't seem to be working for my iPad or iPod (aka I'm doing something wrong).
Can anyone readily identify what it is that I'm doing wrong?
http://thelglymovement.com/
I would have to see your code to be completely sure, but from what I can see when I pull up your website, the stylesheet imports below are not actually finding the files from your project folder:
<link rel="stylesheet" href="styles/base.css"/>
<link rel="stylesheet" href="styles/skeleton.css"/>
<link rel="stylesheet" href="styles/layout.css"/>
the only file that seems to be loaded is
<link rel="stylesheet" href="styles/index.css" />
and it does not include any media queries.
When I resize the website in Google Chrome I am not seeing any responsive changes which makes sense because 3 of your style sheets aren't present.
If it seems to be working in your desktop browsers, but the media queries aren't working on mobile I would might take a guess you don't have the viewport meta tag. i.e. <meta name="viewport" content="width=device-width, initial-scale=1">
This makes sure that the mobile devices don't try to scale your webpage down to fit their device size, instead allowing you to determine widths in your CSS (and media queries). This MDN article on the viewport meta tag might be useful for more info.
I have two style sheets for one page.
<link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" />
<link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" />
I am testing on android and Iphone, and both seem to be picking up the "screen" style.
Is it better to use #media in one style sheet instead of using alternate sheets or am I doing something wrong.
I have checked the link and server directories to make sure the files existed and where linked properly.
iPhone's Mobile Safari doesn't consider itself of the "handheld" media type.
iOS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iOS.
Source.
Instead, use media queries.
You have to load the handheld style AFTER your standard style. Otherwise everything from your mobile design will be overwritten.
I have one webpage that I want to pull different stylesheets for print, mobile, screen, etc.
I have screen and print working perfectly. I have two different stylesheets for mobile - one for modern smartphones (iPhone/Android), one for Blackberries. They're called mobile.css and blackberry.css respectively.
How can I simply have my page load the mobile stylesheet when iPhone/Android accesses the page, and the blackberry stylesheet when most Blackberries load the page?
Using max-width: 480px will work, but it will also force the mobile stylesheet upon a Blackberry (whose screen is also 480px wide), which is undesired behavior.
Any help?
For Printing:
<link rel="stylesheet" href="print.css" media="print">
For targetting the Blackberry specifically, you may have to do some User-Agent sniffing.
Does anyone know a way to have specific CSS style sheets based on the type of Mobile Device? I have been researching it a few days now and haven't found anything except this snippet of code for iPhones.
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
This works great for iPhones, but on all other mobile devices (android, blackberry, Nokia), it's still displaying the same as my site. I tried:
<link media="handheld" href="iPhone.css" type="text/css" rel="stylesheet" />
but that didn't seem to have any effect on the other mobile devices. So I'm not sure how to reach the blackberry's/androids/nokia's without effect the code of my actual site.
I'm building my site using the PHP framework CodeIgniter and I looked into this code which is suppose to be able to tell if it is being looked at through a mobile device or browser.
if ($this->agent->is_browser())
{
$agent = $this->agent->browser().' '.$this->agent->version();
}
elseif ($this->agent->is_mobile())
{
$agent = $this->agent->mobile();
}
else
{
$agent = 'Unidentified User Agent';
}
The only problem is that the newer phones we are building on render the site as a browser and not as a mobile (I think, I've only tested the iphone because it's all I have at the moment). So does anyone have any work arounds for the other phone platforms?
A List Apart have a great article on their Web site all about mobile stylesheets. I hope it helps.
Interfacing with WFURL is supposed to be the usual practice for finding out the screen size and selecting the correct style sheet.