Welcome to WebmasterWorld Guest from 54.205.141.4

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)

Senior Member from US 

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

joined:Oct 5, 2001
posts:5784
votes: 87


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 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.
12:09 am on Dec 17, 2013 (gmt 0)

Senior Member from US 

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

joined:Oct 5, 2001
posts:5784
votes: 87


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)

Senior Member from US 

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

joined:Apr 9, 2011
posts:13537
votes: 403


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)

Senior Member from US 

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

joined:Oct 5, 2001
posts:5784
votes: 87


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


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

Senior Member from US 

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

joined:Oct 5, 2001
posts:5784
votes: 87


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 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.)
8:24 pm on Dec 19, 2013 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:13537
votes: 403


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)

Senior Member from US 

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

joined:Nov 29, 2005
posts:7207
votes: 453


*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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 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...]
6:31 am on Dec 20, 2013 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:13537
votes: 403


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members