What is the best way to render a mobile website should I include a media type (such as media=“handheld”) to use an entirely new css file or should I use JavaScript/PHP to test which type of browser is visiting the site.
A few things to be cleared up.
A mobile website means a different content, a different style, a variant for a website. An entirely different CSS means the same content, one single variant, just presented in a different way.
<hr>
Media types and browser sniffing may or may not be part of the answer. Browser sniffing in particular is surrounded by a lot of controversy.
One thing that has been quite successful was building a mobile site version, like m.sitepoint.com, i.e. a whole different content and a whole different set of resources: images, CSS etcetera.
Another thing that is quite successful is not building a different version for mobile, i.e. not a mobile website, but building a responsive design for the same content. Which means a unified CSS file, not a new CSS file for mobile, a new for tablet, a new CSS file for desktop.
And more recently, efforts are put towards combining the two concepts: the same basic content, yet some resources, such as images, be served in different flavors, but not for mobile and desktop, but for high bandwidth and low bandwidth.
Most of the times, a completely different mobile website is not needed. You just build a responsive design, based on media queries.
You can do that by gathering the common style rules in a base section in your unified CSS file, and then by adding different @media sections to slightly adjust things when needed.
What remains true, is the question about the other resources, like images, and whether you have to offer a low bandwidth version to that regard.
well the majority of my site is fluid yet it still appears small on my mobile phone. That is why I need some tips to improve its look on smaller devices.
Responsive webdesign is the way. Media queries are the technical means to follow that path.
Put simply, you’d just drop columns going down the display size:
screen.css
------------
[...]
@media screen and (max-width: 800px) {
#sidebar {
float: none;
}
}
[...]
what is the difference between responsive and and a fluid layout then?
Responsive is the dynamic part that was missing from CSS side, but was found on HTML side.
Fluid relies on floats dropping, sometime, somewhere, but fluid can’t float/unfloat on command, for example. By the time they “unfloat” your design already looks squashed.
Responsive can unfloat, based on what a media query returns. A media query for which you are responsible, that you command, under very precise circumstances.
Fluid can’t change font size if screen size is bellow or above a certain dimension. Responsive can dynamically make font size bigger for big screens and smaller for normal screens.
Fluid will cram all the stuff in the screen (zooming it down), as is, while responsive allows you to completely rearrange the stuff and thus present it at 100% normal size.
You won’t pray and hope a float will drop to the next line, like with fluid, with responsive you will decide the exact circumstances when a float drops to the next line.
Which will make the whole stuff bigger, at 100% zoom by default, not zoomed down, like for fluid. Which is what you’re complaining of.
Fluid means breathing for your life in a limited space. Responsive means jumping and running free.
it sounds great and i want my page to run free so are there any tips and tricks to achieve this with my current site ?
Some mobiles ignore that anyway, so it’s pretty much useless now.
Of curse, but for specific advice that applies to you we’d need to see the site in question.
The site is www.webapp-testing.com I am hopeful to have a decent menu and the center content always fully visible on any mobile device
The responsive vs a separate mobile website is still being established as there are pros and cons to both. This will probably be argued for the next 3-5 years too as the mobile market is still young.
It looks like this site is designed purely for mobiles anyway, so you don’t really need to worry about media queries and so on. Just basically get the styling you want and you’re done.
It seems like you’re using jQuery mobile to build a mobile version for http://www.outlish.com/.
The design for http://www.outlish.com/ it’s Wordpress-based and it’s mostly a fixed one. You have a min-width 960px and a max-width of 1195px.
I’d recommend you a responsive theme design for Wordpress: http://wp-themes.com/responsive/?TB_iframe=true&width=600&height=400
There is no responsive design versus mobile websites. It’s apples and oranges. Responsive it’s purely style, mobile websites it’s content.
Even if you opt in for a mobile website, you’d make sure it has a responsive design since mobile nowadays goes from 320px to 1024px.
But mobile websites are no longer enticing. It’s high bandwidth versus low bandwidth, with each being responsive.
[QUOTE=itmitică;5152555]There is no responsive design versus mobile websites. It’s apples and oranges. Responsive it’s purely style, mobile websites it’s content.
Even if you opt in for a mobile website, you’d make sure it has a responsive design since mobile nowadays goes from 320px to 1024px.
But mobile websites are no longer enticing. It’s high bandwidth versus low bandwidth, with each being responsive.[/QUOTE]
I agree, however the industry seems to believe there is a war between the two. http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/ is a good read on why not to do a separate mobile website. If you google mobile vs responsive websites you’ll get plenty of others.
Sorry guys wrong site that site I showed yall was actually a test app I was developing for phonegap the actual site is www.webapp-testing.com/hangars. Sorry about the mix up but keep the discussion and suggestions coming its a really interesting read
Oh and the site I showed yall in error was actually pure html no jquery mobile was used. I tried jquery mobile once but had some issues in implementing ajax queries within it as I could no longer move back and forth as smoothly. My lack of knowledge of how to manipulate the hashtags was the reason for this
No probs! That site looks like a good candidate for @media rules. In otter words, change the styles depending on with width of the viewport. Here’s a handy guild to targeting different devices:
Actually, this one, from css-tricks, is from the old 320andup.
There’s a new and improved 320andup: http://www.stuffandnonsense.co.uk/blog/about/320_and_up
If you’re looking for more places to start, or for inspiration, you can check out H5BP and MH5BP:
http://html5boilerplate.com/, http://html5boilerplate.com/mobile
Yeah, I confess to this sin also, war.
But, says me, I was fighting the good fight:
- let everyone be aware the two, RWD and MWS, are completely different things, so it’s not a question of vs
- let everyone be aware that responsive fits all kinds of websites, mobile or tablet or desktop, so it’s smart to think responsive before anything else
Personally, I got over this war, and took a step forward: http://www.netmagazine.com/tutorials/getting-started-ress
I have to say here that I have the outmost respect for LukeW, amongst others like Nicolas Gallagher, Jonathan Neal or Paul Irish. They give without asking money or loyalty.
Hello,
if you want your site to be good looking on mobile and bigger screens - i can reccomend using skeleton framework.
From their site :
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
Check it out, hope it helps.
Thanks for all the help will be looking at the responsive templates frameworks.