Mobile Rendering

APD Toronto
APD Toronto used Ask the Experts™
on
Hi Experts,

I have a project where I need to make a website render on mobile devices, and I wondering what exactly that mean?

Previously I have used the following just to make the website fit, but I know some websites are structured differently, like EE.

<meta name="viewport" content="width=1525" />

Open in new window


This just reduced the website. If I need to restructure it, how would I go about it? It is very a simple site created by WP with 2 columns, and it is FAQ site, so mostly content.

Any help will be greatly appreciated.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
APD TorontoSoftware Developer

Author

Commented:
Is Responsive Design the detection - if mobile, use different set of HTML/CSS files?

How easy it i to create a mobile menu?
You can put viewport as:

<meta name="viewport" content="width=device-width" />

Can use @media query in css sheet/styles to exactly match element differing behaviours in various widths...

or otherwise you can use separate stylesheets specific for different devices you intend to target.

or otherwise you can create a separate subdomain for mobile only websites.

Currently all sites are created using @media query in single stylesheet, which is best optimized for quick access/less load time.
APD TorontoSoftware Developer

Author

Commented:
How would you use media

I see a lot of co relation wot j qury. Is j query mandatory
greetings APD_Toronto, , To use the CSS for a "Responsive" web page will take more than a few things to learn about, and then find a way to apply them to a specific web page.
You ask -
   "Is jquery mandatory"
the answer is NO !

There are some jquery factors and operations that can help some knowledgeable JS coders, to do some of the web page width variations, but not for many width considerations that need the CSS in place.

But a page must use some of the many CSS factors and changes in order to have the arrangement and element size be acceptable to view in many different display width sizes.
In mobil you can now have a very large variety of view screen sizes.
You can use CSS to have elements change width with the container, with a percentage -
<div style="text-align: center; width: 100%;">
div text here
</div>

the media query, can be useful as a way to change element arrangement, as drop a two column page to a one column at a certain width. But all web developers now need to know how to use CSS in their pages, and responsiveness in CSS is more than a small amount to learn.

There are many CSS and responsive tutorials, you might look at this one

http://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

that shows some basic methods for media queries.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial