creating Mobile friendly website Best approach?

[madwayne]

okay, my website is okay, and on my smart phone the normal style sheet isnt so bad but its a large phone.

want to make the css be detrmined by the device accesssing the site(tried this and failed)alternatively i create a mobile sub domain again thats detected by the device acessing the system.

Any advice or basic working examples would be appreciated.

Thanks

[bishop]

Re: creating Mobile friendly website Best approach?

Hello madwayne,

As you said your website is okay and want to make it compatible to devices (i.e. responsive / device friendly), you have to use media queries. Either use bootstrap (twitter framework) or you can write your own media queries for that.

You can refer following media query css or write your website's url.


320px — iPhone in portrait orientation
480px — iPhone in landscape orientation
768px — iPad in portrait orientation
1024px — iPad in landscape orientation (as well as netbooks, since these devices typically have a horizontal resolution of 1024px).

@media screen and (max-width: 1024px){}
@media screen and (max-width: 480px){}
@media screen and (max-width: 320px){}
@media screen and (max-width: 768px){}

[Ben Stones]

Re: creating Mobile friendly website Best approach?

Hi Wayne,

As bishop has said, targeting different kinds of devices is possible using CSS media queries. This allows you to target CSS code based on the end user's display resolution or browser (viewport) width, among other things. For example, if I had a <div> tag, I could have the following CSS code to add spacing to the left and right side of the HTML tag when the width of the browser window becomes too small:

HTML:

<div>UK Web Hosting from eUKhost</div>

CSS:

div
{
     width: 100%;
     max-width: 1200px;
     min-height: 500px;
     text-align: center;
}

@media (max-width: 1230px)
{
     div
     {
          padding-left: 15px;
          padding-right: 15px;
     }
}

This code would ensure that if a user's browser window width is 1230 pixels or less, there is padding on the left and right side of the <div> tag, so any content inside the <div> tag has spacing of 15 pixels on the left and right side.

This is a very basic example but this is essentially how media queries work. You can subsequently use media queries to change how your web page looks on smaller screen devices. For example, you may need to stop certain HTML containers from floating on smartphones and tablets, where available horizontal space is an issue. A good example is having two <div> tags floating next to each other: you may need a CSS media query that stops them from floating when the browser width becomes too small to keep them floated. This would make sure they render well on smartphones which have very little horizontal space compared to a laptop or desktop computer.

Perhaps this article will help make it clearer how media queries work: Creating responsive HTML containers in CSS

I hope this helps. If you have any further questions please do not hesitate to respond.

[madwayne]

Re: creating Mobile friendly website Best approach?

no not making any sense at all.

surely it should be as simple, if the device width is x, display like x

I have a print media that prints out with certain things excluded that works fine, but I just cant get any of it to work based on screen size.

so I am missing some simple fundamental


even looked at this that i know works Mobile-First Responsive Web Design

but still struggling....

[Ben Stones]

Re: creating Mobile friendly website Best approach?

no not making any sense at all.

surely it should be as simple, if the device width is x, display like x

I have a print media that prints out with certain things excluded that works fine, but I just cant get any of it to work based on screen size.

so I am missing some simple fundamental


even looked at this that i know works Mobile-First Responsive Web Design

but still struggling....

We'd need to see your website to really get a better understanding of what you are trying to achieve. However, to target different display resolutions, the media query is this:

@media (max-device-width: 768px) {

}

To target the visible display area of the browser (in other words, if a browser window was resized to 768 pixels horizontally, that would be the "visible area"):

@media (max-width: 768px) {

}

Our website uses media queries that helps us to optimise the page layout and appearance for different devices, especially on smartphones and tablets where space becomes an issue, as I've mentioned before.

In both code examples, you would need to change the value "768px" to whatever width you are targeting specifically.

[madwayne]

Re: creating Mobile friendly website Best approach?

secureiam.co.uk

Want to make it so the phones have just a very simple basic view, so loose the sidebars and change the header, probably lose the slide shows. will change the menu system also.

I can create most of this in a style sheet, its getting the stylesheet to respond to the device, I seem to get so far and fall over.

I'll get my head around it, sometimes it just clicks into place.

[madwayne]

Re: creating Mobile friendly website Best approach?

okay starting to get something but stll not sure.

at the moment I have a left and right container thats floated side byside.

when I shrink ie go to a smaller device, I want the left on to of the right and all to the left alinged.

in the main css if I remove the float from both I get my stack, however, put them back and try to apply the same in the smaller screen size css, it does nothing, if I clear the floats, I get a left, and then a staggered right.

any ideas on what i amy be missing please.

[madwayne]

Re: creating Mobile friendly website Best approach?

Hi,

so i have been rigging the the site, and noticed I had lots of crap floating around so tidied things up.

done a test on google and it came out favorable with user friendly sp was impressed.


however user friendly my back side, now my header and footer are not synced with the main content, so need to find out how to rebind them together.


the original site still in place is bound, but the new one isnt yet the new one is tidier and according to google more friendly......hmmm


Can anyone help me bind it together, I must be missing something simple?????

[madwayne]

Re: creating Mobile friendly website Best approach?

margin: 0 auto; is all that needed adding to the header and footer must have lost it alog the way.

[madwayne]

Re: creating Mobile friendly website Best approach?

i have done a basic optimisation for the smallest screen of 320.

works well, except the menu system works strangely in the android mobile IE, in that press, tilt and tilt back it activates the menu rather than be just pressing it works fine in chrome on the device.

so I suspect I need to modify something with respect to the input type checkbox thats used for the menu switch.

secureiam co uk is the site and its available directly now, just bugging me searches on line suggest it needs to be a button type but cant seem to get it to work.