Avatar of Richard Korts
Richard KortsFlag for United States of America asked on

Responsive Design

Hello,

I need to have some portions of a web app I am building responsive to the iPad / iPhone devices.

I believe I only need to address some of the images. My thinking is to make "smaller" versions of the images & then use the navigator.userAgent property to determine which one to use based on device & change the img src property accordingly for the effected images.

See www.rkassoc.org/FWLSCO. I would produce modified versions of the header image & the city skyline, to fit the pixel limitations of the iPad/iPhone devices.

I understand one can also use something like this: @media screen and (max-width: 1060px); I'm guessing several of these for the different widths of iPad, iPhone & iPhone 5, possibly one for portrait & one for landscape? See also this: http://stephen.io/mediaqueries/

Can someone give advice? I have looked on the web but don't seem to find a definitive answer.
CSSiPhoneJavaScript

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Richard Korts

To Tom Beck

Thanks.

I just tried the page on my iPhone without ANY changes & it looks perfect; the only thing is the logon area (at the bottom) is tiny.

As you may have guessed, this is an app for specific controlled users, so I guess we can just tell them to expand screen size.

Can I adjust the font sizes of those form elements to be larger if the device is iPhone?

Thanks
Tom Beck

I just tried the page on my iPhone without ANY changes & it looks perfect; the only thing is the logon area (at the bottom) is tiny.
You are missing the point of responsive design. I looked at your site on my iPhone and it's a PERFECT miniature version of your full size site. It is thus a site obviously designed for larger screens and Safari Mobile is doing the best it can with it. Safari Mobile will attempt to adjust font sizes to a certain extent to make them readable. It will take <h6> headings for example and make them look the same size as <h1> headings on the phone so that no font is too small to read. However, think what this can potentially do to your design. Headings now have a new, unintentional hierarchy.

When a site is fully responsive, the iPhone user is left with the impression that the site was specifically designed to be viewed on an iPhone. No zooming in and out or scrolling around required. All text and graphics sized and proportioned to layout nicely on the smaller screen. Long horizontal menus collapse gracefully into narrower dropdown menus for example. Images do not overwhelm the tiny screen or take up an unwarranted amount of screen real estate.
Gary

You are on a fools errand if you go down the route of trying to make some pages of your site responsive.
Either make your whole site responsive to the various screen resolutions (better in the long run) - as padas has pointed out Bootstrap is a great way to go - or you don't, period. Trying to do this as a when I need it, I'll do it is only chasing your own tail.
You talk about making smaller images - well the main image on your link could be halved in size to about 40kb just by making it web ready (not overly large for a smartphone) - if you have Photoshop it is just a case of 'Save for web and devices'.
Remember images are eye candy - no one really looks at them in detail unless they are for example an image of a product you are buying - so you can greatly reduce the quality on everything else without reducing the clarity
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Scott Fell

If you look at the 2nd code box http:#a39760953 this is an example of how you would code a responsive site using bootstrap.  

Another example
<div class="row">
  <div class="col-xs-12 col-sm-8">Full row for phone, larger left column for devices over 768px </div>
  <div class="col-xs-12 col-sm-4">Full row for phone, smaller right column for devices over 768px </div>
</div>

Open in new window


Each page takes a lot ore planning, but the end result is a better experience for your user.  The example that simply shrinks down the page just shows what can happen.  Optimally, if your browser starts at 1200px wide, and you narrow your browser, you will start to see things shrink down until a point where you reach the next size as defined by your media query, then the window rearranges allowing objects to remain a certain size, just in  a different position.