PDA

View Full Version : iPad and iPhone recognition


BluiSh
02-07-2013, 01:09 AM
Hello!

I have a website already and when I made it I just design it thinking in monitors of standar sizes but now Id like to also design it for iPads and iPhones 4 and 5, anyboy could tell me where to start?

Im thinking that the first thing to do is that the site for itself detects what kind of device is trying to reach it and in second place I have to redesign the whole site with new sizes, resolutions, icons and photos in lower resolution?

Thanks for the attention

Sincelerely
BluiSh :)

edbr
02-07-2013, 02:09 AM
you could look at <link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />

to create a different set of values for the layout and use max-width .
you also have to remember the wide use of android devices and that is a whole variety of sizes and also horizontal and vertical

edbr
02-07-2013, 03:22 AM
yahoogled a clear tutorial, we should have one here on this forum really .

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

BluiSh
02-09-2013, 05:01 PM
Thank you very much for the information edbr

Im checking the links and if Ill keep in touch very soon!

Sincerely

Ricky55
02-10-2013, 10:05 AM
To design for specific devices isn't really the way to go, there are just too many. Why just pick ios devices, what about all the others? You'd be far better building a responsive design with a fluid layout that scales to fit any screen size.

If you have the site already built then this might not be practical but you could use CSS media queries to change your layout at specific break points (screen sizes), this type of design is known as adaptive.

BluiSh
02-11-2013, 05:21 PM
Thank you very much Ricky

I agree with your comment and I was reading information about this issue and I found that there are two types of responsive design: adaptive and fluid&responsive.

which one is better for my case or which way I shoud follow? and also do you have any idea where I can get more info to start my design for these devices, at the moment Im redesigning my website and Id like to add these new features.

Help please!!!

Sincerely
Bluish

domedia
02-11-2013, 06:57 PM
Adaptive Design and Responsive Design is the same afaik.

You can read the ALA article that started it all, or you can buy Ethan Marcotte's book on the subject.
http://alistapart.com/article/responsive-web-design

Ricky55
02-11-2013, 10:37 PM
Well I think there's some confusion over this. I think people have been referring to adaptive designs as "Responsive Design" but I don't think they are. It's just become an umbrella term that many seem to use to cover both methods.

A fully responsive site is one that uses a fluid layout using percentages to scale the site. An adaptive site is less than this and is really just a fixed width site that shuffles things around at certain break points.

If you refer to Ethan Marcottes original post on a list apart he makes this obvious

http://alistapart.com/article/responsive-web-design

The thing is some people had been using fluid layouts for a number of years, it was just the fluid layout combined with media queries that really made RWD possible and that's when the phrase was coined and brings us to where we are today.

Really a fully responsive site is better but as I illuded to before its going to be more difficult to get this working if the site is already built.

With regards to more info there are loads of tutorials on the web, I'd recommend reading that original article, then

http://www.abookapart.com/products/responsive-web-design

This should give you a solid foundation on which to build.

I should also say that a responsive site is not always the way forward. Sometimes a dedicated mobile site might be better or even a mobile app or even just a fixed width site. I've asked my clients if they want a responsive site and not all do as they are more work and therefore I charge more. Just depends what you are doing and your audience.

Definitely here to stay though and definitely something we should try to use when possible but like I say back in the real world of timescales and budgets its not always possible.

Hope that helps.

edbr
02-12-2013, 05:43 AM
nice graphic showing a variety of device resolution
http://webdev-il.blogspot.com/2011/03/web-design-for-mobile-screen-sizes.html

Ricky55
02-12-2013, 08:48 AM
Cheers ed.

BluiSh
02-13-2013, 08:58 PM
Thank you very much to all for the information, seems that I have a lot of homework to read and study

Sincerely
BluiSh