the art of responsive design
TRANSCRIPT
#Logi16
THE ART OF RESPONSIVE DESIGN
Joshua McClure
#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
#Logi16
WHAT does it mean to be responsive?
And WHEN should it be responsive?
#Logi16
What is Responsive Design?
5
#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
#Logi16
TOOLS OF THE TRADETools that will help you take your application to the next level.
#Logi16
LOGI STUDIO TOOLS
Master Report LayoutCanvas Charts
8
#Logi16
CSS FRAMEWORKS
9
#Logi16
RESPONSIVE DESIGN TOOLS
Browser Developer ToolsDevice Emulator
10
#Logi16
KEY PRINCIPLESKeep these in mind while building your responsive framework and content.
#Logi16
A typical framework will consist of a few key components.
• Header• Sidebar• Content• Footer
BUILD A FRAMEWORK
12
#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
Pixels
13
#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
#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
#Logi16
BUILDING RESPONSIVE CONTENT
Using Logi Studio:1. Building the Layout2. Report Content3. Responsive Tables
#Logi16
Use these simple techniques to reach your audience on any device!
Logi has responsive design baked into the platform
