Responsive Data Visualizations in Illustrator with ai2html
Responsive Data Visualizations in Illustrator with ai2html
Transcript
all right so what we just did was we
made a wonderful map in Illustrator
first we exported it as an image turns
out images resize very poorly oh look at
all small that text is can't read
anything
luckily New York Times came to the
rescue and made a wonderful tool called
AI to HTML which takes your Adobe
Illustrator file and converts it into an
HTML file and what that ends up doing is
we have this nice map here where this is
alt text and when we make it bigger we
make it smaller it resizes with us
unfortunately when we get very very
small this text ends up wrapping this
text and it ends up going off the side
of the page and so it turns out that
when we have different sizes it's not
enough to just automatically resize the
image it we also need to perhaps change
the image to format a little bit
differently so we're gonna do is we're
just going to reposition Los Angeles and
New York City whenever we have a nice
small map so that we can you know we can
have crammed things in a little bit
nicer or not have this terrible wrapping
going on so what we're going to do is go
back to illustrator we don't have to
mess with any of these crazy settings
over here all we need to do is to make a
brand new artboard so I'm gonna use the
artboard tool right here and I'm gonna
click and drag I were working for
somebody I would probably have a size
I'm gunning for but I'm just gonna say
sure 452 pixels looks good to me and I
cut and pasted all the parts in the map
put them into this new artboard I'm
gonna hold down shift while I'm resizing
so that it actually fits on the page
well and now I'm gonna add my text so
Los Angeles oh that word is so long
instead whoops
instead I uh I guess we can call Los
Angeles so we're just going to position
a little bit differently Dallas we can
just reuse it wasn't a big deal
New York City we'll stick it on stick it
on the inside here or yeah we'll stick
it on the inside here that seems a
little bit better
I think even made that map a little bit
bigger let's do that oh great and Lotus
reposition LA I'll reposition Dallas
reposition New York City so we what we
want to have happen is when the user has
a very large screen they'll see this
whole big spread out map and they have a
smaller screen they'll see a nice
condensed map here so just the same as
we did with our initial export we're
going to save and we're gonna do file
scripts ai to HTML your illustrator file
is saved beautiful so if we go into the
actual output folder will see that it
made two different backgrounds which
actually look pretty much the same in
this case but when we refresh things are
a little bit odd we see down here this
is the small version but it's actually
kind of big and then up here we have the
big version that you know they both kind
of stick around so what we need to do is
make it so that as we resize the screen
a large one is replaced with the
hopefully small one in order to figure
out how to do this you have to click
around on the AI th do you know page a
little bit what you have to do is go to
examples and then read read read read
read and then right here it says
multiple artboards for responsive web
pages that's what we're doing responsive
web design is when say a big screen in a
small screen you see slightly different
content and we are using multiple
artboards in order to the big artboard
for big screen small artboard for a
small screen so all we have to do is add
our little resizer script to your web
page so let's do that click resize our
script and we have to add this script
here this is some JavaScript code we
don't have to know what it means all we
need to do is add it to the web page so
our web page is this output file here
this map HTML we need to open this in a
plain text editor we cannot open this in
Word plain text editors could be I'm
gonna use one called Adam that is
available at Adam do I believe yes
they're also ones like textmate sublime
text notepad plus plus there are a lot
of them so what we're gonna do is we're
gonna open up Adam
we're gonna go file open and we're gonna
work our way I'm gonna go desktop
tutorial output and I'm gonna edit this
map dot HTML file now there are all
kinds of code in here do we need to know
what this does no do we need to know
what this resizer script does know all
we need to do is cut and paste this
resizer script
into here give it a save and then go
back to our map refresh and tada our map
changes based on how big our screen is
pretty fun right the only issue is that
if it gets very very very small it will
disappear there are a few ways to get
around this what we are going to do is
we are actually going to add a third
version in for when it's very very small
because I don't think that someone who
has a screen that's about this wide
which is maybe you know 400 pixels or so
needs to see an entire map right the fun
thing about when you're working with
different artboards when you're
exporting in different ways is you don't
have to show the same information the
same way all we changed between this
view and this view was the position of
the labels right so we took the labels
that were on the outside they moved them
a little bit tighter and life was good
but what we can actually do instead is
let's make another artboard so we're
gonna go to the artboard tool we're
gonna make a new line let's only make it
I don't know about 200 pixels wide maybe
so a nice nice small version of it make
a little bit taller though so we're
going to pull in the New York City
bubble here we're gonna pull in the LA
bubble here we're gonna pull in the
Dallas bubble here maybe we can use the
align tool to make them all line up with
one another put them over here we're
gonna label this as New York City
does it fit no we're gonna make that NY
see
we're gonna pull Los Angeles in here Los
Angeles fits okay we're gonna pull
Dallas in at the very bottom so we want
to make sure these are all lined up with
one another great so this is what our
visual is going to look like whenever
it's very small if we were better
designers we'd probably space these out
a little bit more appropriately but I
think everyone will survive if this is
what we publish don't push it a little
bit more to the left to get LA away from
the border there okay so now we're gonna
do the exact same thing we did before
where we do file
well first we save it let me do file
scripts ai to HTML and once again it
spits all of it out first oh no all
three of them have shown up what do we
need oh they're a size R script again so
we're gonna go back hit the resizer
script if you don't remember where it
came from
you go to AIT HTML org you go to
examples then you click resize your
script right here oh no come on back
come on back well I think it's in my
clipboard so I'm okay so you see it's
disappeared from this as mapped out HTML
which we had opened before we're gonna
paste the resizer script in there we're
gonna save it and we are going to
refresh so large size medium size and
smallest size perfect for all of our
responsive designs you can see that
these labels aren't necessarily lining
up how we wanted them to line up but
that is just something that we are going
to have to fight with in our hearts but
if instead of fighting in our hearts we
wanted to fight by typing things what
we're going to do is the first thing we
did with these maps was we set them to
be responsive we set this map to get
bigger and smaller based on how big our
screen was right but now it turns out
that that whole bigger and smaller thing
and it isn't really working very well we
like this one
when it's very small we don't like it
when it's expanded to fill you know the
gap left between this one here and the
smallest size so what we're gonna do is
we're gonna go back up here and we're
going to say responsiveness initially it
was set as fixed and what's fixed means
is this one will this artboard will
always stay the size that we've designed
it at this one will always stay the size
we've designed to that this one will
always stay the size that we've designed
it out so let's do this we're gonna save
it we're gonna do file scripts a HTML
one more time click OK
we're gonna have to put the resizing
script back in there is it in my
clipboard yes save and refresh so as you
can see it the smallest size we get the
really really small one as we get bigger
we get the medium-sized one and as we
get biggest we get the biggest sized one
they don't resize so they always look
shall we say pixel perfect and yeah
they're they're pretty fun time so
usually if you're doing responsive
design and you are feeling lazy you can
just throw one artboard down and you can
say responsiveness dynamic cuz it'll get
bigger though that's smaller you know
there won't be that many tears but if
you're designing kind of exactly across
several different artboards and you put
a lot of thought into how exactly this
wonderful beautiful artboard will look
and this one will look and this one will
look it might make more sense to do
responsiveness fixed so it won't be kind
of stretched out and have your text
aligned at different ways so that is the
way to deal with multiple artboards for
responsive design in AI to HTML thanks a
lot
made a wonderful map in Illustrator
first we exported it as an image turns
out images resize very poorly oh look at
all small that text is can't read
anything
luckily New York Times came to the
rescue and made a wonderful tool called
AI to HTML which takes your Adobe
Illustrator file and converts it into an
HTML file and what that ends up doing is
we have this nice map here where this is
alt text and when we make it bigger we
make it smaller it resizes with us
unfortunately when we get very very
small this text ends up wrapping this
text and it ends up going off the side
of the page and so it turns out that
when we have different sizes it's not
enough to just automatically resize the
image it we also need to perhaps change
the image to format a little bit
differently so we're gonna do is we're
just going to reposition Los Angeles and
New York City whenever we have a nice
small map so that we can you know we can
have crammed things in a little bit
nicer or not have this terrible wrapping
going on so what we're going to do is go
back to illustrator we don't have to
mess with any of these crazy settings
over here all we need to do is to make a
brand new artboard so I'm gonna use the
artboard tool right here and I'm gonna
click and drag I were working for
somebody I would probably have a size
I'm gunning for but I'm just gonna say
sure 452 pixels looks good to me and I
cut and pasted all the parts in the map
put them into this new artboard I'm
gonna hold down shift while I'm resizing
so that it actually fits on the page
well and now I'm gonna add my text so
Los Angeles oh that word is so long
instead whoops
instead I uh I guess we can call Los
Angeles so we're just going to position
a little bit differently Dallas we can
just reuse it wasn't a big deal
New York City we'll stick it on stick it
on the inside here or yeah we'll stick
it on the inside here that seems a
little bit better
I think even made that map a little bit
bigger let's do that oh great and Lotus
reposition LA I'll reposition Dallas
reposition New York City so we what we
want to have happen is when the user has
a very large screen they'll see this
whole big spread out map and they have a
smaller screen they'll see a nice
condensed map here so just the same as
we did with our initial export we're
going to save and we're gonna do file
scripts ai to HTML your illustrator file
is saved beautiful so if we go into the
actual output folder will see that it
made two different backgrounds which
actually look pretty much the same in
this case but when we refresh things are
a little bit odd we see down here this
is the small version but it's actually
kind of big and then up here we have the
big version that you know they both kind
of stick around so what we need to do is
make it so that as we resize the screen
a large one is replaced with the
hopefully small one in order to figure
out how to do this you have to click
around on the AI th do you know page a
little bit what you have to do is go to
examples and then read read read read
read and then right here it says
multiple artboards for responsive web
pages that's what we're doing responsive
web design is when say a big screen in a
small screen you see slightly different
content and we are using multiple
artboards in order to the big artboard
for big screen small artboard for a
small screen so all we have to do is add
our little resizer script to your web
page so let's do that click resize our
script and we have to add this script
here this is some JavaScript code we
don't have to know what it means all we
need to do is add it to the web page so
our web page is this output file here
this map HTML we need to open this in a
plain text editor we cannot open this in
Word plain text editors could be I'm
gonna use one called Adam that is
available at Adam do I believe yes
they're also ones like textmate sublime
text notepad plus plus there are a lot
of them so what we're gonna do is we're
gonna open up Adam
we're gonna go file open and we're gonna
work our way I'm gonna go desktop
tutorial output and I'm gonna edit this
map dot HTML file now there are all
kinds of code in here do we need to know
what this does no do we need to know
what this resizer script does know all
we need to do is cut and paste this
resizer script
into here give it a save and then go
back to our map refresh and tada our map
changes based on how big our screen is
pretty fun right the only issue is that
if it gets very very very small it will
disappear there are a few ways to get
around this what we are going to do is
we are actually going to add a third
version in for when it's very very small
because I don't think that someone who
has a screen that's about this wide
which is maybe you know 400 pixels or so
needs to see an entire map right the fun
thing about when you're working with
different artboards when you're
exporting in different ways is you don't
have to show the same information the
same way all we changed between this
view and this view was the position of
the labels right so we took the labels
that were on the outside they moved them
a little bit tighter and life was good
but what we can actually do instead is
let's make another artboard so we're
gonna go to the artboard tool we're
gonna make a new line let's only make it
I don't know about 200 pixels wide maybe
so a nice nice small version of it make
a little bit taller though so we're
going to pull in the New York City
bubble here we're gonna pull in the LA
bubble here we're gonna pull in the
Dallas bubble here maybe we can use the
align tool to make them all line up with
one another put them over here we're
gonna label this as New York City
does it fit no we're gonna make that NY
see
we're gonna pull Los Angeles in here Los
Angeles fits okay we're gonna pull
Dallas in at the very bottom so we want
to make sure these are all lined up with
one another great so this is what our
visual is going to look like whenever
it's very small if we were better
designers we'd probably space these out
a little bit more appropriately but I
think everyone will survive if this is
what we publish don't push it a little
bit more to the left to get LA away from
the border there okay so now we're gonna
do the exact same thing we did before
where we do file
well first we save it let me do file
scripts ai to HTML and once again it
spits all of it out first oh no all
three of them have shown up what do we
need oh they're a size R script again so
we're gonna go back hit the resizer
script if you don't remember where it
came from
you go to AIT HTML org you go to
examples then you click resize your
script right here oh no come on back
come on back well I think it's in my
clipboard so I'm okay so you see it's
disappeared from this as mapped out HTML
which we had opened before we're gonna
paste the resizer script in there we're
gonna save it and we are going to
refresh so large size medium size and
smallest size perfect for all of our
responsive designs you can see that
these labels aren't necessarily lining
up how we wanted them to line up but
that is just something that we are going
to have to fight with in our hearts but
if instead of fighting in our hearts we
wanted to fight by typing things what
we're going to do is the first thing we
did with these maps was we set them to
be responsive we set this map to get
bigger and smaller based on how big our
screen was right but now it turns out
that that whole bigger and smaller thing
and it isn't really working very well we
like this one
when it's very small we don't like it
when it's expanded to fill you know the
gap left between this one here and the
smallest size so what we're gonna do is
we're gonna go back up here and we're
going to say responsiveness initially it
was set as fixed and what's fixed means
is this one will this artboard will
always stay the size that we've designed
it at this one will always stay the size
we've designed to that this one will
always stay the size that we've designed
it out so let's do this we're gonna save
it we're gonna do file scripts a HTML
one more time click OK
we're gonna have to put the resizing
script back in there is it in my
clipboard yes save and refresh so as you
can see it the smallest size we get the
really really small one as we get bigger
we get the medium-sized one and as we
get biggest we get the biggest sized one
they don't resize so they always look
shall we say pixel perfect and yeah
they're they're pretty fun time so
usually if you're doing responsive
design and you are feeling lazy you can
just throw one artboard down and you can
say responsiveness dynamic cuz it'll get
bigger though that's smaller you know
there won't be that many tears but if
you're designing kind of exactly across
several different artboards and you put
a lot of thought into how exactly this
wonderful beautiful artboard will look
and this one will look and this one will
look it might make more sense to do
responsiveness fixed so it won't be kind
of stretched out and have your text
aligned at different ways so that is the
way to deal with multiple artboards for
responsive design in AI to HTML thanks a
lot