Webmaster Forum

Webmaster Forum (http://www.v7n.com/forums/index.php)
-   Coding Forum (http://www.v7n.com/forums/forumdisplay.php?f=16)
-   -   @ media size (http://www.v7n.com/forums/showthread.php?t=429459)

ScriptMan 08-31-2018 05:34 AM

@ media size
Most of the examples I have found on the web are using something near 600 px as the start point for changing things around to a mobile friendly format.

My personal testing on screen, with a tablet and with an Android based phone indicate that kick in point needs to be set to a higher number for really comfortable reading and the ability to cleanly touch the text links.

I would be interested in hearing your experiences and or practices.

HTMLBasicTutor 09-01-2018 11:58 PM

The sizes that the Web Developer Toolbar for FF tests for are:
Mobile portrait (320x480)
Mobile landscape (480x320)
Small tablet portrait (600x800)
Small tablet landscape (800x600)
Tablet portrait (768x1024)
Tablet landscape (1024x768)

One could create an adjusted CSS file for each of these break points but if you use fluid design to start with then there would be less requirement for so many calls to resources.

For links to be clickable on the small screen I seem to remember either Google or Yahoo! reports recommend 40px spacing, especially in something like a vertical navigation bar.


...Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels...
Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes - Smashing Magazine
February 21, 2012

ScriptMan 09-02-2018 05:13 AM

Well without knowing of those resources I got decently close to them with a mostly fluid design, targeting for the lowest denominator, and minimal break points or changes in CSS. A css file the size of War & Peace was not my objective.

Mostly fluid because I still wanted it to look good on the big screen.

The 40-44 px. is a spot on target size. My fat fingers have trouble with less. Changing the nav links display from horizontal to vertical and the sliding drawer with no JS for upper Nav was a fun learn.

Thanks for the links.

All times are GMT -7. The time now is 08:06 PM.