Slides: Responsive Web Design Primer

Yesterday I had the pleasure of visiting the University at Buffalo (my alma mater) to give a presentation for its CIT professional development series. I got to talk about responsive design.

Knowing in advance that the room would have technical and non-technical users I went for a code-free presentation. One thing I learned is that code would have been useful, so if you're looking for any in here you won't find it.

I understand there is video from the event, and as soon as I have it I'll share it here as well. In the meantime, enjoy the slides without any context. Which may be more entertaining than my typically awful attempts at humor.

Responsive Design Overview for UB CIT from Adrian

Read More

My WordCamp Buffalo 2013 Presentation: Making Your Site Printable

Today I spoke at Buffalo's second WordCamp. I am a casual WordPress user, not a developer, though my decade-and-a-half experience with multiple blogs and content management systems (even writing our own CMS at Algonquin Studios) gives me plenty of insight into the common challenges users and developers face across all platforms.

I have also learned that few developers work on just one platform. Nearly all of us touch more than one platform in our careers (or workday), and my experience from last year is that everyone attending falls into that boat. When I made these slides I wanted to make sure I was presenting ideas and concepts that developers could take to any platform.

There will be video of my talk (featuring my awful sense of humor) in probably a month or so (based on last year's timeline). When it's available I will post it here.

That being said, you don't need to be a WordPress developer to get something from these slides. Enjoy!

Making your site printable: WordCamp Buffalo 2013 from Adrian

In addition, I collected a couple tweets about my talk (yay, validation!):

Brilliant tip from @aardrian to use the Google Analytics tracking image to track prints. BRILLIANT. #wcbuf

— Chris Van Patten (@ChrisVanPatten) September 14, 2013

@aardrian being a jerk at http://t.co/JQcJ7zxNim #wcbuf

— Ben Dunkle (@EmpireOfLight) September 14, 2013

Bonus: Links to Slides from Talks I Attended

Slides from my #wcbuf talk: "Building Themes and Plugins: Everything But Code" http://t.co/8aHrT3IHNX

— Chris Van Patten (@ChrisVanPatten) September 15, 2013

#wcbuf slides http://t.co/jUs13KTwQK thanks to everyone who came, it was perfect!

— Ben Dunkle (@EmpireOfLight) September 15, 2013

Extra Bonus

Looks like the WooThemes slider/carousel will be getting Google Analytics event tracking built in for a future release — now you don't need to be a coder to figure out if anyone is clicking your carousel:

Yay, @tomharrigan and I will chat about getting GA event tracking features into WooSlider! #wcbuf (now he's stuck)

— Adrian Roselli (@aardrian) September 14, 2013

Read More

New iPad Browser: Coast by Opera

Yesterday Opera announced the release of its newest browser, Coast, built specifically for iOS tablets (I would say just iPads, but if my fridge gets an iOS tablet UI then I'd be wrong and will have paid too much for a fridge).

Background

Recently Opera moved away from Presto as its rendering engine and hitched its future to Blink, the rendering engine born from WebKit that powers Chrome. Now instead of Opera worrying about the rendering engine, it is focusing on the user interface, the place where it can set itself apart from the other browsers.

Essentially Opera is removing the browser chrome (implying to the user that a web page is just an app) and adding gesture support. Given that Opera was the browser that introduced us to mouse gestures well over a decade ago, and given that a touch screen is an inherently gesture-based UI, this seems like a natural fit.

Bits for Developers

Sadly, my office wifi was down and I couldn't play with the browser immediately (my crusty iPad 2 is wifi only). So instead I took some time to read through the developer notes.

Tablet First

Overall Opera recommends general responsive design current best practices, though it promotes a tablet-first approach. Opera offers some CSS you can use to specifically target iPads Mini, 2, 3 and 4 (Retina and non-Retina), though it leans on vendor prefixes with only a brief note to also use other prefixes and unprefixed rules.

Responsive Images

It's also clear that Coast supports the new srcset option for responsive images. It even offers a code example: <img src="image.jpg" srcset="retina.jpg 2x">

Note: As Bruce was kind enough to inform me (because I missed it in the dev notes), responsive images will be supported only in iOS7 and up.

Update as of September 20, 2013

According to Opera, iOS7 did not come with a WebKit update. That means Coast cannot support responsive images via the srcset attribute without a polyfill. Nor can Safari, of course.

Tile Speed Dial Web App Image

Instead of "Speed Dial" icons/images, Coast now looks for a "web app image." If you don't have one, Coast will first look for a Windows 8 tile image, then an Apple touch icon, then a shortcut image, then just a favicon. You can, however, create your own 228 × 288 pixel image and stuff it into your site with the following HTML:

<link rel="icon" href="$URL" sizes="228x228">

User Agent String

Don't use this to do any browser sniffing. Browser sniffing bad. This is instead handy for recognizing it in your logs:

Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Coast/1.0.2.62956 Mobile/10B329 Safari/7534.48.3.

General Review

Getting going is pretty easy, just start typing into the only field on the screen. As you type you can see a Google preview on the left, which you can tap at any time to go to Google, or a list of icons on the right which correspond to sites you might mean. The icons start out just displaying the first letter of the site, and then identify the site's tile or shortcut image.

Note the handy ".com" and ".net" options that appear above the right end of the text box.

Once you are on a page, you can go back by swiping from the left, forward by swiping from the right, or reload the page by pulling down from the top — but not too far or you get the iOS menu instead.

Vine of me playing with back, forward and reload in Opera Coast.

Opera Coast skips tabs and windows altogether and, frankly, feels a lot more like Internet Explorer for Metro than other current tablet browsers. It's pretty easy to see the open "tabs," flip through them, get more details, and discard them. It's also incredibly easy to forget you have so many tabs open. I regularly found myself littered with tabs because of all the links opening new windows.

Testing Opera Coast window/tab management.

While in that tab view, you can also see how "safe" the page is and can get to options to share it, email it, print it, and so on.

The arrow on the right gives you all the share options.

I don't have a printer installed, so I'd love to hear feedback on how Coast honors print styles.

Adding and removing a bookmark, tile, whatever, is pretty easy. It took a few swipe-fails, but I got the hang of it well enough to show the whole process in one uninterrupted Vine:

It takes a little getting used to, but it's not too hard

Gotchas

There were a few things that threw me off. Perhaps because I am a power user, perhaps because I only played with it for one evening.

Swipe History

The swipe for back/forth is handy, but conflicts with behavior I have already learned. In Chrome for Android, swiping left or right has the infuriating feature of bringing me to the next or previous tab in the stack order. For those rare sites that implement a slide that is swipe-friendly, imprecise swipes will move me back and forth in the history instead.

Web App Images

Using the browser in portrait view, the additional screens of tiles (speed dial icons if you are already familiar with Opera) aren't immediately apparent. It wasn't until I turned to landscape that I saw them. The tiny dots under the Coast icon weren't enough for me to intuit that. They also aren't nearly large enough to tap to jump to a specific screenful of tiles.

Hit Sizes

The 9-box grid at the center bottom as well as the three rectangles at the bottom right are the only real browser chrome in play as you surf. They are also maddeningly small to tap. And I have dainty, lady-like fingers, so I suspect it may cause consternation for others.

Address Bar

If I am on a site and I want to change the address of the current page (maybe I fat-fingered and got to a 404, or I know a super-secret URL), I could not find a way to bring up the address bar and change it. It also made it impossible to know the current page address at any time. As someone who regularly looks at the URL for familiar addresses, indications of scam sites, quick commitment to memory, and so on, this alone takes it out of the running as an everyday browser for me.

Email a Page

I did not care for the email feature one bit. Not only does it embed a screen shot of the page (with a Coast watermark), the screen shot won't display on other devices. Outlook blocked the image because the attachment ended in .com (not .png or .jpg). Had it not come from me, I wonder if Outlook would have blocked it as spam. My Android email client couldn't display it because there was no file extension to give it a clue.

What you see when you choose to email a web page from Opera Coast.

Best case scenario of what the email recipient sees, though the attachment was blocked in Outlook and unusable in my Android email client.

Tweet a Page

Tweeting a page left me similarly dissatisfied. By default it includes a Twitpic screen shot of the current page with an Opera Coast watermark. When composing the tweet, I tapped the paperclip icon to see if it would do anything, but nothing happened. I opted not to tweet again.

Tweeting a page from Opera Coast.

The resultant tweet:

Tweeting a web page from Opera Coast. Curious how it will come across. http://t.co/bdx3mcQxiO pic.twitter.com/eq3vRhFX5N

— Adrian Roselli (@aardrian) September 10, 2013

Wrap-up

Overall, I like the browser. I like what it's trying to do for consumers. As a power user, however, It's not a fit for me though I'd be interested in bringing it in front of some other members of my family.

I also didn't get to try out unsafe sites, printing pages, responsive images (need iOS7), or poorly-built sites. My opinion might change as I continue to play with the browser.

Open Question

There are a lot of Android tablets out there, not just the four screen size offerings from Apple. So how long before we can see Coast on my Nexus 7, if ever?

Updates

I'm adding notes throughout the day as they come up.

• Feedback from users over at MacRumors.


• Norwegians just launched the iPad browser Apple couldn’t build at BGR.


• A Vine from Opera Coast showing how to move/rearrange groups of tiles/bookmarks at once.

Surprising no one, the following reviews from more mainstream sources completely fail to include any screen shots or videos that weren't pilfered from Opera. I only say that to remind you that by reading this post you have gotten the most in-depth review currently on the web and you should be excited and send me a thank you note and maybe read all my other posts and high-five me on the street.

These articles are, however, worth visiting just to see the comments and how others are reacting to it.

• Opera Coast iPad Web Browser Treats Websites like Apps at Time.


• Opera's iPad Coast browser debuts, packaging websites as apps at ZDNet.


• With Coast, Opera reboots its browser for mobile future at Cnet.


• Opera Coast: a Stripped-Down Browser Built Just for iPad at Gizmodo.


• Opera Launches Coast, A Slick New WebKit-Based iPad Browser at TechCrunch.


• Opera releases Coast, an iPad browser that turns the web into a home screen at The Verge.

Tips from Bruce:

Want to add a background image to your Coast home screen? Long press an image, set as background. Pull curled corner to remove it.

— bruce lawson (@brucel) September 9, 2013

If you don't see your new 228px site icon in Coast, empty cache by deleting yr old speeddial entry (drag to top of screen) & revisit yr site

— bruce lawson (@brucel) September 10, 2013

To clear history in Coast by Opera or change size of Speed Dial grid from 3x3 to 3x4, go to iPad settings > Coast

— bruce lawson (@brucel) September 12, 2013

Update: September 18, 2013

Opera has fielded some questions about Coast and collected them into two posts (so far):

• Coast by Opera is only a few days old, but we’ve already gotten a lot of questions about how things work. Here’s some answers.


• Nope, there are no tabs in Coast. That and a few more answers for this second set of FAQ.

Update: September 25, 2013

Another FAQ post from Coast:

• Yes, you can see the URL and you can copy links in Coast. Our third set of FAQ

Read More

Speaking at WordCamp Buffalo 2013

This Saturday I will be speaking at Buffalo's second WordCamp. Last year was a great day-long event filled with many good speakers (not just me!), so I am looking forward to being an attendee as well.

If you are new to WordCamp Buffalo, a quick overview:

WordCamp Buffalo is a one day conference held in Buffalo, NY focusing on WordPress. Our goal is to increase knowledge about WordPress for people who already are working with it, and show some benefits of using it for anyone who may be interested, but aren’t currently working with WordPress.

As a regular WordPress user with over 15 years experience in content management as a concept and more than a decade experience having built our own multi-lingual enterprise web content management system (QuantumCMS) at Algonquin Studios, my talk should give you skills you can take to any platform. An abstract of my talk, Making Your Site Printable, is on the WordCamp Buffalo site. I'll post slides here after the talk.

For the talk I'll be drawing on my 20 years of web development experience, extensive work with responsive design, articles I've written for .net Magazine and Web Standards Sherpa, previous talks, my PrintShame site, and Google Analytics. It's guaranteed to be awesome (guarantees not guaranteed).

Last year I spoke at WordCamp Buffalo on the topic Content Strategy. The slides and video of my talk are online for you to watch, in case you want to make sure I speak well enough to warrant buying a ticket to see me this year.

You can learn more about the other sessions and speakers at the WordCamp Buffalo site. Here's a handy map:

View Larger Map

Read More