출처 :Tomomi Imura on Mobile Web, Future of CSS
(해당 동영상 및 MP3를 보시려면 위 링크로 이동하세요.)
1.We are here at Craft Con 2014 in Budapest, I’m sitting here with Tomomi
Imura, so Tomomi who are you?
Hi, I’m a frontend
web developer and I’m focusing more on the UX side but, I would say I’m more
focused on mobile because always I had a passion in mobile and I’ve been
working in mobile industries for a while, the companies including like Yahoo,
but Yahoo's mobile team and I use to be a developer at Palm WebOS and I worked
at Nokia as well, so I’ve been in the mobile industry for a while.
2.And you talk a lot about UX but also about the web, in recent times
people have been saying that the Mobile web is dead, do you say that they talk
nonsense or do you are agree, what is the situation, what do you think?
In some way I agree,
I actually I would say “Mobile is dead” is a sensational title that grabs
people’s attention, so if we have a news blog that is a really cool thing to
say because people react with “What?”, people wants to get attention, so I
don’t really think it’s dead of course, it’s not dead, it’s there, but in sense
the reason I agree with is because we don’t, we shouldn’t really separate the
mobile web from the web because the web is web, so actually like back in mid
2000 I was in Yahoo Mobile and back in the time mobile web was the thing, like
mobile web you had heard of, we’ve seen WAP and then we had WML languages as
well, but those days are over, now the mobile browsers are just like desktop
browsers, we can write HTML 5 I would say and it works with both. So when we
are talking about writing for the web that we expect is that it works on any
device, mobile, desktop, doesn’t matter.
Werner: But there is still a slight difference because the mobile
devices, as diverse as they are, they have certain sensors that the desktop
doesn’t have, you know I can't pick up my desktop and shake it, so there are
still UX differences I guess.
Yes, so the interesting thing is that mobile has its own, I would say, a
different user experience because mobile to be mobile we take mobile devices
with us, so it makes more sense that, let’s say, like a location where you are
saying like motion of the device, something that we can do with the device
which we don’t do on the desktop when we are sitting at a desk, so working on
the mobile web as a developer we can take advantage working on mobile devices
such as using all the sensors, so I was talking about this earlier at the
conference as well, so we have the device APIs to access that hardware; mobile
is mobile, it's a different experience.
3.You mentioned device APIs, so at this point in 2014, how stable are they,
what do they offer, it’s just accelerometers or Geolocation, what do we have?
Yes, and
Geolocation is one of the stable one, so the most of browsers already have
support, so you can do this to access the user's data so accessing GPS or cell
id to get the user location, that is stable. And device orientation event is
another thing that we can get information of motion of that device itself, so
when it’s tilted we know exactly how many degrees it's moved, and has been
supported wonderfully except I think Internet Explorer. And all of that
interesting APIs including vibration APIs and actually yes, the vibration API
was supported only by Mozilla, I mean Firefox, but now is supported by Chrome,
Chrome actually Chrome 30 as well, so yes, Google is catching up and so many
other APIs including like actually ambient light APIs, like a battery APIs,
currently only supported by Firefox. So there are a lot of other browser
vendors that need to catch up and I’m hopeful we'll see this happening this
year in 2014.
4.You mentioned Firefox, is that Firefox OS or is that generally Firefox?
I do have couple
Firefox OS devices, so I can see that Mozilla is clearly pushing those
standards really because they have Firefox always, but actually Firefox as a
browser is wonderful, it works as well as the Firefox OS, so it does works fine
in Android phones.
Werner: But in Firefox OS obviously they need these API’s because
you can only program them in JavaScript.
Right, so it looks like they are really trying to set the standard because they
want it and if it’s not available as a W3C Standard, they are the ones who are
usually proposing it to the standard body to making happen, so I really like to
see what they are doing.
5.We talked about mobile devices; so one distinguishing factor of mobile
devices is they are coming in different form factors and I think for that the
keyword is responsive design. Can you gives us an idea what responsive design
is. Is it an UX method, is it a technological method, what is it?
Yes, with
responsive design the idea is we try to write once, not a separate mobile site
like m.whatever.com and such using one URL and that should work, seamlessly
across the devices, because you know, we should not discriminate users, we
don’t know, users depend on mobile phones, tablets, a desktop, we don’t know,
so we have to keep the best possible experience for any users we have and so
far when we are talking about responsive design that’s pretty much all the
devices we are seeing, but in future we might have, I don’t know about if TV is
going to be big again, I know in the 90’s there was a Web TV, looks like it
failed, no one is browsing the web [on TVs].
I would say it’s not really easy to browse web on TV yet but you never know
what will happen and where about and now we have Pebbles, Fitbits, etc and they
don’t come with Web browsers, but Google Glass does have a browser, so now that
will be another challenge that web developers have about how we support those
wearable devices. Maybe Internet of things would be the next, again that might
not come with browsers, so the experience is different, we don’t know yet, so
we have to really think ahead and responsive web to be really responsive to
anything, so that’s the challenge we have.
6.What web technologies help me with responsive design, is it CSS, how do I
do this?
So mostly I’d say
CSS because we have CSS Media Queries and that is a way we can give different
experiences, I mean different experiences means UI using CSS to certain, let’s
say, browser window height, or maybe not height but browser width or device width,
orientation because when we are using a tablet we can switch orientation
around, so CSS Media Query is key.
7.How do media queries work, is it just a form factor or can I say “Google
Glass” or something like that, how does that work?
That is really
another challenging thing because we don’t really have a definite answer, we
are trying to find something like a breakpoint, you know like a which, mostly
we are doing with the devices width, like the iPad has a certain width, and
other devices, but everything is different, so people tend to do get the width
of the iPad and such popular devices to support by certain, by size I would
say, but many times it doesn’t work out, because we are just guessing what
users device's size is, so I would say that’s pretty challenging and we are
trying not to use, I mean we are trying not to differentiate by form factors
too much because it’s kind of like using user agent sniffing which is a big
no-no for developers to do because user agent fails, we don’t exactly get the
correct information from this, so we have to make it as generic as possible, so
people are using common width of the device in a browser but still that could
depend on your design.
8.Talking about CSS, what are some of the exciting new features that you
are looking forward to in CSS, what are some of the features that might change
the nature of CSS, make it easier to use?
Currently so many
developers depend on preprocessors such as Sass or Less because there are so
many features that we want to use that are missing from the current web
standard. First of all we have so many different browsers means we need to have
a browser specific prefix, so if we want to support new features like animations,
we have to add browser prefix, the vendor prefix for each one of them and that
can be really long, so we want to get rid of those and by using preprocessor.
Or I would say variables, if we want to set some colors to certain variables we
can reuse the same variable or we don’t have to keep changing each time in
design I make changes, right? So this is not doable yet with current CSS but
now we have a new standard that is coming, there is a proposal about CSS
variables and other things that close a gap in between current standard and
something that preprocessors do, so that would be really wonderful news to us.
9.You mentioned Sass and Less, so with these new standards would those go
away those preprocessors or do you think they still offer some utility?
I think it will
stay but once standards, like CSS standard catches up, this is something
interesting because like maybe few years ago everybody was using jQuery, but
then what the jQuery guys have done to the web standard is actually wonderful,
I mean you use to have a $ but now we have a querySelector (method) as a
standard, so something like this once [the features ] make it into the standard
maybe we are going to depend and less and less on Less, I don’t try to joke
about it, but yes, that’s what I think and that will be actually great news
because it’s not like you know we are ditching them, it’s more like Sass and
Less guys have contributed so much to make the standards better, so I think
that will be great if it happens.
Werner: They basically helped design the standard by providing a
useful workaround.
I think so, I would say so.
Werner: That happens a lot in the web, as you say, with jQuery and
all these ideas, it’s a very communal I guess design process.
I really think web is free to the community work and everyone of us as a
developer to participate, doesn’t matter if we are actually officially W3C
member or not, we can always express our opinions.
10.Since you mention Less and Sass, what do you think of other languages
that compile to JavaScript, so when you write code do you write JavaScript, do
you write CoffeeScript, do you write Dart?
I can’t really say
much because I haven’t really used CoffeeScript, so when I use JavaScript it’s
JavaScript and it’s yes, I can’t really see if you know what I mean, I’m not
saying I can’t trust how it’s get it converted and so, but I just simply haven't
tried.
Werner: You still prefer JavaScript.
Yes, just my personal preference.
Werner: To wrap up, a few months ago, years ago you created
something involving HTTP and cats, so you bring the best two thing on the web
together, what did you do there.
So really Internet is for cats, is what everybody says, so I’m a big cat
person, I do have a cat, I used to have two but now only have one, but anyway
I’m a big cat lady and I love Internet as well so of course you want to bring
two things together, and I don’t know how I got the idea but you know of course
HTTP status errors are just something that we see all the time, maybe daily, so
one day I just decide to combine them all, I never expected that was going to
be so successful that gave me like 15 minutes of fame. Interesting phenomenon
people do like cats.
Werner: If you want to promote something, use cats.
Just use cats, it’s my takeaway, cats solve everything.
Werner: It’s a great way to end and thank you very much Tomomi!
Thank you for having me!
