Welcome to WebmasterWorld Guest from 184.73.126.70

Forum Moderators: not2easy

Message Too Old, No Replies

Button / Link Size

How big to work without zooming?

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

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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?

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

WebmasterWorld Senior Member 10+ Year Member



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.
12:09 am on Dec 17, 2013 (gmt 0)

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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? :)
1:24 am on Dec 17, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
1:42 am on Dec 17, 2013 (gmt 0)

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.
2:23 pm on Dec 17, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



One px equals 1/72 of an inch. Convert that to mm.
2:34 pm on Dec 18, 2013 (gmt 0)

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.
.
4:48 pm on Dec 19, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.)
8:24 pm on Dec 19, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
1:04 am on Dec 20, 2013 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



*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? :)
4:53 am on Dec 20, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



@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...]
6:31 am on Dec 20, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



.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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month