1. Responsive Icons
‣ What, why and how …
‣ Pros and Cons …
!
‣ Presentation for 9th Usability
Meetup in Linz - 2014/09/15
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

2. Responsive Icons
in brief …
2

3. Responsive Icons
Responsive icons are scalable iconography
prototypes that allow to display different sizes of the
same icons on discrete devices such as laptop,
Smart phone and tablet.
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
3

4. Why …
The concept interrogates the varying complexity of
symbols used on devices, and aims to find the
perfect balance of simplicity in relation to screen
size.” – Joe Harrison
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
4

5. How it works …
http://www.responsiveicons.co.uk
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
5

6. How it works …
◣CSS based: Responsive Iconography
http://cikonss.zzapwebdesign.com
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
6

7. How it works …
◣SVG and Javascript: Responsive SVG
http://tutsplus.github.io/Responsive-Iconography/responsive-svg/index.html
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
7

8. Responsive Icons
◣Drawbacks
◣Risk of confusing users by presenting significantly different icons
across experiences
◣Increased amount of work for icon designers due to the need to
design multiple versions of each icon
◣Potential for abuse and increase in page size
◣Benefits
◣More fine-grained control for designers over icons at different sizes
◣Icons optimized for different grid sizes on different devices such as
Android, Windows Phone, and iOS
◣Aesthetic consistency of icons at different sizes through visual
rather than mathematical scaling
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
8

9. Smart Icons
◣Iconic (KickStarter project)
https://useiconic.com - Joe Harrison [Waybury]
◣SVG based - dynamic smart, contextual icons
◣
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
9

10. Responsive Icons
◣Open Discussion
◣Icons should
◣be clear and easy to perceive
◣intuitive
◣transport consistent meaning
◣Why do we need responsive icons thus?
◣Effects on UX
◣Responsive Icons in
◣Web pages / Web apps / Native Apps
◣Other applications
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
10

11. Responsive Icons
◣Links
◣http://knowkalpesh.in/index.php/blog/responsive-icons-
breaking-territory-of-iconography#.VBVA4Evzqcc
◣https://useiconic.com/
◣http://blog.iconfinder.com/do-we-really-need-responsive-
icons/
◣http://thenounproject.com/term/responsive-design/
18986/
◣http://cikonss.zzapwebdesign.com
UXFocus
Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at
11