Spectrum 2015 responsive design
-
Upload
neil-perlin -
Category
Software
-
view
101 -
download
0
Transcript of Spectrum 2015 responsive design
![Page 1: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/1.jpg)
WELCOME TO RESPONSIVE
DESIGN
Neil Perlin
Hyper/Word Services
2015
![Page 2: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/2.jpg)
Welcome to
Responsive Design
![Page 3: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/3.jpg)
Who Am I?
Neil Perlin - Hyper/Word Services.
– Internationally recognized content consultant.
– Helps clients create effective, efficient, flexible
content in anything from hard-copy to mobile.
– Taught HTML and XML in the ‘90s and ‘00s,
CSS since the early ‘00s.
– MadCap-certified Flare trainer/consultant since
pre-alpha in ‘05.
– Using/training/consulting on RoboHelp since
‘91, vendor-certified since ‘97.
![Page 4: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/4.jpg)
The Issues
Responsive design overview
How does it work?
How to pull it out of your HAT
![Page 5: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/5.jpg)
Responsive
Design
Overview
![Page 6: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/6.jpg)
What Is Responsive Design?
Creating one web site/help output that can detect
a display device’s properties and automatically
reformat itself accordingly.
– Vs creating one site/output for each device.
Developed by Ethan Marcotte in 2010.
– See http://alistapart.com/article/responsive-
web-design/
For example…
![Page 7: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/7.jpg)
Pittsburgh Children’s Museum
![Page 8: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/8.jpg)
Gatwick Airport
![Page 9: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/9.jpg)
And Online Help? Flare…
![Page 10: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/10.jpg)
RoboHelp…
![Page 11: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/11.jpg)
Why It’s Important
In general – Makes it easier for web pages to
address the growing universe of display devices.
In tech comm – Lets us create content to run on
any display device (within reason) readers may
have.
– IMO, the biggest thing to hit tech comm since
HTML in ‘97.
![Page 12: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/12.jpg)
Why It’s Important
Why not just develop a separate site/output for
each device out there?
quartsoft.com
![Page 13: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/13.jpg)
But…
It complicates the conversion of legacy projects.
And adds complex new issues to new projects.
And downloads more slowly, which raises some
new issues.
– From Vikram Verma’s Adobe presentation at STC
2014
![Page 14: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/14.jpg)
![Page 15: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/15.jpg)
![Page 16: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/16.jpg)
![Page 17: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/17.jpg)
![Page 18: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/18.jpg)
![Page 19: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/19.jpg)
![Page 20: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/20.jpg)
![Page 21: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/21.jpg)
![Page 22: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/22.jpg)
![Page 23: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/23.jpg)
How Does It
Work
![Page 24: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/24.jpg)
Relative Size Units
We’re used to point-based sizes – 72pt = 1” –
from our print experience – familiar and simple.
But points are fixed, OK for print but have two
problems in online outputs:
– Can’t be resized by a browser user or a browser.
Instead, use:
– % – Based on the default size of normal on a given
browser – 100%.
– Em – The height of the capital M in each browser
font set, now a computed font-size property for the
style it’s based on – aka it varies.
![Page 25: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/25.jpg)
Why Relative Sizes?
An image at an absolute
width in a too-narrow space.
– Note the horizontal scroll bar.
And at a relative width in that
same space.
– No horizontal scroll bar; the
50% width makes a browser
show the image at 50% of
the available space – “relative”.
– In effect, each browser handles
that formatting for you.
![Page 26: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/26.jpg)
Media Queries
Formulas that test for certain parameters and run
different CSS settings at designated change
points – “breakpoints” – based on the result.
– Testable parameters include device screen size,
resolution, orientation, color vs. monochrome, etc.
![Page 27: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/27.jpg)
Media Query Examples
@media screen and (min-width: 320px) {
}
– Tests whether the device is a screen (a testable
property) and whether its width is 320x or more.
@media screen and (min-width: 800px) {
}
– Tests to see if the screen’s width exceeds 800px.
– At each breakpoint, here width, different CSS
settings take effect that might reformat the screen or
show or hide different elements.
![Page 28: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/28.jpg)
Fluid Grids
Basically involves creating layouts that can go
from this to this
Based on the CSS “float” property rather than
hidden tables.
Good intro at:
http://www.1stwebdesigner.com/tutorials/fluid-
grids-in-responsive-design/
![Page 29: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/29.jpg)
Fluid Grids Example
For example:
![Page 30: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/30.jpg)
Fluid Grids Example
![Page 31: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/31.jpg)
Fluid Grids Example
![Page 32: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/32.jpg)
Fluid Grids Example
And here’s the code that makes it work.
![Page 33: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/33.jpg)
HATs and Responsive Design
Doing this calls for some knowledge of CSS,
HTML, and good coding practice.
What if you’re not a coder?
Flare, RoboHelp, Doc2Help, others(?) – let you
create responsive design now with no coding but
with some early limitations and oddities.
![Page 34: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/34.jpg)
What’s RESS?
![Page 35: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/35.jpg)
RESS
Responsive Design + Server Side Components
– “…RESS combines adaptive layouts with server side
component (not full page) optimization. So a single
set of page templates define an entire Web site for all
devices but key components within that site have
device-class specific implementations… rendered
server side.”
– Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1392
![Page 36: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/36.jpg)
How To Pull It
Out of Your
HAT
![Page 37: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/37.jpg)
The Tasks
Use relative size units via the CSS.
Create a fluid grid using “float” styles from the
CSS, depending on your content layout
complexity.
Invoke your HAT’s responsive design feature.
Specify the breakpoints.
Design the layouts for each breakpoint.
Generate, view, and test the output.
![Page 38: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/38.jpg)
Flare
![Page 39: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/39.jpg)
Use Relative Size Units
All formatting via the Stylesheet Editor using
relative size units.
![Page 40: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/40.jpg)
“Float” Your Graphics
In the img tag via the Stylesheet Editor using the
float style in the Box functional group.
![Page 41: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/41.jpg)
Invoke Responsive Design
Set the breakpoints
on the Skin Editor’s
Setup tab.
– Note that there’s
just one tablet
breakpoint.
![Page 42: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/42.jpg)
Set the Breakpoints
Don’t try to set the
breakpoint values
for specific devices.
– You’ll go crazy trying to decide which devices
to base the decision on and only have two
options anyway.
Instead, test your output to find sizes where the
design gets iffy and set your breakpoints there.
To find generic breakpoints, simply resize the
browser window containing the output.
![Page 43: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/43.jpg)
Define the Mediums (Layouts)
Define the properties for each medium on the
Skin Editor Styles tab.
Note the three output type mediums on the Skin
Editor toolbar.
– Use the UI Text tab to change the wording of
any UI element.
![Page 44: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/44.jpg)
Define the Mediums (Layouts)
Click the Highlight option on the Skin Editor
toolbar to highlight the setting for a selected
item on the preview or vice versa.
![Page 45: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/45.jpg)
Watch Out For…
Can only define one tablet breakpoint in v. 10.
– May be important if you need to distinguish
between 10” and 7” tablets.
– Hopefully multiple tablet breakpoints in v. 11.
Some skin editor settings are hard-coded – e.g.
logo always left-justified for Web but centered
for Tablet and Mobile.
![Page 46: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/46.jpg)
Watch Out For…
Settings hierarchies – ex. Background priority
hierarchy is Image > Gradient > Color.
– Must set image field to None and Gradient to
Transparent for a Color setting to work.
![Page 47: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/47.jpg)
RoboHelp
![Page 48: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/48.jpg)
Use Relative Size Units
All formatting
via the Styles
pod using
relative size
units.
RH doesn’t
offer % and em
options but
supports them
if you type
them.
![Page 49: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/49.jpg)
“Float” Your Graphics
In the img tag via the Styles pod.
![Page 50: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/50.jpg)
Set the Breakpoints
Can’t change the default breakpoints through the
GUI.
Must do so through a schema file and the CSS.
– Not difficult but you should be comfortable
working in code.
– If you are and want the instructions, email me.
– Hope to see this changed in RH12.
![Page 51: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/51.jpg)
You Can Now Either…
Design the layout, then invoke responsive
design and call the layout, or
Invoke responsive design, then call the/a layout
(and modify it if necessary).
– I think option 1 is simpler but it’s up to you.
![Page 52: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/52.jpg)
Design the Layout
Add your new layout under Screen Layouts on
the Project
Set-Up pod.
Then right-click
on your layout
and select
Edit – opens
the Layout
Editor.
![Page 53: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/53.jpg)
Design the Layouts
Select a layout component.
Then modify
it using the
preview to
identify it on
the Properties
list.
![Page 54: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/54.jpg)
Invoke Responsive Design
Select Responsive HTML5 in the SSL folder,
click the Select button to pick a layout.
– Or the
Customize…
button to
open and
customize an
existing
layout in
the Layout
Editor.
![Page 55: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/55.jpg)
Watch Out For…
Need to edit a schema file and a CSS file to
change the breakpoints.
Some skin editor settings are hard-coded, such
as placement of navigation options strip.
Can’t modify TOC, index, glossary, or general
navigation differently for mobile and tablet –
settings are “mobile/tablet”.
![Page 56: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/56.jpg)
What’s MultiScreen HTML5?
Responsive design creates one output that adapts
itself automatically based on the device.
– With only one set of content, variables, etc.,
since there’s only one output.
Multiscreen supports different output settings
and different content, etc. for each device.
– More device-granular content and design but
takes more work since you must define the
multiple devices individually.
![Page 57: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/57.jpg)
Summary – Best Practices
Design your content for “undesktop-first” via
fluid layout grids, relative sizes, etc.
Eliminate local formatting, period.
Images:
– Insert sequential images using the CSS “float”
style – no more table-based insertion.
– Size images dynamically using % or em units.
» But are images legible at smaller sizes. Can you
conditionalize them out? Effect on content?
![Page 58: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/58.jpg)
Summary – Best Practices
Use “autofit to window” option for tables.
Define “device class” or “category” breakpoints
rather than device-specific ones.
Consider effects of using
low-res pointers
on the interface
and interactivity.
![Page 59: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/59.jpg)
Summary
Lots of new technical, design, and output
challenges.
– Define your terms and platforms.
It sounds daunting, but so did the move by tech
comm to online help and the web in the ‘90s and
still today.
We met those challenges – time to do so again.
![Page 60: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/60.jpg)
Hyper/Word Services Offers…
Training • Consulting • Development
Flare • Flare CSS • Flare Single Sourcing
RoboHelp • RoboHelp CSS • RoboHelp
HTML5
ViziApps
Single sourcing • Structured authoring
![Page 61: Spectrum 2015 responsive design](https://reader035.fdocuments.in/reader035/viewer/2022062406/55a895e61a28abdd238b463e/html5/thumbnails/61.jpg)
Thank you... Questions?
978-657-5464
www.hyperword.com
Twitter: NeilEric