homepage Welcome to WebmasterWorld Guest from 54.205.193.39
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderator: open

Mobile Web Site Design and Development Forum

    
Button / Link Size
How big to work without zooming?
ken_b




msg:4630952
 12:14 am on Dec 16, 2013 (gmt 0)

I'm just beginning to move into the current century, so I bought a 7" tablet.

I'm having more than a little trouble with link buttons/text. On many sites I need to zoom in to be able to make the links work. Hard to imagine what this would be like on a phone screen.

So, how big should a button be, or text size for a text link?

Since I'm also working on a new site that I suspect will attract mobile users, is there a SIMPLE to serve various text/image sizes based on screen size?

How do others handle this issue?

.

 

drhowarddrfine




msg:4631192
 6:46 pm on Dec 16, 2013 (gmt 0)

Read chapters 5 - 9 of my book (if I had a book).

Apple recommends a minimum size for touch targets of 44px. Others recommend 7mm (I've forgotten what that is in px). In any case, remember those are bare minimums and typically larger.

Text should be big enough to be read. On a phone, 13px is a bare minimum, iirc, but don't forgert to have margins/padding.

Responsive image sizes are a hot topic right now and there is no one perfect solution. Google for Scott Jehl and Luke Wroblewski on that topic.

ken_b




msg:4631344
 12:09 am on Dec 17, 2013 (gmt 0)

Thanks.

I did some more searches and reading and this doesn't seem to be a simple question. Not sure I understand it all.

It appears that part of the issue is the varying PPI of different machines.

Learn, learn, does it ever end learn? :)

lucy24




msg:4631362
 1:24 am on Dec 17, 2013 (gmt 0)

So, how big should a button be, or text size for a text link?

It isn't so much the size of the link as what's next to it. You can "click" on a single pixel if there are no other links in the vicinity. Beware of things like those long lines of social-media buttons. On a mobile device you're "clicking" on a physically smaller region with a physically larger object (your finger).

Concrete example: on the app version of {extremely popular website belonging to a major search engine}, the touchpoint for one of the most frequently used functions is immediately adjacent to a completely unrelated area ... which is also a link. I can't count the number of times I've meant to take a closer look at Point A and instead found myself unceremoniously transported to Point B.

ken_b




msg:4631374
 1:42 am on Dec 17, 2013 (gmt 0)

It isn't so much the size of the link as what's next to it.

Yeah, I've been to more than one site where the targets are so close together it's hard to hit a specific one. And other sites that have a long row of letters (the whole alphabet) that seem to work well without being huge.

I found a Nokia page that suggests a minimum of 7x7mm with a 1mm spacing. Haven't quite wrapped my head around mm as a measure on a screen yet.

drhowarddrfine




msg:4631477
 2:23 pm on Dec 17, 2013 (gmt 0)

One px equals 1/72 of an inch. Convert that to mm.

ken_b




msg:4631813
 2:34 pm on Dec 18, 2013 (gmt 0)

One px equals 1/72 of an inch.

That's for desktop/laptop screens as I understand it.

It looks to me like my tablet, a Samsung Galaxy Tab 3 - 7.0 is more like 170 pixels per inch, and from what I can tell, some phones have even more ppi.

Makes working with pixels a bit more troublesome.
.

drhowarddrfine




msg:4632206
 4:48 pm on Dec 19, 2013 (gmt 0)

Actually, a CSS pixel is now defined as that. Heading out the door so Google for "css pixel". (Or is it "reference pixel"? I forgot.)

lucy24




msg:4632252
 8:24 pm on Dec 19, 2013 (gmt 0)

While you're there, use the search engine of your choice to look up "pixel ratio".

In the beginning, a pixel was equivalent to a pica. That's a unit of measure equivalent to 1/72 inch.

In the slightly later beginning, a pixel was a physical thing. A linear inch of screen space was occupied by 72 dots.

Neither of the two is true today.

tangor




msg:4632316
 1:04 am on Dec 20, 2013 (gmt 0)

*lllll
llllll
lllll*

With * as a button is no problem.

*lll*l
ll*lll
*llll*

might be two or three problems!

ie: how big is your finger tip, what is the resolution of your device, and how many beers have you had before attemptinig to navigate a touch screen? :)

drhowarddrfine




msg:4632361
 4:53 am on Dec 20, 2013 (gmt 0)

@lucy24 If you look up a CSS reference pixel, you will see it stated in the spec as 0.75pt and a point is 1/72 of an inch. Here it's stated in the CSS2.1 spec: [w3.org...]

This was changed recently (and I forgot all about it) to 1/96 inch: [w3.org...]

lucy24




msg:4632370
 6:31 am on Dec 20, 2013 (gmt 0)

.75 x 1/72 = 1/96

Once upon a time this was one of the great divides between Mac and That Other Platform.

Momentary brain fart up above: I said "pica" when of course I meant "point". A pica is 12 points (1/6 inch). Those definitions obviously go back many centuries before computers.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved