

Cloning the UI of iOS 7 with HTML, CSS and JavaScript - c2prods
http://c2prods.com/web/2013/cloning-the-ui-of-ios-7-with-html-css-and-javascript/

======
apike
This makes a nice demo and highlights that in some ways, iOS 7 is easier to
reproduce using web technology than iOS 6 was.

> There’s been a lot of controversy recently on whether Javascript could
> compete with native or not, both in terms of performance and of look’n’feel.

On the other hand, the controversially difficult to reproduce parts of iOS 7
aren't part of this demo. The real-time blur, the zooming "z-axis" navigation,
the 3D animations, and the 60fps scrubbable gestures for going back in the
navigation stack aren't here.

While those are all "bonus effects," they're also a lot of what makes iOS 7
delightful to use.

~~~
c2prods
Actually, I don't think JS can really compete with native, that's not the
point I'm trying to make in this article. Nonetheless, webapps can be an
acceptable tradeoff for small apps, that are not too resource-intensive. In
such cases, I think HTML, CSS and JS can give good enough results.

~~~
SiVal
Since iOS6 and iOS7 have different looks and feels, it is apparent that
rigidly adhering to the one true native look and feel isn't mandatory. I'll
bet HTML5 can get closer to either iOS version than they are to each other and
so close that I, an iPhone user, wouldn't notice the difference for the kind
of app that doesn't require native hardware access. I'll bet that someone will
produce an HTML5 mobile UI that I'll like more than I'll like iOS7. I'll bet
that this won't be the last iOS UI overhaul, and that some future Apple TV
will have yet another "native look and feel" and that iPhone owners will use
their TVs and Kindles and smart refrigerators and countless Web apps and
eventually lose track of what "the native look and feel of an iPhone" looks
and feels like.

------
jeena
Why don't they use proper HTML5 instead of this tag soup?

[https://gist.github.com/jeena/f62232da7d6ac964d403](https://gist.github.com/jeena/f62232da7d6ac964d403)

The rest is a matter of CSS.

[Edit:] moved the code to a gist

~~~
c2prods
You're entirely right. I'm just used to the old way, but I guess I'm a bit of
an eccentric. I'll try to update the repo asap. (Anyway, I think the HTML
architecture could be streamlined, my point was more to demonstrate the css
possibilities)

~~~
jeena
And you did a really great job with the CSS. But I know that many young people
who are starting with HTML/CSS will be hugely impressed by your examples and
will try to copy them. And because they see the div-soup in your examples they
will assume that this is how you're supposed to write modern HTML. In the end
they see the most modern look in the examples, so I wouldn't even blame them
for thinking like that.

It would be sad if they learned to write non-semantic HTML and I think we all
who write examples on the net should try to write great examples :)

And in fact we should do it with all the HTML which is online because we all
learned HTML and CSS from right click "View Page Source" :D

~~~
tuxracer
Note that opinions differ on this. Personally I think semantic HTML is nothing
but meeting-bait. If you try to be diligent about it you end up in discussions
and meetings around whether a certain element should be a figcaption tag
should be used or aside etc... And at the end of these types of discussions,
regardless of the outcome, nothing that has any actual effect has been
changed. It will make zero practical difference whether you use semantic HTML
or not. The only thing seemingly affected are imaginary mobile devices that
render <nav> differently than <div> or imaginary screen readers that can't
read text unless it's in a <figcaption> tag.

~~~
jeena
It kind of sounds like saying: "Why should I learn math, I will never use it
anyway." It might be true, but that is not a good excuse for not learning it.
And it is not like using semantic HTML is in any way more work or something,
it at least has the benefit of being easier to read and thus maintain.

~~~
tuxracer
That's very different. Because there are circumstances where not knowing or
applying math is a barrier to accomplishing something. Saying "Why should I
learn math, I will never use it anyway." means you're banking on the odds that
you will never run into those circumstances.

However when it comes to semantic HTML there is no circumstance where you are
unable to move forward because you used <div> instead of <figcaption>.

In fact thanks to the sometimes ambiguous descriptions of which semantic tag
is appropriate you may find you used the wrong semantic tag which is arguably
worse than not using a semantic tag at all.

And at the end of the day after carefully cross referencing and/or memorizing
which semantic tag to use throughout your markup zero real world, practical
effect has been gained. Only theoretical gains and memorization for
memorization's sake.

~~~
jeena
It sounds like to be save one should only use <div> and <span> tags, style
them with CSS and forget about semantics?

It is obvious to me that this is the wrong approach. And I have never said he
should use <figcaption> I said he should use appropriate HTML5 tags. If
something is obviously a header, use <header> if not, don't. But building
everything out of <div>s like it was in his first example code is just making
it more difficult to read, there is no gain in just using <div> for
everything.

~~~
tuxracer
"It sounds like to be save one should only use <div> and <span> tags, style
them with CSS and forget about semantics?"

