Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 08-31-2018, 05:34 AM
ScriptMan's Avatar
ScriptMan ScriptMan is online now
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 13,275
iTrader: 4 / 100%
@ 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.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 09-01-2018, 11:58 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,419
iTrader: 5 / 100%
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 (1024x76

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.

Quote:
...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
 
Reply With Quote
  #3  
Old 09-02-2018, 05:13 AM
ScriptMan's Avatar
ScriptMan ScriptMan is online now
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 13,275
iTrader: 4 / 100%
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.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
20 Free Ebooks for Social Media Marketers HTMLBasicTutor Social Network Marketing 1 05-09-2018 07:24 PM
13 Free Courses on Social Media Marketing HTMLBasicTutor Social Network Marketing 3 12-27-2017 12:03 AM
Measuring Social Media Impact HTMLBasicTutor Social Network Marketing 2 12-12-2017 12:56 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 07:47 PM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC