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.
Related
I used Bootstrap for groundwork to develop the site to be responsive. The problem i have encountered is that when I try to watch to watch a site on mobile or tablet device the site wont response to the screen resolution. But when I try the Responsive Design View on Mozilla it all works fine. They order of included css files is Bootstrap, then my custom css and some custom query css which I used to tweak some content things.
Do you have the following within your head of your page?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If the above does not work can you please paste some code from your page for us to see what the issue could be? Thanks.
Been trying to debug this for a couple of hours. I've been asked to fix a "responsive" website that is really buggy. I can't share the actual code b/c it's all on localhost on a secured network. Hoping you might see something have a light bulb go off from my description here.
Problem, we have #media (max-width:800px) and it stops affecting page elements around 600px wide.
Another example, i set html{ max-width:1200px} but to make the browser actually fit my 1200 pixel browser window I had to set it to 2250px.
My question is, does this ring any bells for anyone? I'm going through all the CSS and don't see any thing that immediately looks like the issue. These guys really broke responsive design.. bleh
Thanks..
EDIT
here's the meta tags that apply
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
... bunch of junk...
<meta name="viewport" content="width=device-width, initial-scale=1"> (again)
With some help, I was able to resolve the issue.
Issue was related to pixel-ratio declaration but not in CSS, in minified Javascript...
Eliminating this unnecessary js made the page load as expected.
Core lesson: use javascript for functionality and CSS for design and layout.
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 have used twitter bootstrap in my project with DotNetNuke. I did my designing and layout using HTML, CSS, bootstrap. The responsive design was working fine when I tested it on different mobile devices and even if when I resize my browser window.
As it was working well, I converted the design to DotNetNuke Skin. Now, the responsive design works fine only when I resize the browser window and not on mobile devices. I understand the flow in which DNN loads stylesheets and I have followed it. I have made my skin.css as a combination of bootstrap.css and followed by the content of bootstrap-responsive.css
I am not able to find the problem as if I use the same skin.css with my html, it works fine but it doesn't work with DNN (on mobile devices).
You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure responsive CSS(responsive.css) is included after basic not before.
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