Its been a while since I redesigned my blog and something I havent talked about is why I decided to use 320 and up as a starting point again. There’s no shortage of CSS frameworks out there ( Twitter Bootstrap, HTML5 Boilerplate, Semantic Grid System and many many more ) but 320 and up remains one of my favourites. Im going to talk about why.
Update: Now that iOS 6 is out and the NDA is no more, Max Firtman has posted an excellent summary of new iPhone 5 and iOS 6 mobile Safari enhancements and regressions. It goes into further detail and mentions features that couldn’t be publicly announced while still under NDA (not that I was, I’m not a registered dev).
Corrections: Although I recommend checking out the above link, I received two corrections via email from Apple. One regarding smart banner documentation and one clarifying css filter support.
Here’s what we know about Mobile Safari in iOS 6 so far, and what it brings to the table for front end developers. I expect there’s more to come in future betas and as people experiment with the current beta more.
Web Inspector via Remote DebuggingThe pre-existing developer tools for iOS are limited to say the least. A console.log is flattened to a single level, without actually presenting the contents. iOS 6 introduces the Safari Web Inspector to both the iPhone and the iPad via the Safari ‘Remote Debugging’ interface.
It implements a similar interface to how the Chrome for Android remote debugging works. Safari remote debugging acts in a similar fashion, such that when you select an item in the Safari desktop inspector, it is highlighted on the iOS device.
Prior to this, the only alternative was embedding Firebug Lite, which while powerful, is not designed for touch screen devices.
As far as I can tell, the old, flawed Developer Console has been removed.
Many thanks to Andrew Harrison for fact checking and screenshots.
<input type=”file”>Finally, it’s here. You can now upload photos and videos from the Photo Library using a regular input element. This was previously only possible via the use of Phonegap etc.
This is a real game changer for mobile apps.
No word yet on if it allows you to capture a new photo. It does.
Real time camera streaming has been confirmed as not supported.
Smart App BannersThe new Smart App Banners are a way of showing Safari users a message indicating that a native app for the website is available in the App Store. While not really a great thing for those of us hoping to move apps back towards the web, it’s still a good experience for the end user. It’s also possible to preserve the page/state/view and send this to the native app. Documentation is available on the Safari Developer Library.
Picture via Wired.
Web Audio APIHow useful this is remains to be seen. Web audio tends to be fairly handicapped, regardless of browser, operating system or device. Microsoft’s HTML5 Cut The Rope game still used Flash to play the sound effects. I truly hope the iOS implementation changes that, but I’m also a realist.
CSS FiltersAccording to the Can I Use report, these are only supported in Chrome 18+ with a -webkit- prefix. CSS Filters are also supported in Safari 6, on Mac OS X Lion and Mountain Lion (10.7 and 10.8, respectively).
Interesting by itself, but with desktop browsers beginning to land support for a full screen API - can this be triggered progammatically?
requestAnimationFrameThis has landed, albeit with a webkit prefix.
You should be using the Paul Irish polyfill anyway.
App Cache Upped from 5MB to 25MBI believe it used to show you a dialog asking for more if you exceeded the 5MB limit.
JPEG Downsampling Ceiling LiftedJPEG downsampling no longer occurs at 2MP, and instead kicks in around the 5MP on supported devices. The iPhone 3GS and 4th gen iPod touch remain at 2MP. That’s if your carrier isn’t downsampling for you (AT&T, Optus in Australia).
Faster JavaScript PerformanceThis happens every year, so it’s not really news. Nitro was previously brought to home screen apps giving them a massive performance boost. Nitro hasn’t yet been brought across to UIWebViews, one of the many reasons that the Facebook app is a steaming pile of shit. Maybe future iOS 6 betas will bring Nitro to UIWebViews? Maybe it’s already in iOS 6?
Guess the Stars ★★☆ is a little game demo using some 3D perspective, animation, reflections and filters. They are just flat images from IMDb that get rendered with CSS3 into DVD cases. Browser support is still a bit limited.
Another interesting thing.. the :target pseudo class. Notice that when you click on a movie it stays in that state. You can also use the back button and deep linking works out of the box. Copy/Paste the URL into a new window and it will open at the same state all without any JavaScript.
See the demo.
CarveMe tries to simulate an inset text-shadow effect with CSS3.
color: transparent;
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;
Note that it doesn’t work well on all backgrounds and you might have to adjust the colors. Also, it’s not easy to add a fallback, so make sure you use Modernizr.
See the demo.
400 metres from the summit of the Stelvio in the 2005 edition of the Giro d’Italia. Snow would shut the road the day after, but with the help of snow ploughs the road was open to race this day. Passo dello Stelvio will feature in stage 20 of this year’s Giro. Photo was taken by Dan Moore and found over on Cycling Tips.
Using web fonts and @font-face as a way to serve icons to web pages and apps is a very useful technique that allows designers to serve icons that can easily be easily recoloured and scaled. They also have the advantage of being easier to add and change, as you don’t have to create new sprites and CSS to add new icons.
Icon fonts such as Font Awesome, Modern Pictograms and Pictos are great sets of pre-made icons that should cover most use-cases. I’ve tried making my own with Inkscape and Font Squirrel but gave up after wanting to throw myself off a roof. You really need pro font-creation software and experience in type design, hinting etc. to make them yourself.
One issue, as mentioned here is sizing at small sizes - font-smoothing and anti-aliasing can mess up thin strokes and lines. Font hinting is the main solution to this, but prompted by @jonathanheron I’d thought I’d take a look at how -webkit-font-smoothing: affects rendering.
The above test is using Modern Pictograms and Safari. subpixel-antialiased is too blurry, antialiased is too thin. If anyone can find a goldilocks solution that would be great. (note: I tried adding a text-shadow but it didn’t seem to have any effect.
However, if you’ve already changed the default font-smoothing then changing it for web font icons might be worth investigating.
(edit: typo. Also, apologies to mobile viewers for the fixed image size - scaling it down would affect the illustration)
Lovely London World Cup picture gallery from ilsoigneur
This is a brilliant way to get JS support for media queries. CSS3 to the rescue!
Implementing responsive design can take more than just moving UI elements around, sometimes you want to change functionality of the app as well. This gets us where we can do that pretty reliably.
