What does it mean for an analytics app to be responsive? Learn the ins and outs of building a responsive application and how to leverage tools and best practices. Get the sample Responsive Demo Application here: http://apps.logianalytics.com/responsive/rdPage.aspx Ready to learn more? Read The Definitive Guide to Dashboard Design at https://goo.gl/2IPpZL

1. #Logi16
THE ART OF
RESPONSIVE DESIGN
Joshua McClure

2. #Logi16
ABOUT ME
2
Joshua McClure
Solutions Engineer & Web Developer
Logi Analytics
joshua.mcclure@logianalytics.com

3. #Logi16
• What does it mean to be responsive?
• Leveraging the tools of the trade
• Principles to keep in mind
• The basics of building a responsive application
WHAT WE ARE GOING TO LEARN TODAY
3

4. #Logi16
WHAT does it mean to be
responsive?
And WHEN should it be responsive?

5. #Logi16
What is Responsive Design?
5

6. #Logi16
Use responsive techniques when your audience is accessing the
application from mobile devices and only if the application provides
meaningful value to the audience in a mobile context.
When Should You Use Responsive Design?
6

7. #Logi16
TOOLS OF THE TRADE
Tools that will help you take your
application to the next level.

8. #Logi16
LOGI STUDIO TOOLS
Master Report LayoutCanvas Charts
8

9. #Logi16
CSS FRAMEWORKS
9

10. #Logi16
RESPONSIVE DESIGN TOOLS
Browser Developer Tools
Device Emulator
10

11. #Logi16
KEY PRINCIPLES
Keep these in mind while building your
responsive framework and content.

12. #Logi16
A typical framework will consist of
a few key components.
• Header
• Sidebar
• Content
• Footer
BUILD A FRAMEWORK
12

13. #Logi16
• Use fluid measurement
• Auto-sizing is my friend
• The framework of your application
should respond the screen size, thus
driving the size of the content
RELATIVE MEASUREMENT
13

14. #Logi16
• Only show the important stuff, hide
everything else
• Hide content that is expensive to the
load time (on mobile devices)
• Make use of popup windows, sliding
trays, and other UI elements
ONLY SHOW THE IMPORTANT STUFF
14

15. #Logi16
• The smaller the screen size,
the more space is needed
• Provide plenty of space
between objects
• Overcome Horror Vacui
WHITESPACE IS YOUR FRIEND
15

16. #Logi16
BUILDING RESPONSIVE
CONTENT
Using Logi Studio:
1. Building the Layout
2. Report Content
3. Responsive Tables

17. #Logi16
Use these simple techniques to reach
your audience on any device!
Logi has responsive design
baked into the platform

18. #Logi16
Learn more with The Definitive Guide to
Dashboard Design