Yeah exactly.

"It is obvious to me that this is the wrong approach."

Semantic HTML essentially boils down to "You should because you should."

"I said he should use appropriate HTML5 tags."

To what practical benefit aside from personal aesthetic preference?

"there is no gain in just using <div> for everything"

The gain is not having to memorize or reference which semantic tag goes where,
nor having to go back and refactor or maintain semantic tags.

------
SunboX
[https://beta.icloud.com](https://beta.icloud.com) uses new "iOS7" layout,
too. Some styles could be taken from there ;)

~~~
c2prods
There's a lot of interesting things indeed! They achieve a nice blur effect,
even though I suppose it would be way too heave for mobile.

~~~
turval
If you inspect the page It appears they are generating a blurred version of
the png on the fly in js. The source of the blurred version of the image is
equal to "data:image/png;base64,iVBOR…7WkYklgQdZAAAAABJRU5ErkJggg==" while the
none blurred version is
[https://beta.icloud.com/system/cloudos/1SBeta.102619/en-
us/s...](https://beta.icloud.com/system/cloudos/1SBeta.102619/en-
us/source/resources/images/mail_icon.png)

------
flying_d
Check out [http://www.appgyver.com/steroids](http://www.appgyver.com/steroids)
It's still in it's early stages but looks very promising. It gives you native
navigation and transitions, amongst other many other goodies.

~~~
c2prods
Interesting indeed!

------
alexfringes
Nice attention to detail in this. By the way, it seems like the new view's
shadow in the original actually loses opacity as that view leaves the screen.
Did you look around for the blur effect at all? You mentioned it but any luck
beyond that? I've seen some attempts but nothing useful.

~~~
madeofpalk
Yeah, the iOS 7 'frosted glass translucency is impossible to achieve with CSS.
Everyone points to filter: blur(), but that only blurs the element, and not
items behind it.

The only thing I could come up with was using something like HTML2Canvas[1] to
render a portion of the DOM in a canvas/image, position that exactly on top,
and then blur that. But all that seems quite convoluted and heavy, so decided
not to invest any energy into it.

[1]:
[https://github.com/niklasvh/html2canvas](https://github.com/niklasvh/html2canvas)

~~~
meerita
You can blur everything, you just need to point the elements.

------
yesimahuman
Fantastic post, thanks for sharing! I'm invested pretty heavily in HTML5 on
mobile and your demo just reassures me this is the future (it feels great!). I
hope you don't mind me using some of this stuff for a new project I'm working
on.

~~~
c2prods
Thanks! No problem, you can use it for other projects, the code is on github.

------
cheeaun
This is a very good job. I plan to iOS7-ify my HackerWeb app once iOS7 is
released next month, so your article would be helpful to me :)

~~~
josteink
As someone using that app, I would love the option to keep the old interface.

Having web-apps trying to mimick a platform I don't use just feels wrong. In
much the same way as those fake Windows-UI images ("Scan complete. 3 viruses
found!") used all over the internet trying to trick noobs into installing
malware.

~~~
cheeaun
The old interface will stay for older versions of iOS. In fact, I'm already
doing that for iOS 6 and iOS 5, which both looks slightly different.

~~~
TazeTSchnitzel
Could you make it possible to use the "wrong" interface? I'd love to try the
iOS look on my Android phone

~~~
cheeaun
You can opt-in to other themes here
[http://cheeaun.github.io/hackerweb/options.html](http://cheeaun.github.io/hackerweb/options.html)
:)

~~~
TazeTSchnitzel
Thanks!

------
chucknelson
Pretty cool. I know this is more of a demonstration of simulating the iOS 7
UI, but I'm assuming to use this for something you'd want the URLs to update
as you move through an app?

I may have missed references to this limitation, again, if it even matters for
the purpose of the post.

~~~
c2prods
I've actually designed it with a Phonegap integration in mind, to be honest. I
think it's possible but you'd probably have to add a great deal of complexity
to the code. I'm not familiar with Backbone.js, but may be you can use it to
implement routing?

------
solistice
Uhmmm, your live demo just selfdestructed when I clicked on it. Any chance it
doesn't work in firefox?

~~~
c2prods
I haven't tested it on FF... I really developed it with only iOS in mind, so
many CSS properties are prefixed and there might be other bugs...

~~~
solistice
Whenever I click on anything it layers the new elements behind the other ones
and the whole interface becomes unresponsive. It works for others though, and
it's pretty and iOSey, so props on that.

------
madeofpalk
Great writeup. I just spent a significant amount of time trying to perfect a
CSS UINavigationBar, and still not happy with it

------
quadratini
please properly indent the code snippents

~~~
c2prods
Ooops, I don't know why it went so wrong, I corrected it.

------
TeeWEE
IOS comes with an (new) UI -> HTML folks clone it -> "Look its cool bro".

