I use Safari as my primary development browser and I was working on a site recently which had a multi-step form which need to have the whole interface usable via the keyboard (ok, realistically all sites should be able to work this way but for this site it was a particular focus).
Hide WordPress Toolbar for a specific page template
For a project I was working on recently I was using a simplified version of the single page template in order to load specific pieces of content into iframes within a plugin page in the WordPress Admin. This was so I could preview the arrangement of the content in the page layout using a custom layout tool I created.
Continue reading “Hide WordPress Toolbar for a specific page template“
Cross-platform, cross-browser website testing with BrowserStack
Like many web design / developers I’ve made use of virtualisation applications like VirtualBox, Parallels Desktop and VMWare Fusion for Mac in order to test websites in the various versions of Internet Explorer. Using these apps requires buying the relevant Windows licences for the various virtual machines and also the overhead of keeping these current with the latest OS updates and browser / plugin updates too.
However, I recently did a fresh install of OSX on my Mac and decided just to remove all of the virtual machines due to the amount of space they used and had every intention of installing them all fresh and continuing to work that way. But due to project demands at work I had no time to do it and decided to look around for alternative ways to do some testing as I needed to do it for a project. I had previously used Adobe’s BrowserLab tool for quick static testing for layout issues in browsers but I needed something that let me browse sites and actually interact with the pages, and that’s where BrowserStack fits the bill perfectly.
How does BrowserStack work?
BrowserStack lets you connect to browsers running in virtual machines but directly through your browser, a bit like connecting to a machine via remote desktop. There are basically three steps to testing a site:
1.) Select the OS version you want:
2.) Choose from the available web browsers from that platform:
3.) Enter the url of the site you want to test and hit the "Start testing" button:
The connection is then made to the virtual machine and rendered via the Flash plugin in your browser allowing you to interact with the site remotely, you can then easily choose from different OS and / or browser versions and then hit the "Update" button in the left hand menu and it will automatically grab the current url you are browsing and open that using your desired selection.
This how the site is viewed within BrowserStack:
Overall it’s just a really easy to use system and lets you switch between different OS / browser variations much more quickly and with much less system overhead than using locally installed virtual machines.
It’s worth weighing up and pointing out some of the pros and cons of BrowserStack, there are few issues that might still cause you to choose running local virtual machines instead:
Pros:
- You can run any OS you want on there including Win XP, Win 7, Win 8, OSX 10.6 Snow Leopard, OSX 10.7 Lion, OSX 10.8 Mountain Lion as well as mobile tablet OS / Browsers iOS, Android and Opera.
- Quick to load up OS / Browser options.
- Low overhead on your computer compared to running one or more VMs natively.
- Developer tools such as FireBug installed on all browsers.
- No new OS licences to purchase.
- No OS updates or browser update hassles.
- Low cost (from $19 per month for single user)
Cons
- No Linux OS / Browser options.
- You only get one browser option at a time, so if you’re using Win 7 with IE9 and want to test Firefox you need to select Firefox from the browser list and hit "Update" to initialise a fresh connection with only that browser.
- Slow refresh rate for moving / animated content so it’s not great if you want to preview how well videos or animations run on your desired test platform. This is probably the biggest reason you may wish to test on local VMs instead.
So, that’s a basic overview of BrowserStack, but the best thing to do of course is try it yourself using the free trial which gives you 30 minutes (non-consecutive) to try out the full system.
Remotely debugging mobile devices: Remote web inspection in Safari and iOS6
It doesn’t take a genius to note that mobile devices are pretty much overtaking the web, and that a huge amount of people – the majority depending on the statistics you pay attention to – are accessing the web via a mobile device such as an iPhone, iPad or other smartphone / tablet.
As such there has been a huge buzz about responsive design and how to make sites adapt well between a range of screen sizes and resolutions, and moving away from the concept of a fixed size of screen such as the ubiquitous 960 pixel grid framework. One of the biggest challenges in this new era of web design and development has been the lack of good tools to aid you in the process of creating responsive, adaptive websites.
Media Queries and Responsive Design
The ability to work in code and create media queries to handle various device widths and related styles has been possible for a while, but it can be a bit mind-melting trying to keep track of all of this and to test as you work through the development process. Fortunately we are now beginning to see a range of tools to help you develop responsive sites, one of the most recent being Adobe’s new Edge Reflow tool which is an app that lets you visually adjust the viewport and tweak the CSS of various media queries. It’s a simple, focused app that lets you resize the viewport and tweak the styles as you go. At the time of writing it hasn’t been released yet but when I get a chance I will definitely be checking it out and writing something about it.
Remotely Debugging Code on Mobile Devices
Another challenge with working with mobile devices is that you really need to test on actual mobile devices to get an understanding of the true behaviour of them. Although you can set the width of your desktop browser to be the same as that of an iPhone it won’t necessarily behave exactly the same way due to the differences in the way the browsers handle CSS or JavaScript.
One of the difficulties in testing on devices themselves is that it’s not very easy to debug when things don’t work as expected. On a desktop browser such as Safari you can use the Web Inspector to see the live code as you interact with it and also see any JavaScript errors that are triggered, but on a mobile browser there is often little available to help you detect the errors.
Thankfully there are now tools being developed to allow remote access to the code running on the device itself, Adobe developed a tool codenamed ‘Shadow’ (now formally released as Edge Inspect) which works by providing apps for various mobile devices such as iPhone, iPad, Android phones and tablets.
With these apps installed on your devices you then run a desktop app on your computer as well as an extension in Google Chrome. You can then view websites in Chrome and they will be simultaneously displayed on the mobile devices running the apps, but the key feature is that you can remotely inspect the HTML, CSS and JavaScript running in the app on those devices. A really excellent tool.
Remotely Debugging in Safari
Adobe Edge Inspect (formerly Shadow) is a great tool, but what if, like me, you prefer to work in desktop Safari as your main browser and don’t want to or can’t use Chrome to test sites? In case anyone thinks this is just down to a matter of personal preference of browser I can give a legitimate example of why having to use Chrome can be a problem – Chrome’s in-built support for Flash gets in the way of testing content that is intended as fallback or alternative content on the desktop.
Fortunately the recent release of iOS6 offers a new feature that enables remote web inspection of mobile Safari on iPhone or iPad.
To make use of it you need to go into the ‘Settings’ app on your iOS device, and drill down into ‘Safari->Advanced’ where you’ll find a new toggle button for ‘Web inspector’, (this replaces the old ‘Debug’ option in mobile Safari which really offered little functionality).
Switch this on and you’ll see a small paragraph of text appearing which explains that you need to connect your device to your computer with a cable for this feature to work.
Once you’ve enabled Web Inspector on your iOS device(s) then you should find them listed in the Develop menu in Safari on your computer, it should looks something like this:
You can select the device and then it opens up a menu showing the available applications that web inspector can open. Note that you need to have mobile Safari open on your iOS device for any sites to be listed in the menu, if they’re not open then you’ll get a message saying ‘No Inspectable Applications’.
Once you select a site from the menu then the familiar Web Inspector window in Safari on your computer will open, the difference is that you are seeing the HTML, CSS and JavaScript from your iOS device. You can then browse around and interact with the site on your iOS device and inspect all of the changes occurring right in Web Inspector. Here’s a view of the HTML from a site on my iPhone:
Debugging via the console remotely
Just as with the ‘regular’ web inspector you can interact, view and update HTML and CSS and then see these temporary tweaks appear right on your iOS device. The main benefit in debugging for me has been in dealing with JavaScript / jQuery code, I can make use of console.log messages and debug via the console just as I would when working on my computer:
In a recent jQuery mobile based site I was developing I encountered code that was failing in mobile Safari but working fine in Safari on my Mac – exactly the kind of situation I mentioned earlier in this article where code is handled differently in mobile Safari. But thanks to this new remote web inspector functionality I was able to easily add some console messages and figure out what was going on and adjust the code to work around the problem.
A Great Solution for iOS Web Development and Testing
iOS6’s remote web inspection functionality is definitely a huge improvement if you are making sites that you need to test on iOS devices. With the increase in Android-based devices such as Google’s Nexus 7 and Amazon’s Kindle Fire tablets you will of course need to test on other devices besides iPhones and iPads. So tools like Adobe’s Edge Inspect are definitely something you will need to make use of too for testing across the various platforms and devices, but the simplicity of this iOS-specific testing workflow is very easy to set up and work with. A definite two-thumbs up from me!
I’m going to take a look at some of the other tools available to aid in the contemporary web development workflow of responsive, mobile-friendly design and write some more posts about them soon. In particular an updated look at Adobe’s Edge Animate tool and also a look at the Edge Reflow tool once it has been released.
How to install an SSL certificate on Plesk 9.5.4 (without going completely nuts)
I just had to set up an SSL certificate for a client site and encountered really poor documentation trying to get it up and running. Whether the documentation was just presuming some other prior knowledge that I didn’t have I’m not sure, but I thought I’d document what I did to resolve it. If nothing else I can come back to this myself in future to remind myself but perhaps it will be of use to someone else.
Server configuration & SSL Certificate:
My server is a VPS running Plesk 9.5.4, the SSL certificate I was installing in this case was a GeoTrust QuickSSL Premium certificate. I don’t think there will be too much difference with other certificate providers, however the installation process in Plesk is quite specific so these instructions won’t necessarily be that helpful if you’re not using Plesk.
Instructions
The instructions provided for installing the certificate can be found in a PDF document linked here, simplified they basically say this:
- Go to your domain.
- Under ‘Additional Tools’, click ‘SSL Certificates’, add a certificate entry.
- Edit the certificate entry you just made, browse to the supplied certificate file in the ‘Certificate’ file field.
- Go to ‘Web Hosting Settings’ for your domain, select the certificate from the drop down, enable SSL support on the domain, click OK.
So, following those steps should get you up and running with SSL on your domain. However, one small difference for me was that the supplied SSL Certificate didn’t come as a text file, it was simply in the contents of an email so I had to carefully copy and paste this into a text field on the certificate page instead. Not a huge deal, but given that you have to be careful to paste all of it in it’s odd that it’s not mentioned in these instructions.
Not so fast…
Following the instructions before seemed to work at first, I tested it in various browsers and the certificate seemed to be accepted fine. Except in Firefox on Mac when I tried to access a secure page it showed me the following message:
The certificate is not trusted because no issuer chain was provided.
[Error code: sec_error_unknown_issuer]
A bit of Google searching came up with some answers, it seems that Firefox (on Mac at least) objects to there being no Trusted Root and Intermediate CA certificates. Who knew??!!! Certainly not me as there was no mention of this in any of the instructions provided!
Installing Trusted Root and Intermediate CA Certificates
GeoTrust have a page with installation instructions on how to install an SSL certificate on Plesk, funnily enough they state that you require the Trusted Root and Intermediate CA certificates (Why wasn’t this included in the previous PDF instructions? Who knows…). Here’s the link to this page (I know it refers to Plesk 9.2 but it worked fine for me on Plesk 9.5.4):
GeoTrust Support: Install certificate on Plesk 9.2
Follow the instructions on that page and you’ll be able to get your SSL certificate up and running. It’s important to make sure you download the right version of Trusted Root and Intermediate CA for the type of SSL Certificate you’ve installed, so double-check which one you’re getting.
The only issue I encountered following those instructions was that when I submitted all the files to add the certificates that it showed the following warning in Plesk:
Warning: the CA certificate does not sign the certificate.
However, I found that if you go out of the certificate editing view in Plesk and go back in that the error was no longer shown. I went and tested the page in Firefox and it was now working correctly so I’m just going to ignore that error as it seems to only be a temporary issue.
I hope this helps someone out, it took me way, way longer than anticipated to get this all set up, but hopefully it’ll be easier next time around :)
Review: Adobe Dreamweaver CS5
Adobe have just announced the new version of their Creative Suite software, CS5 adds a whole range of new features across the whole range of their applications.
As a web designer / developer it’s the updates to Dreamweaver CS5 that I’m most interested in. I’ve used Dreamweaver as my main development environment for years even though I’ve used it in a very code oriented way and haven’t relied much on the Design view mode in the application.;
Part of the reason I haven’t relied on the Design view aspect is that historically it was pretty poor at rendering more up to date HTML / CSS techniques. It was also unable to render the custom PHP code used in my own PHP applications or in any other PHP based CMS apps like WordPress, Drupal etc.;
Dreamweaver CS4 did bring some improvements with the addition of the WebKit framework as the rendering engine for Design view and Live view which solved a lot of the HTML / CSS rendering issues and added support for many of the CSS features that WebKit supports.
Improved PHP Code Hinting and Introspection, Live View
Dreamweaver CS5 takes those steps a good deal further and now adds greatly improved PHP Code Hinting which can discover your own PHP functions and classes as well as those in CMS frameworks WordPress, Drupal and Joomla. The major benefit of this for the Design view and Live view is that instead of a jumbled mess of un-renderable PHP and HTML code you get the actual site running right inside Dreamweaver.
When you combine this with the new Inspect mode you get the ability to inspect elements on your page and see the CSS properties used, it’s very similar to some of the features offered by the Firebug add-on for Firefox or Web Inspector inside Safari.
The combination of these features together make it a huge leap forward for code-based designer / developers like myself. If you’ve previously been put off by the rendering aspect of Dreamweaver before then it’s definitely worth checking out again.
What about HTML5, CSS3, Web font support?
There’s been a lot of noise about HTML5, CSS3 and Web Fonts (@font-face) in recent months, not least because of the prominent debate over Flash support on iPhone OS devices. A lot of people might expect Dreamweaver to add support for HTML5 and CSS3, however, at first glance you might be a bit disappointed.
David Powers over on the FoundationPHP blog wrote a great writeup of Dreamweaver CS5 in which he makes a valid point about the lack of prominent support for HTML5 and CSS3. The HTML5 and CSS3 standards are still evolving so it’s difficult for any IDE to add support for them without the risk of something changing or breaking, especially with the HTML5 standard.
Dreamweaver CS5 does however offer support for using the HTML5 doctype for your documents, also the WebKit framework used in Design view and Live view will also render many of the CSS3 features that the WebKit framework supports, so if you’re writing code by hand then you can still use and preview many of these CSS properties.
(The screenshot above shows https://qreate.co.uk viewed right inside Dreamweaver’s Live View, note the TypeKit fonts rendering happily inside Dreamweaver’s WebKit based Live view).
Web Fonts are still a hot potato in many ways so as yet there is no direct support for adding those within Dreamweaver, but again WebKit will render them so adding the @font-face code by hand will get you there.
The good news for CSS3 and Font-face etc is that Dreamweaver can be extended very easily to add support for, even better news is that I have already written a couple of Extensions for Dreamweaver which can be downloaded for free from the Dreamweaver Exchange, you can also read a bit more about them on the Projects page of this site.
I’m hoping to write on to add support for HTML5 tags too, with these extensions you’ll get code hinting support for adding these into your code. Please try them out and give me feedback as to how they can be improved and I’ll see what I can do to make them better. David Powers has also written an extension for adding / converting RGBa colour values too which is another handy tool, you can download it and other useful DW extensions from his Extensions and Tools page.
Improved Subversion support
Subversion version control support was added with Dreamweaver CS4, however I wasn’t very keen on how it was implemented and it lacked many features so I’ve continued to use alternative standalone apps for managing version control on OSX. Subversion support has been improved in CS5 though so it looks to be a more viable option now, I will try and give it a fresh comparison to see how it compares to the standalone alternatives now. One major difference in CS5’s support I believe is that Subversion can be upgraded without Dreamweaver itself having to be updated so this will help keep it more up to date.
BrowserLab integration
I’ve written about BrowserLab before, BrowserLab is a great way to test web pages in different browsers and Adobe has continued to improve it by adding more target browsers to the list as well as the ability to save local copies of the rendered previews as jpeg images.
The integration of BrowserLab in CS5 along with all of the improved Live view rendering improvements makes for a great development environment. BrowserLab has been a free service so far as part of Adobe’s Labs beta program, it will however ultimately be a paid service but purchasers of CS5 software will get included access for a year. Standalone pricing has yet to be announced.
Recommended upgrade
All in all Dreamweaver CS5 is a great step forward, it’s definitely got some genuinely useful improvements to offer my own code-centric workflow especially that I’m now using WordPress for many projects. I’d definitely recommend giving it another look if you haven’t been using Dreamweaver for any of the reasons I’d previously mentioned.
Quick Review: eduStyle.net / The eduStyle Guide to Usable Higher-Ed Homepage Design
If you’re involved in web design and development for Higher Education then you may already be aware of the great website eduStyle which showcases examples of website design from Higher Ed institutions from around the world with the aim to provide a place for “web professionals to learn from and be inspired by work of their peers“.
The main feature of the site is a gallery where you can browse through various sites. Each site has a screenshot of the website and you can then click through to a detail page showing a large image and of course the URL of the site. It also allows you to vote for the site as to whether it’s ‘My Style‘ or ‘Not My Style‘. eduStyle also run the annual Higher-ed Web Awards so if you see a site you like you can also nominate the site for an award via link on the detail page. There’s also a blog with regularly updated articles and info about events etc.
Review of “The eduStyle Guide to Usable Higher-Ed Homepage Design”
Ok, slightly odd to call this a review when I haven’t even read the book yet! However, eduStyle have published a book titled “The eduStyle Guide to Usable Higher-Ed Homepage Design”, given that the website is such a good resource then it’s certain that the book will be very useful too. It’s been released as a PDF version initially and will be published in print in due course for those, like myself, that like the feel of real paper! The book has some interesting goals:
- Get External Validation of Your Design Ideas
- Learn Best Practices and Common Pitfalls of Higher Ed Homepage Design
- Get Tips To Improve the Usability of Your Homepage
- Find Out Leading Edge Design Trends
- Discover Common Themes Between Noteworthy Winners
- Understand the Reasoning Behind Your Competitor’s Designs
- Learn Secrets That Can Get Your Homepage Noteworthy Status
Anyway, that’s enough rambling about a book I haven’t read, you can go to the eduStyle site to read more about it yourself!
~Rick
Singularity Conference gets ‘head’ed off at the pass
If you’re a web developer / designer or into the web in anyway then you’re going to want to check out the <head> web conference that takes place October 24-26, 2008. <head> is a bit different than your regular conference, The conference website describes it like so:
The premise for <head> is simple: instead of making you come to the web conference, let’s make the web conference come to you.
<head> is a web conference with all of the traditional elements. We have live speakers, presentations, question and answer sections, and networking opportunities. The twist is that the conference takes place everywhere – all over the world – and at real-world gatherings called local conference hubs.
And we use the Internet to tie it all together.
Now, you might be thinking “That sounds cool, but wasn’t someone already running a conference like that?”. If you were thinking that then don’t worry, you’re not going daft! <head> is actually the new name for the conference. The conference was formerly known as Singularity but due to an objection from a company that holds a trademark for the word Singularity relating to conferences the lead organiser, Aral Balkan, had no choice but to change the name!
Anyway, go over and check out the website to find out more about the conference. There’s an early bird ticket price of just $99 if you book soon!
Update 22 Aug 2017: The above is an old post and the conference is past now.
Essential Reading for Web Designers – Second Edition
I wrote a post back at the end of 2005 called "Essential Reading for Web Designers" in which I wrote about a few books that I considered essential reading for anyone who does website design. Primarily these books focused on using web standards, at the time these books were the few key books about this subject.
Since then a lot more books have been written but the books I wrote about then are still very important. In fact two of them have been updated with a second edition bringing them right back up to date with the current state of web design. As these second editions have come out I thought I’d make a second edition of my own and update my list of essential reading too!
Designing with Web Standards – Second Edition by Jeffrey Zeldman
This second edition by an author who was recently called ‘The King of Web Standards’ in a recent interview on BusinessWeek.com brings this key book up to date. the back cover states:
Best-selling author, designer, and web standards evangelist Jeffrey Zeldman has updated his classic, industry-shaking guidebook. This new edition, now in full color, covers improvements in best practices and advances in the world of browsers since the first edition introduced the world to standards-based design.
View Designing with Web Standards – Second Edition on Amazon.
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, Second Edition by Dan Cederholm
This second edition, due for release in September 2007, updates this excellent book. Dan writes about it on his own website saying:
This isn?t a giant update nor a new book entirely. Rather, it brings the examples in line with Internet Explorer 7 (which wasn?t released when the first ed. was published) and adds several more examples based on ems (which were sorely lacking from the original book). There are of course errata fixes and nips and tucks throughout as well, and about 30 additional pages were added in total.
DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith
This book focuses on best practices for Javascript coding. It’s a great book aimed at web designers rather than programmers so it’s an excellent way to get into the power that the DOM and Javascript can offer:
The book is aimed at designers rather than programmers. If you’ve learned the benefits of Web Standards through CSS and you’re now ready to move on to the next level, this is the book for you. It will show you how to add stylish, usable enhancements to your web pages using Web Standards that guarantee future compatibility.
View DOM Scripting: Web Design with JavaScript and the Document Object Model on Amazon.
Bulletproof Ajax by Jeremy Keith
Following on from DOM Scripting, Jeremy Keith writes further about best practices in Javascript programming. This book focuses on how to use AJAX but in a way that degrades well and is accessible:
Using flexible design elements that adapt to the user?s needs, Web sites continue to work beyond the typical browsing environment. I believe that the same philosophy can be applied to Ajax. Far too many Ajax applications are built like a house of cards, dependent on just the right stack of technologies in the browser. Browsers that don?t support the required technologies are locked out and their users are turned away. To avoid this, you need to create flexible applications using bulletproof Ajax.
View Bulletproof Ajax on Amazon.
And many more…
These are just a few books on these subjects, but they are a few that I would definitely recommend reading, and probably in the order I’ve listed them too. A quick look on Amazon (or in my Amazon aStore found under the ‘Store’ section above) will find many other books to take your web design and development further.
~Rick
Apple publishes ‘Optimizing Web Applications and Content for iPhone’
Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.
Quick overview of the Guidelines…
The guidelines are split into several sections:
- Understand User-iPhone Interaction
- Use Standards and Tried-and-True Design Practices
- Integrate with Phone, Mail, and Maps
- Optimize for Page Readability
- Ensure a Great Audio and Video Experience
- Know What Safari Supports on iPhone
- Connect With Web Developers
Understand User-iPhone Interaction
This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.
Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.
Use Standards and Tried-and-True Design Practices
This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.
It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.
Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.
Quick overview of the Guidelines…
The guidelines are split into several sections:
- Understand User-iPhone Interaction
- Use Standards and Tried-and-True Design Practices
- Integrate with Phone, Mail, and Maps
- Optimize for Page Readability
- Ensure a Great Audio and Video Experience
- Know What Safari Supports on iPhone
- Connect With Web Developers
Understand User-iPhone Interaction
This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.
Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.
Use Standards and Tried-and-True Design Practices
This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.
It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.
Integrate with Phone, Mail, and Maps
This section starts to get to more of the iPhone specific code examples that hook into the dedicated apps on the iPhone. You can click on Telephone numbers in Safari and the number will be automatically dialled, Safari will automatically convert numbers that look like phone numbers into telephone links. However you can format a telephone link on purpose:
<a href="tel:1-408-555-5555">1-408-555-5555</a>
Email links are in the standard format and open up Mail in order to send an email., links to Google maps take the standard link format also but these are opened up into the dedicated Google Maps application on the phone. I believe that links to YouTube movies do something similar but there is no mention of this in this section.
Optimize for Page Readability
This section gets more interesting and links back to my initial mention of CSS 3 properties. If you want to provide a particular window size for a page to be viewed on the iPhone you can set an iPhone specific stylesheet by using a CSS 3 media query like so:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
There are more guidelines for laying content out for the iPhone viewport such as a recommended width of 320px so that the layout doesn’t change between portrait and landscape modes. It also details some webkit specific CSS properties to help control text sizing. Image formats supported are JPG, PNG, GIF and TIFF.
Ensure a Great Audio and Video Experience
Formats and bitrate advice is provided here to help optimise video for WIFI and EDGE network capacities. Maximum video dimensions of 480 x 360px are recommended. Formats supported are H.264, MPEG-4, AAC-LC, .mov, .mp4, .m4v, .3gp file format, video or audio that can play on an iPod.
There is advice for the server side of providing audio and video for use on the iPhone too, interestingly the RTSP protocol is not supported but apparently only video via HTTP streaming.
Know What Safari Supports on iPhone
This set of guidelines covers the resource capacity of Safari on the iPhone. Downloaded resources such as CSS, HTML, Javascript, images or other non-streamed media must be less than 10Mb. Javascript execution is limited to 5 seconds before it times out, this will really mean people having to review their use of the various javascript libraries available and make sure that only the bare essentials are present. Interesting to see how Adobe’s Spry library stands up on the iPhone.
Other information covers support for files including the various mime types, PDF is supported but not (as has been widely covered on various blogs!) Flash or Java. I think various browser testing scripts for detecting Flash will need to be updated to factor in the iPhone’s lack of flash support. I wonder how long it will be before we see Flash on the iPhone? It surely must be coming, seems like a missing piece of a puzzle to me? It also covers the Security support of Safari such as SSL and RSA.
Connect With Web Developers
It ends with some useful web development links including W3C, WHAT-WG and Web Kit project site.
There’s a real push throughout about the fact that web standards and associated best practices are an integral part of creating successful sites that work well on the iPhone safari browser.
When I’ve got a moment I’ll try out a the iPhone specific code, especially now that my friend Alyn seems to have successfully gotten his iPhone activated, more about that on his blog I’m sure.
~Rick