SitePoint

Browser Trends August 2013: The Summer Slowdown?

Craig Buckler — Thu, 01 Aug 2013 15:53:19 +0000

In last month’s analysis Internet Explorer dropped a massive 2.29%. The news is far less dramatic this month according to the latest figures from StatCounter…

Worldwide Browser Statistics June 2013 to July 2013

The following table shows browser usage movements during the past month.

Browser	June	July	change	relative
IE (all)	25.42%	24.52%	-0.90%	-3.50%
IE10+	9.88%	10.94%	+1.06%	+10.70%
IE9	6.79%	5.31%	-1.48%	-21.80%
IE8	8.04%	7.63%	-0.41%	-5.10%
IE7	0.49%	0.44%	-0.05%	-10.20%
IE6	0.22%	0.20%	-0.02%	-9.10%
Chrome	42.75%	43.14%	+0.39%	+0.90%
Firefox	20.01%	20.09%	+0.08%	+0.40%
Safari	8.37%	8.59%	+0.22%	+2.60%
Opera	1.02%	1.09%	+0.07%	+6.90%
Others	2.43%	2.57%	+0.14%	+5.80%

Worldwide Browser Statistics July 2012 to July 2013

The following table shows browser usage movements during the past twelve months:

Browser	July 2012	July 2013	change	relative
IE (all)	31.99%	24.52%	-7.47%	-23.40%
IE10+	0.00%	10.94%	+10.94%	n/a
IE9	16.93%	5.31%	-11.62%	-68.60%
IE8	13.26%	7.63%	-5.63%	-42.50%
IE7	1.28%	0.44%	-0.84%	-65.60%
IE6	0.52%	0.20%	-0.32%	-61.50%
Chrome	33.90%	43.14%	+9.24%	+27.30%
Firefox	23.76%	20.09%	-3.67%	-15.40%
Safari	7.13%	8.59%	+1.46%	+20.50%
Opera	1.71%	1.09%	-0.62%	-36.30%
Others	1.51%	2.57%	+1.06%	+70.20%

The tables show market share estimates for desktop browsers. The ‘change’ column is the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 21.8% of IE9 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

We’ve not seen the chart this stable for a while. Internet Explorer had a modest drop. IE10 made good gains at the expense of IE9 which is dying rapidly. However, it’s clear Windows XP usage remains high with IE8 retaining almost 8% of users.

All the competing browsers increased a little but even Chrome could only manage a 0.39% jump — significantly lower than it’s typical monthly 1%.

Toward the bottom of the chart, the newly released Opera 15 has 0.09% usage, which equates to 8% of Opera users upgrading. That’s reasonably impressive given the mostly negative reaction from existing users.

Safari’s figures are also interesting:

The iPad version of Safari accounts for 4.07% of the market. That’s impressive for a single device (or variations of a single device). But let’s not forget Safari is the only real browser available for the tablet.
The remaining 4.52% of Safari’s market share are Mac OSX users. StatCounter estimates Mac OSX usage at 8% of the desktop OS market, so we can jump to a rough conclusion that almost 60% of users retain Safari as their primary browser.

But is Safari’s future assured? Google has left the Webkit project, iOS has been overtaken by Android in the smartphone/tablet market, and it’s become impossible for web developers to test Safari unless they own an Apple device. I’m not convinced Safari can continue to grow unless Apple can address the situation.

Mobile Browser Usage

Mobile usage jumped considerably to 17.35% of all web activity during July 2013. Who wants to be stuck behind a PC when the sun is shining?

The primary mobile browsing applications:

Android — 28.64% (down 0.42%)
iPhone — 22.43% (down 0.34%)
Opera Mini/Mobile – 15.73% (down 0.33%)
UC Browser — 10.57% (up 0.68%)
Nokia browser — 7.14% (down 0.24%)

Like the desktop chart, there are no significant winners or losers this month. People may be using their mobile more but they’re not bothering to try new browsers!

Create a Style Guide for Your Brand

Georgina Laidlaw — Thu, 01 Aug 2013 04:06:54 +0000

Even the smallest, simplest web presence needs consistency. Consistency of design, sure. But also of language.

Consistency is reassuring. It shows control and care. And in an unpredictable place like the Wild Wild Web, it can be even more valuable than in other media.

Your style guide is your starting point for ensuring your online presence is consistent.

What is a style guide?

A style guide is a document that provides guidelines for the way your brand must be presented.

That might include visual styles—rules defining the way the brand will look—as well as language styles influencing the way the brand will sound or read. All the rules are intended to ensure the consistency of your presentation.

In some organisations, the style guide’s printed, kept in a ring binder, and laughingly referred to as the “brand bible”.

In others it’s a simple electronic document containing images of the logo, a brand vocabulary, and a reference to a popular style manual, like the Chicago Manual of Style, which is to be used in any cases the house style guide doesn’t cover.

What’s in a style guide?

The last style guide I put together for a digital client came to 20 pages, and contained these sections:

Mission, vision, and value proposition
Target audience description and persona
Brand attributes
Logo: colors, minimum size, clear space
Fonts
Service description and tagline
Language styles: tone, spelling and punctuation, numbers, capitalization, lists
Brand vocabulary

For a startup, this was a fairly detailed style guide, but larger, more established organizations working across more varied media often have much bigger style guides.

One corporate client I’m working with has a 139-page visual style guide and a 32-page editorial (or language) style guide. These guides cover every conceivable application of the brand—from physical display banners, reversed logos on transparent backgrounds, and print advertising look and feel, to how various publications are referenced within the organizaton’s writing.

For some organizations, more detail is better, but longer style guides can be overwhelming for many of the people who actually need to use them.

How can you develop a style guide for your brand?

I find the best way to start a style guide for writing is, well, to start writing.

For startups developing new products, styles that describe functionality usually start to be developed with the brand vocabulary, as part of the interface development process. They’re fleshed out more as you turn to writing system emails, and then marketing pages.

As your UX and visual teams design the product and pages, they and you will be making decisions about how things will look—preferred colors, fonts, locations, and so on. These will become your visual styles.

At the same time, your writer will be developing a voice for your brand, and hopefully using things like lists and punctuation and capitals consistently. These will become your language styles.

If you can get these professionals to take note of the rules they’re following as they develop the content, you’ll be developing the bones of your style guide as a natural part of your development and pre-launch processes.

If you’re doing it all yourself, make quick notes about each style as you go. Have a working document with sections set up for visual and language styles, and include any images you need to to show how things should appear.

Then, when it comes to writing your first media release, video script, or banner ad, you’ll have a document you can give your PR agency or creative team so that they can make sure whatever they develop is in line with your brand’s “style”. You might eventually develop styles for:

formatting text for on-page display
presenting content for certain purposes, such as in your help articles, or on your order tracking page
landing pages
email newsletters, print direct mail, and so on.

The styles you develop will depend entirely on what you do and who and how you target your audience. So I find an organic approach, like the one I’ve just explained, is usually best.

To me, it’s far better than looking at someone else’s style guide and thinking “Let’s do something like this for our business!” Some other brand’s style guide may well have details that aren’t relevant to your business. And undoubtedly, they’ll have omitted stuff you need to include.

This is particularly relevant when it comes to language styles. While it’s easy to rip someone else’s massive style guide and save yourself a truckload of work, you probably don’t need a massive set of styles in the first place. In my experience, the longer and more complicated a style guide is, the less it tends to be used. And those who must use it in their daily work only use the specific chunks that are relevant to them.

So it’s better to have a simple, straightforward style guide that covers what you need it to than to copy a behemoth of a style guide that no one can bear to crack open.

It’s also easier to maintain.

It’s done! Or is it?

Brand styles are always evolving.

While the brand agency might hit “Send” and settle back into their seats, satisfied they’ve done a good job developing a style guide for a client’s brand, the reality is that the people using that guide will undoubtedly find problems with it as they try to apply those styles in a multitude of previously unimagined situations and media.

Similarly, the small business or startup style guide really is a work in progress. See your first style guide as a starting point. As you find new opportunities to communicate with your audiences, you may well need to expand your style guide so that it covers the restrictions and potentialities of different media, channels, and messages.

But by slowing and continually evolving your styles, you’ll be able to maintain a clear sense of your brand among the public, and more specifically, within your audiences. Your loyal users don’t want to see your brand stagnate—they want to see it grow and change, as a living entity.

So be prepared to develop your styles as your brand develops. Add, remove, overwrite—but make sure you have the buy-in of the people who use those styles as much as possible. After all, they’re the ones working at the coalface of your brand’s continuity.

Do you have a style guide for your brand? Share your thoughts on using and developing style guides with us in the comments.

Rails 4 with Andy Hawthorne and Glenn Goodrich – The Transcript

Sarah Hawk — Thu, 01 Aug 2013 01:26:43 +0000

It’s that time of the week again – the time that I find myself fraternising with experts. Said experts this week were Andy Hawthorne – author of Jump Start Rails, and RubySource’s Glenn Goodrich. We were chatting about Rails – more specifically Rails 4. It was an interesting session; there were fewer participants than the average Talk with the Experts, but the chat was solid and some interesting tips came out of it.

I’ve put together a list of resources that came out of the hour, for those of you that don’t want to sift through the entire transcript.

Andy’s masterpieces:
Jump Start Rails
Build Your First Rails App

Some helpful RubySource articles:
Streaming with Rails 4
Get Your App Ready for Rails 4
PHP to Sinatra

Some other useful resources:
Upgrading to Rails 4
Fixing Slow Response Times on Heroku

If you missed the session this morning because you didn’t know about it, make sure you sign up for email notifications. Next week is Content Strategy with SitePoint blogger and all round content genius Georgina Laidlaw. That one will take place at 2:30pm PDT on Tue 6 August. You can find out what time it will be at your place here.

If you’d like to know exactly what went down today, here is the full transcript for your reading pleasure:

[21:26] RAILS ALL THE THINGS! :0

[21:27] So for anyone that doesn’t know, Glenn is our editor at RubySource, and Andy wrote JumpStart Rails https://learnable.com/books/jsrails1

[21:27] I think you have a course or two on Learnable as well, don’t you Andy?

[21:28] I have a Rails course on Learnable

[21:29] Build Your First Rails App: https://learnable.com/courses/build-your-first-rails-app-2784

[21:29] Welcome to those of you that have just joined

[21:30] @ Andy I am a beginner, i want to know the benefits of rails please

[21:31] joe that’s a big question. Are you a beginner with Rails, but you’ve developed for the web before?

[21:31] Good question to kick off with joe :)

[21:32] i am a beginner with web designing, i enrolled in on this site just 2 days back

[21:33] But i was curious to know how this section is, so i joined

[21:33] Sweet – welcome.

[21:33] but from your conversation, i am totally lost here

[21:33] that was why i asked that

[21:33] Is rails a good choice for a literary magazine project?

[21:35] @lj I am not sure what the requirements of a literary magazine project are, but Rails is good choice for just about anything that has a database on the back of it. What are your requirements?

[21:35] @ joe ok, well, we all have to start somewhere! Rails does have a bit of a learning curve. But it’s a good place to start because with a bit of effort you’ll be building web apps that are secure and robust

[21:35] Going along with @joe’s question – It seems like some of the JS frameworks are taking over the web app space. Any thoughts on when to choose Rails vs something more direct like Node?

[21:35] poems and images of art, a table of contents, a search, issues

[21:36] @lj, sure. Rails would do well with that.

[21:36] @lj sounds like a Rails project to me…

[21:36] Glenn what about realtime apps ?

[21:36] @Krenski, I am not sure I agree that Node is “more direct”, it’s just a different approach.

[21:37] would the course rails 4 help me get started with that? I have already built 2-3 simple rails projects

[21:37] Plus, you’d likely need a web framework in Node (like Express, which is good)

[21:37] @ Andy okay, so meaning rails is not integrated in web pages?

[21:38] joe Rails is a framework for developing web apps. It helps you create the web pages for your project in a structured and organised way.

[21:38] @Krenski, Rails, right now, is miles ahead on some of the conventions in just handles (CSRF, security, tons of gems) If you like Ruby, Rails is for you. If you are more of a JS person, I would look into Node, Express, etc.

[21:38] You mean rails plus node.js??or Express? I don’t know anything about those. I do know html and css and have worked with bootstrap sass and a grid

[21:39] @lj, I was talking to @Krenski….sorry

[21:39] oh ok…

[21:39] Ij, what are you trying to built?

[21:39] Hi! Does RoR have steep learning curve? Do I need to have an extensive background and knowledge about Ruby in order to succeed at RoR?

[21:40] A magazine with poems and art and about 10 issues Id need to convert from html

[21:40] Hey james – welcome. Good question.

[21:40] james it does have learning curve, but not so steep that you can’t get something up and running quickly

[21:40] @saqib Rails 4 does add some streaming/live capabilities, but they are young. We just had a post on Rubysource about it http://rubysource.com/streaming-with-rails-4/

[21:40] james yes you to know about ruby to start working in Rails..

[21:40] james you can learn Ruby while you learn Rails

[21:41] should*

[21:41] james I didn’t had idea of what Ruby was when I started with Rails, but now I’m thinking about it, my advice is: learn good and clean Ruby first

[21:41] @james I would ad that starting with Rails lets you learn “web stuff” while you are learning Ruby.

[21:41] Oh God, am lost here!!

[21:42] A learnable ruby course would be good…I’m a beginner with that

[21:42] It’s all good joe – hang around for a bit. FYI we often have less technical chats, and beginner sessions. :)

[21:42] @james, I started with Rails (not Ruby) and it was fine. Learning Ruby first won’t hurt, but it’s not a requirement.

[21:42] I see. I’m actually reading Learn Ruby the Hard Way, and I already finished the Try Ruby in 15 minutes by codeschool.

[21:42] But guys i believe before jumping into any framework we should have a little knowledge about programming language which framework is using

[21:42] Glenn +1

[21:42] joe – have you checked the schedule of upcoming sessions? Next week’s content one might be more up your alley if you’re a complete beginner.

[21:42] I don’t want to rush anything but I just thought that I might be wasting some time

[21:42] saqib that’s when the learning curve gets tricky

[21:43] To be honest, wtih so many frameworks out there and all of them are promoted as the next big thing, I find hard to see why I shoud choose RoR instead of any other (Ruby based or not)

[21:43] james take the course from codeacademy, the one from ruby, it’s a good way to start with that

[21:43] I would love to have some simple projects to build with Ruby to practice

[21:43] @james no, you won’t be wasting your time. It’s possible to get up and running with Rails quite quickly. Especially if you’ve sone some web dev stuff already

[21:43] james, you need to learn “the patience” sir

[21:43] But one thing which bothers me alot which is Rails magic

[21:44] @ Hawk, no i have not

[21:44] things are too much abstract ..

[21:44] @james *done some web dev

[21:44] I will be glad to join

[21:44] saqib that magic is for the regular user, but once you learn this “magic” ror has, it gets pretty fun

[21:44] joe – if you refresh this page and leave the session, you’ll see the schedule. :) Then you can rejoin.

[21:44] @molina, if you like Ruby and need a web app, Rails is a good choice. Sinatra is another. I do not believe Rails is the only game in town, it’s just a good one.

[21:45] kinduff if you want to change something .. it took a while to manipulate things according to need

[21:45] so when I can already say that I’m confident in the basic of Ruby, I could just jump into RoR 4?

[21:45] saqib Rails magic is good when you’re learning, I think.

[21:45] For those debating whether to start with Rails, I started with Sinatra projects first (for developing with Ruby) and it helped

[21:45] james Sure.

[21:46] I had a short time experience with PHP btw

[21:46] Well I played with Sinatra a bit and some RoR but with my level of knowledge (or should I say ignorance) it is hard to see the advantages of one over the other depending on the project.

[21:46] james have you tried Laravel 4 php framework?

[21:46] saqib Glenn it is, but It’s pretty hard once you want to think out of the box

[21:46] I think it’s important to point out that Rails is based on a “convention over configuration” If you like Rails conventions (routing, mvc, etc) then you can do great things with it.

[21:47] saqib Not yet. I’m still confused on my field right now actually.

[21:47] Glenn just nailed it.

[21:47] there you go

[21:47] @ Hawk i just did

[21:47] Cool :)

[21:47] Glenn kinduff what do you think about backward compatibility or Rails?

[21:47] @moina Sinatra is much closer to the metal. Rails has “more magic”

[21:48] Rails -> automagical

[21:48] Glenn – what are the main differences in Rails 4 (over the previous versions)?

[21:48] saqib Backward compatibility is a noble aim. However, in some cases it’s impossible or impractical. The jump to Rails 3 is a great example.

[21:49] @glenn with more magic, do you mean that development really faster (well, if you know it, of course) than if you use Sinatra?

[21:50] @molina Yes. You can get up and going much faster with your “standard” site

[21:50] HAWK We have a great article on Rubysource about that http://rubysource.com/get-your-app-ready-for-rails-4/

[21:52] Glenn – cheers, I’ll have a read

[21:53] I like the fact that I could build it modularly with Rails…and make global changes

[21:54] Andy – you wrote Jump Start Rails with no real previous experience of Rails, yeah? What was the hardest bit to get your head around?

[21:54] lj That leads to a great point that a good architecture is more important than what framework you choose. You can be modular with Rails, or you can write a ball of mud.

[21:54] since I am actually generating the pages each time I make changes?

[21:55] HAWK yes, that’s true. I guess all the “conventions” was the trickiest part.

[21:55] I heard jumping from Rails 2.3 to 3.0 was kinda hard, how is the jump from 3.0 to 4.0?

[21:56] HAWK coming from spending a long time developing with PHP, Rails frustrated me at first. It kept getting in the way…

[21:56] @kinduff, I don’t think it’s as bad. There is a great Railscast on it http://railscasts.com/episodes/415-upgrading-to-rails-4

[21:57] HAWK now I an say that working with PHP frameworks, it’s those that get in the way. Rails by comparison, is… there when you need it

[21:57] @andy Not sure that I understand what you mean

[21:57] Yeah, I’ve heard that from many people that make the jump, Andy

[21:57] kinduff you can grab gems to bridge the gap to rails 4 and fix code as you have time. Both the links I posted in this chat talk about that.

[21:58] Glenn thanks for the info, time to migrate some stuff

[21:58] kinduff No worries! Good luck!

[21:58] HAWK molona to be clear, when building a web app you are designing a solution to a problem. You want tools that help you do that, not ones that need a lot of attention to make them work…

[21:59] @andy that’s much clearer, thank you

[22:00] We have a gap. Does anyone have a question that hasn’t been answered yet?

[22:01] Is anyone currently working on a Rails app? Any pain points?

[22:02] Well, I wonder if there’s a type of project I should start with

[22:02] Is Heroku the best way to host the app?

[22:02] yeah and to add to that. What if I’m just learning Rails and don’t have any project. What can I do to practice the things I learn? I mean just do the usual way like blog, etc?

[22:03] lj Heroku is great, for sure. It has some constraints, though, so you need to understand what those are.

[22:03] lj I love Heroku but it’s not the best

[22:03] lj it’s a great place start with.

[22:03] It is slow though if the site doesnt get continual traffic to keep it awake

[22:04] james re-build your own site using Rails maybe?

[22:04] @lj I have a cron job on my personal hosting that just pings all my little apps every hour

[22:04] That way they all stay alive on the free teir :D

[22:04] @lj Pingdom can fix that problem

[22:04] james Pick a site and reproduce it in Rails. Find some good Ruby resources and go through their tuts/articles. I would like to suggest http://rubysource.com of course :)

[22:04] MalCurtis from Heroku?

[22:04] I have hosting with MediaTemple that allows me to set up cron jobs

[22:05] so I run ‘wget http://cspisawesome.com’ every hour

[22:05] that’s on of my heroku free apps

[22:05] I beleive the timeout is every hour

[22:05] But Glenn’s idea of Pingdom is just as good

[22:05] they test for your website being up

[22:05] so it will receive traffic

[22:05] lj I think if you sign up for the free version of the New Relic add-on, it will keep your site up.

[22:06] MalCurtis Pingdom credit goes to Andy :)

[22:06] I tried new relic that does this…not sure yet if its working

[22:06] Oops, sorry Andy

[22:06] Seeya kinduff – thanks for joining us

[22:07] With MT do you use rsync?

[22:07] @lj https://coderwall.com/p/u0x3nw

[22:07] comment was for MalCurtis

[22:08] wget

[22:09] it just retrieves the url I give it

[22:09] Good idea to try the magazine in rails…thanks for the inspiration and push

[22:09] MalCurtis but I mean just to upload your work from you r local machine…rsync?

[22:10] I would hate to have to make a change to 300 pages one at a time

[22:10] Oh, I put up a blog on my personal website years ago and haven’t really changed anything since

[22:10] I still ftp to it if I need to make changes, which I never do :D

[22:11] It’s wordpress so most content is dynamic

[22:11] so you arent blogging on it anymore?

[22:11] Oh ok so it isnt rails

[22:11] Yea

[22:11] I did it before I became a rails guy

[22:12] I tried an Octopress blog which have me a little ruby practice

[22:12] Nice, yea – if I were to do anything these days it would be managed with GIt

[22:13] I had trouble managing the github pages so I used rsync with my host Site5

[22:13] worked very well

[22:15] MalCurtis Did you ever build another one in RoR?

[22:15] A blog?

[22:15] yep

[22:15] Nope. Not really interested

[22:15] There’s so many great static site generators out there

[22:16] OK so then what would you use rails for?

[22:16] for example

[22:16] I wrote learnable.com

[22:16] Which is a rather large rails app

[22:16] in rails? right?

[22:16] yes great job

[22:16] Yea, initially it was PHP, Rails and some Python

[22:17] amazing

[22:17] now it’s just Rails

[22:17] I actually don’t work on it any more

[22:17] The Sitepoint devs take care of it

[22:17] but does it make sense to use it for a smaller project when as you say “there are so many…”

[22:17] Dynamic content = use rails

[22:17] Static content = maybe use rails if you want practice, but probably no need

[22:18] Does anyone have questions for our experts? Glenn and Andy are probably going to sleep? ;)

[22:18] If I have a static or nearly static content app, I like to start with Sinatra.

[22:18] When did you decide to make learnable an only Rails app

[22:19] It was a company wide decision to move away from PHP, and Learnable was already half written

[22:19] So as things needed updating, we rewrote them into rails

[22:19] Flippa have done the same thing

[22:19] Welcome to those of you that have just joined. If you have a question, please jump in

[22:19] as they make updates / add new features, they get written in Rails

[22:19] I think they’re nearly all Rails now

[22:19] I’ll post the full transcript up on SitePoint later today so you can see what you’ve missed

[22:19] Glenn I wonder how you would “start” the project with Sinatra…how you would proceed

[22:20] I know that’s a big question

[22:21] lj Well, Sinatra is really just a file if you use the inline views feature. Makes it nice to get going if I don’t need complicated auth, css/asset handling, etc.

[22:21] Suggestions for picking up Rails? I am coming from a strong PHP background.

[22:21] lj if the app starts to get too big and you’ve written your business logic in a somewhat modular way, crank up a Rails app and pull it over.

[22:22] eip56 build something using Rails. It sounds like a simple answer I know. But it is the best way.

[22:23] eip56 Andy’s book is aimed somewhat at people making the jump https://learnable.com/books/jump-start-rails

[22:23] Andy. Always a good way :-). We will follow up with a more specific way. What are your favorite resource books/ sites

[22:24] Awesome thank you

[22:24] andy I look forward to reading your book

[22:24] Aren’t there quite a few articles on RubySource on that subject as well Glenn?

[22:24] http://rubysource.com/ ;-)

[22:24] Hehe

[22:24] Ok everyone – there is 5 mins remaining in the session. Speak now or forever hold your peace.

[22:24] HAWK Why, yes, I do believe there are some Rails articles over there.

[22:25] eip56 cheers! It’ll get you started anyway.

[22:25] :p I meant specifically pertaining to making the switch from PHP, Glenn

[22:26] why would you favour Rails over, say, Python with Flask?

[22:26] oooooh…right. eip56 Here’s one on PHP to Sinatra http://rubysource.com/php-to-sinatra/

[22:26] In your view what does Rails have over PHP project wise I guess. What would make you choose one over the other?

[22:26] HAWK I found that in the end, it was best to forget all about PHP…

[22:27] @andy so either you program with Rails or with PHP but not with both? lol

[22:27] I’m yet to meet a ex-PHP dev that made the switch and DID look back, Andy

[22:27] jamesMccoy I would favor it b/c I don’t really know Python :P

[22:28] jamesMccoy But, at that point it’s more of a language preference issue, as opposed to a Rails vs Flask issue

[22:28] I’d have thought it was a performance issue,

[22:28] eip56 Rails does the full job when it comes to web apps. PHP was never originally intended to be stuffed into the MVC pattern…

[22:28] rails has a massive overhead in comparison to flask/python

[22:28] I was wondering if the rails experts could give some insight

[22:29] from their perspectives (I am a Python man, if you couldn’t tell…)

[22:29] Andy and Glenn ARE the Rails experts, jamesMccoy :)

[22:29] jamesMccoy I don’t know flask, sorry. Rails definitely has some overhead, it’s the price you pay for so much convention.

[22:29] Andy / Glenn, what commercial apps have you written in Ruby?

[22:29] specifically, rails?

[22:29] jamesMccoy flask/Python compares with Ruby/Sinatra. Rails is comparable with Django

[22:29] jamesMccoy if you like what those conventions give you, and I do, then it’s great.

[22:30] I spent much of the past year or so working on http://social.kyck.com

[22:31] hey that looks cool. and Andy?

[22:31] We are currently working on another large commercial Rails app, but its still cooking.

[22:31] Tease

[22:31] jamesMccoy I’m currently re-building a corporate intranet.

[22:31] Can you give an example of the conventions and what they give you?

[22:32] Anyway guys, that’s technically a wrap. Feel free to stick around for as long as you like, but I’m cutting our experts free when they’re ready.

[22:32] i think i am in the wrong chat

[22:32] And I’d like to say a HUGE thanks for them both for their time

[22:32] so where did you gain your experience for authoring your book, if not from engineering?

[22:32] @glenn, cool… I guess it uses Geotargetting because the page displayed in Spanish for me

[22:32] Hey the few minutes as always have been a pleasure @ HAWk Andy and Glenn

[22:32] What were you looking for redmuB?

[22:32] thanks to all!

[22:33] lj Sure. Real quick (it’s dinner time :)) Routing DSL, mapping of url to controller action to view, asset handling (js and css, minified, etc)

[22:33] Thanks to both :D

[22:33] jamesMccoy from building my own site: andyhawthorne.herokuapp.com, it’s what made me think about the book in the first place.

[22:33] Sounds good Glenn Thanks

[22:33] ActiveRecord gives a mapper to your RDMBS tables. Rails mitigates CSRF attacks. There’s loads more.

[22:34] That is my main problem now is routing..suppose I had to change all those routes in all those pages

[22:34] @molina, Rails has a cool i18n convention too :)

[22:34] @Glenn Cool. Thanks :)

[22:34] Soooo, gotta run folks. Thanks for dropping by. I hope it was fun/useful.

[22:35] don’t you ever feel with Rails that you’re not so much engineering as just sticking blocks together?

[22:35] genuine question — I have built a few apps using the platform, I didn’t feel like I was in control

[22:35] Glenn calls it convention, is it necessarily a good thing?

[22:35] Anyone need a taxi?

Advanced CSS3 Transition Effects

Craig Buckler — Wed, 31 Jul 2013 09:03:03 +0000

In the final part of this series about CSS3 transitions, we’ll examine a couple of more advanced transition topics.

Alternative Reversing Transitions

In our previous examples, we’ve applied a single transition property which is used when changing from the start to the end (hovered) state and reversing from the end to the start state, e.g.

p#animate
{
	color: #ff6;
	transition: all 3s ease-in-out 0.5s;
}
p#animate:hover
{
	color: #0f0;
	transform: scale(4);
}

(Note that -webkit prefixes are not shown but are currently required for transition and transform.)

In this example, when you hover over the element for at least 0.5 seconds, it will grow to 4x its size and change color over three seconds. When you move the cursor off the element, it will wait for another 0.5 seconds then return to its starting state over three seconds too.

But what if we wanted the element to snap back immediately? Fortunately, we can apply two differing transitions; one for the animation between the start and end state, and one for the reversing animation between the end and start state:

p#animate
{
	color: #ff6;
	transition: all 0.5s ease-in-out;
}
p#animate:hover
{
	color: #0f0;
	transform: scale(4);
	transition: all 3s ease-in-out 0.5s;
}

View the transition reversing demonstration page…

This illustrates an element which grows to the end state slowly but returns to the start state quickly. You should note that the transition property is applied to the state it’s moving toward. Therefore, our :hover (end) state has the three second duration, but the normal (start) state has a 0.5 second duration.

Multiple Transitions

Individual CSS properties can have differing transition effects applied. This is best illustrated with an example:

p#animate
{
	width: 10em;
	background-color: #F00;
	border-radius: 5px;
	transition-property: width, border-radius, background-color;
	transition-duration: 1s, 2s, 5s;
	transition-timing-function:  ease, ease-out, linear;
}
p#animate:hover
{
	width: 20em;
	background-color: #00F;
	border-radius: 50%;
}

View the multiple transition effects demonstration page…

In essence, we have defined three separate transitions when we hover over the element:

the width is doubled from 10em to 20em over 1 second using the ease timing function
the border-radius changes from 5px to 50% over 2 seconds using the ease-out timing function, and
the background-color changes from red to blue over 5 seconds using the linear timing function

You’ll notice that the background color continues to change at least three seconds after the other animations have completed.

Values loop if you omit them, e.g.

p#animate
{
	transition-property: width, border-radius, background-color;
	transition-duration: 1s, 2s;
	transition-timing-function:  ease;
}

the width animates over 1 second using the ease timing function
the border-radius animates over 2 seconds using the ease timing function, and
the background-color animates over 1 second using the ease timing function

If you’ve followed this series, you now know almost everything there is to know about CSS3 transitions. Hopefully, you’ll devise better examples than the ones I’ve shown here!

When Do Elements Take the Focus?

James Edwards — Wed, 31 Jul 2013 05:23:05 +0000

Do elements take the focus when you click them with the mouse? Do they show focus indication, like a dotted-border or focus-ring?

The answer always used to be yes — and in my view, it certainly should be — however browser behavior has changed in recent years, in both subtle and significant ways.

Now if you do a quick search for ways of suppressing focus outlines, you’ll get thousands of results. How do I get rid of that ugly dotted border that’s spoiling my beautiful design? comes the cry. The web industry has always overflowed with people who seem to think that’s okay — who think that their arbitrary aesthetics are more important than accessibility; who don’t just want to remove visual indication of the focus, but to prevent links and form-fields from taking the focus altogether.

A significant number of developers don’t even understand the difference, so I suppose I can be sympathetic with those who are sold solutions like this:

When all they really wanted was this:

a:focus { outline:none; }

Both of those are accessibility disasters, but the latter is understandable from a design perspective; or at least, it’s understandable where mouse-triggered focus is concerned. Let me be clear — you should never prevent elements from taking the focus, nor should you remove focus indication when the user Tabs to an element (unless of course you replace it with something else).

But even I’ve been tempted by solutions like this:

a:focus:not(:hover) { outline:none; }

So is it okay to prevent focus indication when the user clicks with the mouse? Browser vendors increasingly seem to think so, and many no longer add a native outline in that situation. In fact in some cases, they don’t focus the element at all.

To try to get some clarity on this, I’ve done a bunch of tests. Here are the headlines:

In Firefox, links don’t show a native focus outline when clicked with the mouse, unless you’ve already used the Tab key during the current page-view.
In Opera and IE10, links never show a native focus outline when clicked with the mouse.
In Chrome and Safari, links don’t take the focus at all when clicked with the mouse, unless they have tabindex.
In Firefox for Mac, Chrome and Safari, some types of form field don’t take the focus at all when clicked with the mouse; this behavior is limited to fields which have no typed input, such as radios, checkboxes, buttons, color-pickers and sliders.

There’s also something interesting to note with elements like , which are not normally focusable, but have been made so by the addition of tabindex. Remember that elements with tabindex="0" are added to the tab-order just like links and form-fields, whereas elements with tabindex="-1" can only be programatically focused.

Except, that isn’t true:

In all browsers, elements with negative tabindex can be focused by clicking them with the mouse, they’re just not in the tab-order.

I find that the most curious anomaly of them all — keyboard-accesible elements can’t be focused with the mouse, yet mouse-focused elements aren’t accessible to the keyboard!

So what to make of all this? Well frankly, it’s hard to be sure. These behaviors are not exactly new, but they are fairly recent. For example, if we go back to Firefox 3.6 we find that none of the noted caveats apply — all focusable elements take the focus when you click them with the mouse, and all show native focus indication.

Perhaps we can put this into some kind of context if we look at platform conventions. In Mac dialogs for example, text-boxes and menus take the focus when you click them with the mouse, however buttons, radios and sliders do not. This corresponds with behavior we noted earlier, in Firefox for Mac, Chrome and Safari. We didn’t see that behavior in Firefox for Windows, and indeed, all dialog widgets in Windows do take the focus when you click them. Yet in Chrome for Windows we get the same behavior as for Mac, so Chrome can’t claim to be honoring platform conventions, as Firefox can.

But how important are platform conventions to web applications anyway? The web has its own conventions, and I don’t think it’s a good idea to force platform conventions onto it. It’s hard enough to get developers to care about accessibility, without having to think about it in platform-specific terms!

Personally, I don’t think any of this is a good thing. I think all focusable elements should take the focus by any means of interaction, and should always show a native focus outline when they do (except for elements with tabindex="-1" which should not be user-focusable at all, because that’s what it’s for). But I’m not naive to designers’ wishes either, and I do have a certain sympathy for how focus can jar with a design.

Nevertheless, the most important thing is users’ needs, and users’ accessibility needs rank highest of all. Have any of us, ever, had complaints from users, saying they don’t like those dotted lines or bright-blue rings? Users aren’t precious about this stuff like we are, they just want it to work.

The Definitive Guide to (Mostly) Free Images

John Tabita — Tue, 30 Jul 2013 13:30:37 +0000

They say nothing on the Internet is truly “free.” Even services like Gmail and Facebook come with a price—namely, your privacy (free with a string attached would be more accurate). It’s the same with “free” images from sites like Flickr and and Stock.XCHNG. Here’s what you need to know about free and mostly free images on the web.

Creative Commons: A Non-Traditional Copyright Model

Creative Commons is a creative (pun intended) twist on the traditional copyright model I wrote about last week. “Some Rights Reserved” rather than “All Rights Reserved” is how Creative Commons licensing works.

Creative Commons licenses come in six flavors:

Attribution
Attribution-NonCommercial
Attribution-NoDerivs
Attribution-NonCommercial-NoDerivs
Attribution-ShareAlike
Attribution-NonCommercial-ShareAlike

Attribution simply means you must credit the photographer in the manner he or she specifies. As you can see, all six Creative Commons require attribution. This is the “price” you pay in exchange for not having to shell out cold, hard cash to use the image. From there, the license restrictions differ in whether or not you can use it for commercial purposes or alter it in any way (i.e., create a derivative).

NonCommercial means you cannot use the image for commercial purposes. And while a charity or non-profit might seem to fit this category, bear in might that, if the organization is attempting to coax money out of its audience (as in the case of charity fund-raising), it may not qualify as “non-commercial.”

NoDerivs is short for No Derivatives, meaning you cannot alter the image in any way—including cropping.

ShareAlike means you can make a derivative of the image, so long as you license the new creation under the same Creative Commons license. So if the original image you altered was licensed under Attribution-NonCommercial-ShareAlike, you’d have to do the same with your version.

As you can see, each license is a combination of two or more of these terms. So Attribution-NonCommercial-NoDerivs means the image must be attributed and cannot be used for commercial purposes or altered in any way. Make sense?

Which is Best: Creative Commons or Royalty Free/Right Managed?

Whether to use a Creative Commons image or not depends on context. The biggest drawback to using them on a business or professional website is the attribution requirement. Using free images on pages intended to sell a product or service sends the wrong message. It tells me you want my money, but you’re too cheap to spend yours for some real marketing.

Blog articles are the exception. Even when on a business website, blog articles offer free information or advice. Oftentimes, bloggers are writing to establish themselves as professionals in their industry. So there’s a naturally symbiotic relationship between those authors and the photographers who are trying to do the same by offering their images in return for an attribution. Even sites like Techcrunch and Mashable use Flickr and other Creative Commons images in their articles.

Another disadvantage to free images is photographic quality. While you’ll certainly find a few gems, you’ll spend a lot of time scrolling past mediocre or downright awful images to find a good one. Clearly, there’s a difference between amateur and professional photography—which is why established professionals rarely offer their images for free. As one person put it, people steal stock photography images because they’re good.

Public Domain Images

Works in the public domain are those where intellectual property rights have expired or are ineligible for copyright protection. In plain English, that means they are completely free to use, no strings attached.

Images in the public domain have their use for blogging, or for historical or editorial content, but I wouldn’t necessarily use one on a business website, unless it happened to fit the topic.

As I stated in last week’s article, using random images from a Google search puts both you and your client at risk. Stock image companies won’t be satisfied with a “cease and desist”. Even if you remove the image immediately (which you should), they also insist on punitive damages over and above the original licensing fee. While the blogosphere’s full of questionable advice on how to handle an infringement claim, it’s best to avoid the situation in the first place. The best protection against copyright infringement is to assume everything is copyrighted unless stated otherwise.

So the next time you’re tempted to right-click and “Save Image As…” keep in mind that the better the image looks, the more likely it is to be a copyrighted stock photo.

Image credit

CSS3 Transitions: Bezier Timing Functions

Craig Buckler — Mon, 29 Jul 2013 08:50:36 +0000

In the second part of this series we looked at the CSS3 transition-timing-function property which controls how an animation varies in speed throughout the duration of the transition. This accepts keyword values such as ease, ease-in and linear which are normally enough for the most demanding CSS developer.

However, you can define your own timing functions using a cubic-bezier value. It sounds and looks complicated but can be explained with some simple diagrams.

The diagram above plots the percentage of the animation complete against time. The line is linear so, in effect, the proportion of the animation completed matches the time, e.g. 50% of the animation is complete half-way through the duration.

This diagram shows the ease-in-out curve:

It starts slowly; approximately 12% of the animation is completed in the first 25% of time.
It ends slowly; the last 12% of the animation occurs in the last 25% of time.
Therefore, the middle 76% of the animation must occur during 50% of the time; it’ll be faster.

In essence, the steeper the curve tangent, the faster the animation will occur at that time. If the line was vertical, the animation would be instantaneous at that point. This is demonstrated in the following diagram:

Half-way through the duration, the animation will jump from approximately 30% complete to 70% complete.

We can imagine that all transition animations start at point 0,0; the animation is 0% complete (in its start state) after zero time. Similarly, they will end at point 1,1; the animation is 100% complete (in its end state) at the end of the duration.

Therefore, we can define a bézier curve between 0,0 and 1,1.

What’s a Bézier Curve?

You’ll have seen bézier curves used in graphics packages. Given the start point (P₀) and end point (P₃) of a line, a bézier curve defines two control points for each end (P₁ and P₂). I won’t even begin to explain the mathematics but, if you’re interested, head over to Wikipedia or WolframMathWorld for the stomach-turning equations.

Luckily, we don’t need to worry about the complexities. Since our animation line starts at 0,0 and ends at 1,1, we just need to define points P₁ and P₂ in the cubic-bezier value, e.g.

/* cubic-bezier(p1x, p1y, p2x, p2y) */
/* identical to linear */
transition-timing-function: cubic-bezier(0.25,0.25,0.75,0.75);
/* identical to ease-in-out */
transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);

Note that the the x co-ordinates of P₁ and P₂ denote time and must be between 0 and 1 (inclusive). You couldn’t set a negative value since it would start earlier than it was triggered! Similarly, you couldn’t set a value greater than one since time cannot proceed to, say, 120% then reverse back to 100% (unless you have a TARDIS or flux capacitor to hand).

However, the y co-ordinates denote the animation completed and can be any value less than zero or greater than one, e.g.

transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);

At approximately 15% of the duration, the animation is -10% complete! Therefore, if we were moving an element from 0px to 100px, it would be at -10px at that time. In other words, we have a bounce effect; head over to cubic-bezier.com and click GO to see it in action.

Let the Tools do the Work

Defining bézier curves can involve trail and error to achieve the effect you want. Fortunately, there are a number of great tools to help you experiment and produce the correct code:

In the final part of this series, we’ll look at a couple of advanced transition techniques.

Danger Clients #43: Those With Secret Ideas

Craig Buckler — Fri, 26 Jul 2013 15:35:36 +0000

All my clients are great. Yours probably are too. But once in a while, you’ll be approached by someone with an idea which is so revolutionary, they can’t possibly reveal the details. They fear you’ll steal their concept … but they still expect a quote! And then start haggling.

My advice: run away. Quickly.

Perhaps you’ve just rejected working for the next Google, but the chances the client will make millions are infinitesimally small. The reasons…

1. Their idea won’t be good or original
Neither Facebook or Twitter were particularly pioneering, but they took existing concepts, added a few twists, implemented them well and generated publicity. A secret idea usually means zero market research and no pre-launch marketing.

Besides, dig a little deeper and you’ll discover it’s yet another social network or auction system. Or a social network with an auction facility.

2. They’re not an expert
The client may be an expert in their field but they’re approaching you for your development knowledge. They may have considered the overall concept and how amazing it’ll be for their customers, but it’s a long, long way from implementation. They cannot build it themselves yet only they can explain it. If they’re unable or unwilling to do that, the system won’t ever be completed.

3. They have trust issues
I don’t mind signing a Non-Disclosure Agreement, but a client who doesn’t trust you at the start won’t suddenly change their attitude. They’ll never trust you; you’ll never trust them. It’s not a basis for a profitable relationship.

4. Money is not your motivating factor
I don’t know a single software engineer who’s in it for the money. Most of us learned the techniques — unpaid — because we were interested in the subject and created our own projects. We’re passionate about programming; not ripping off client ideas.

That said, the client shouldn’t expect you to work for free because…

5. Your ideas are better than theirs
The best developers are full of great ideas. You may not have the time or inclination to complete them all, but your project has a far greater chance of success than someone who doesn’t understand the industry. It’s always more rewarding to work on something you truly believe in.

But Don’t…

…be tempted to do work on a project out of curiosity — unless they’re willing to pay for every minute of consultancy time.

The worst clients will instantly offer you a partnership or share options. They don’t know you and are not willing to share their idea — but are happy to give away part of their company? Ultimately, it means they’ll do the fluffy thinking while you the hard work translating their unworkable ideas into reality.

What’s the worst client approach you’ve ever received?

Create a Killer Mobile App Development Spec

Viktor Bogdanov — Fri, 26 Jul 2013 14:38:04 +0000

Do you know what many visionary tech entrepreneurs have in common, besides business acumen, persistence, commitment and confidence in their own tech genius?

An inability to properly and clearly formulate their project idea or concept to those who’ll actually be working on bringing them to life!

Of course there are exceptions, just as in anything, but based on my seven plus years of experience working in IT, most of our future mobile product creators fail to create clear and well-structured mobile app development specifications. Otherwise we at Intersog wouldn’t receive so many chaotic app specs, sometimes resembling an essay by a college fresher (though some app owners are indeed college freshers) or notes from an insane asylum rather than a set of technical requirements.

You may object that all idea hamsters are creative by nature and creativity doesn’t always equate with an orderly approach. The problem is that a poorly written app development spec is likely to prevent you from getting your mobile product on time, on budget and matching your initial vision, and from correlating your actual expenditures with a development budget and creating an environment of a shared product vision with your development partner or team.

The technical specification generally defines requirements needed to fulfill the development contract, so when you’re unable to supply your future app development provider with a clear vision of the product and how it will interact with users and systems, be ready to face overheads and delivery issues at post-release stages.

Service providers literally hate getting specs that lack important details, such as the app’s target audience or the server collaboration or the proof of concept. Translating the messy, fragmented or cumbersome narratives into the technical documents requires additional efforts and time and both are very expensive these days, as you know. My former employer was so pissed off at receiving raw and unclear specs that it launched a series of workshops to teach companies how to create proper and well-structured mobile development specs. And believe me – those workshops were in a very high demand and came to be a great source of additional revenue!

But making a killer mobile app development spec is not so difficult at all, so why waste money on them? Just stick to the suggested sequence below while writing your next big hit app’s spec and you’ll be able to properly envelope your ideas and vision for your service provider’s sake.

Introduction

First off, explain all definitions, acronyms and abbreviations to be used in the document (this can be done as a last step when writing a spec, but should always be placed on top of the document)
Describe your app’s goal
Describe your app’s target audience
List and prioritize all mobile platforms your app is intended for
List and prioritize all devices and OS versions your app is intended for
List all technologies that should be used for building your app (I suggest you always make your own research before getting provider’s response and asking for suggestions)
List major milestones (from analysis, prototyping, and pre-release to app store placement), their due dates and/or desired timeframe for proof of concept/delivery
Specify your project’s budget

Functional requirements

Usability (screens, view modes, menus, etc) and UI
Social media integration (list all social media channels you want your mobile app to interact with)
App’s collaboration with the server, including detailed description of the app-server interaction mechanism, protocols and likewise data
Data caching for offline work if required
In-app purchasing if applicable (specify what type of content will be sold to users inside the app)
Geo-location services and push notifications
Printing functionality
Compatibility / sync with e-commerce engines, internal CMS and other systems

Design

Here you should specify who will do the graphics design part – your in-house designers, freelancers, a subcontractor or a development provider. In any case, a design specification should be created separately and integrated into the app development requirements document.

Additional information

Provide your market research details and links to / description of all rival / similar apps
Express your concerns, limitations and special wishes for the service provider to have a complete picture of your future app and its role in the marketplace
List all points of contact within your organization and briefly describe your vision of how communication between your company and your app developer should be handled throughout the project

Also remember that a killer mobile app development spec should be truthful, unambiguous, consistent, verifiable, modifiable and traceable. Try to stay away from generic requirements such as “the app should never crash” or “the app should respond quickly to a user query” and provide quantitative requirements instead such as “each button push should provide a response within 100 ms”.

Be sharp, crisp and up to the point and you’ll gain maximum value from providers’ responses to your RFP!

Debugging Mobile with jsconsole

Adrien Tchuya Payong — Fri, 26 Jul 2013 13:21:59 +0000

Web development for mobile devices has several major limitations.

There are strongly divergent screen resolutions (from iPad to the first generation of Blackberry), multiple browsers (webkit but also IEMobile, Firefox, Opera mini and mobile, etc.) and multiple operating systems (Windows Phone, Android, iOS, Palm, Blackberry). Each device has its own constraints and performance.

When it comes time to debug all this, the task is not easy because there are only few tools permitting it – and because of the size of the screen, even then we are not out of the woods.

Dragonfly for Opera already offers a native solution for remote debugging, but this technique is quite limited, especially when one has to take into account other mobile / browsers. Several phone manufacturers also offer emulators, but they don’t compare to the use of a real device offering ”feel and touch” – especially on the side of the web-client programming, and especially JavaScript.

It is to help us in this perilous task that jsconsole was created.

A JavaScript Console for Mobile

Go to the following address: http://jsconsole.com.

Jsconsole will allow you to debug a JavaScript application remotely through a console located on your desktop, which will be used to debug directly on your phone. To make an analogy, it is as if you were using the Firebug JS console remotely.

On the one hand, the tool will retrieve every call to console.log from your mobile and will display it on your desktop.

On the other hand, jsconsole will allow you to inject JavaScript code directly into your pages.

Understand that this tool is normally used only in the development phase or debugging and should always be removed prior to the production start of your website.

Initialize jsconsole

The first step is to create the link between your site and jsconsole. To do this, enter the first command in the console:

:listen

This command will return an identifier and a tag

5 Pitfalls for Mobile App Startups

Oleg Lola — Fri, 26 Jul 2013 12:22:45 +0000

Some mobile startups are born from a pure concept. Some are based on an already existing model. A project is developed, launched, and pushed up the ladder towards recognition.

Now, there’s quite a low percentage of startups that can actually be called successful, and there are many reasons for that. These could be separate problems or in combinations: not enough planning, too much planning, hard competition, bad quality of the outcome etc. The mistakes that app developers make – the pitfalls that startups stumble over – can force a startup to face the dangers of becoming a flop.

These pitfalls can be avoided and should be revealed from the very beginning. First you need to identify them. Here are five to watch out for.

Being Unprepared

Coming to the fight unprepared equals failure – but what exactly does “unprepared” mean for a startup? How can an owner or a developer become “prepared” to launch a project?

As much information as possible must be gathered about similar products on the market. Consultations with specialists must make sure that the project can be actually implemented, and the corresponding documentation should be created (however, the latter can be created by a skilled development company). There has to be a killer feature that makes the software better than its competitors.

Another problem is flawed budgetary planning. A limited amount of budget can be properly handled, for example, by building the most needed features first, and keeping the secondary ones for a follow-up release. The more materials there are, the fewer problems are likely to arise during the development cycle.

Building an App “For Everyone”

Of course, every startup would like to gather as many users under their banner as possible. However, trying address every single possible need or preference of every single possible app user generally doesn’t work out too well. What’s good for one person may be unnecessary or unacceptable for another.

Ways in which potential app users can be grouped for the purpose of focus include age, gender, nationality, culture, level of education an more. I’m not suggesting you develop an app to be discriminatory, but these factors can help you segment your potential customer base and allow you to focus on a segment that is most likely to buy and use your app. To understand their needs, create an image of a user. The more precise it is, the more requirements and purposes can be defined.

A side effect of making an app too broadbased in its focus is that you’ll need to complicate your software to meet everyone’s needs. The way users interact with your software is also important. The simpler it is, the better.

The bottom line is that identifying, characterizing and understanding your specific target audience can be the difference between success and failure.

Unspecified Monetization

The goals of the app startup must be crystal clear; the same is true with regard to monetization. How will a startup make users pay, and which method of payments would be the most comfortable for users? The startup has to be competitive, better than others in some distinct way. Then the software owner can choose a model of monetization (one-time initial payment, freemium, in-app purchases, subscriptions etc.), or combine several for the most efficient result.

Too Many Changes During Development

Once the development process is launched, changes in features and requirements are highly undesirable. It takes additional time to rewrite the code in order to further customize the application. That is likely to create conflicts with budget and deadlines. It’s generally better to leave functional improvements to a later, newer version.

For many projects, agile development is the answer; it opens more opportunities for changes and is generally as flexible and responsive as software development can be. But since software development is an individual and creative work, changes may take a while. The rest depends on the budget and the deadline. If a startup doesn’t have additional resources for unforeseen complications, perhaps it’s better to call it off.

Neglecting User Feedback

Opinions are vital. Users are the ones who’ll get the amenities of the software product, the ones who’ll pay for it. Obviously, they won’t want to pay for what they don’t need and don’t like. They are one of the most valuable sources of recommendations, which can be used to make the product better and better.

User feedback, user reviews and ratings on the application store: the importance of these cannot be overestimated. Many people read reviews before purchasing – and look at the ratings even earlier. If the rating is lower than 4 stars out of 5, they may at once abandon it in favor of another application.

Getting users’ attention, and, what’s more important, retaining it, is both a major goal and a major problem for many mobile app startups.

There is no constant recipe for success, no matter how attractive the concept is; but an informed startup owner with a proper marketing campaign, and an eye on every single detail, has a much greater chance of becoming a winner.

Talking CSS with Louis and Rachel: Transcript and Resources

Sarah Hawk — Fri, 26 Jul 2013 02:15:04 +0000

Talk with the Experts this morning got me a bit more excited than is perhaps to be expected when it comes to work stuff, but it was with good reason. Not only were our experts long-time SitePoint authors and CSS stars Louis Lazaris and Rachel Andrew, but the session marked the launch of our brand new live code window. The new interface allows the experts and other specified participants to collaboratively code in order to demonstrate examples and solve problems.

The hour flew by and we covered a range of topics, from pre-processors to responsive solutions. A raft of great resources came out of it, and to save you from sifting through the entire transcript, I’ve pulled them out and listed them below for your reading pleasure.

Some SitePoint CSS publications from Louis and Rachel:
Jump Start CSS
The CSS3 Anthology
Everything You Know About CSS is Wrong
HTML5 and CSS3 for the Real World

Some useful tools:
Dust Me Selectors (for tidying up your CSS)
CSS3 Pie (makes IE 6-9 capable of rendering several of the most useful CSS3 decoration features)
Modern IE (tools for IE development)
Web Tools Weekly (Louis’ weekly newsletter)

The Sass vs LESS debate:
Sass vs LESS
PreProcessor Shootout

Grids and layouts:
Learn CSS Layout
CSS3 Grid Layout
CSS3 Grids and Regions
CSS Tricks : Grid
Center Multiple Divs

Responsive Solutions:
Choosing a Responsive Image Solution
Responsive Menu Concepts
Responsive Patterns
Responsive Navigation

Other resources:
CSS Day Presentations
Stop Solving Problems You Don’t Yet Have

You can sign up for email notifications of future sessions and check out our upcoming timetable here.
Next week is Rails 4 with Andy Hawthorne and Glenn Goodrich.

And if you’re keen to see exactly what went down this morning, here is the full transcript:

[19:27] Pre-chat challenge: Who has the most tabs open in their browser right now: I’ve got about 60 :D

[19:28] Show off!

[19:28] I have three browsers open, total of 22 tabs. I thought that was good

[19:29] haha, yeah I clicked through a load of links from some newsletters about 10 min. ago, so mine is unusually high

[19:29] 46 — in one of three windows

[19:29] Sounds like a good newsletter

[19:29] 6 here.

[19:30] Ok, I’m calling kick-off

[19:30] Welcome everyone – thanks for joining the session

[19:30] A special welcome and thanks to LouisLazaris and rachelandrew – both long-time SitePoint authors

[19:31] Hi everyone :)

[19:31] Their latest collaboration being Jump Start CSS https://learnable.com/books/jscss1

[19:31] For anyone that hasn’t been to one of these sessions – it will keep getting busier and is a really organic chat

[19:31] If you have questions, jump in at any time and I’ll queue them for our experts

[19:32] I will post a full transcript of the session up on SitePoint later today

[19:32] 211 tabs

[19:32] Good. I hate articificial additives on irc

[19:32] JERRY WINS

[19:32] Holy moly Jerry – that’s ridiculous!

[19:32] hi HAWK! hi All. knowing only the traditional CSS, what should I learn next? SASS or LESS?

[19:33] And I’m proud to say that this session is the launch of our new live code window, which you’ll see on the right of this chat

[19:33] Looks nice. :)

[19:33] I much prefer this look

[19:33] And the chat scroll bar!!!!!! Thanks!!

[19:33] So if anyone has examples that would make use of the code window, let me know and I’ll give you permission to write to it

[19:33] @james Generally, I think Sass is the way to go. It’s turning into the jQuery of preprocessors (lots of people talking about it, writing stuff for it, etc)

[19:34] Glad you like it guys

[19:34] I ahve a question about Vertical Rhythm, is that ok?

[19:34] have*

[19:34] Yup, any questions are ok

[19:34] I second the sass or less question…which is the future?

[19:35] @james you don’t *have* to learn either. However it does seem that Sass has more people using it and therefore more tools and examples.

[19:35] *caugh* Sass *caugh*

[19:35] I today started looking into using the Compass Vertical Rhythm module, really like it. Perfect once I got it working with rem’s and a px fallback! But how do you keep your vertical rhythm when images are used by a client via a CMS?

[19:36] What is the best way to tidy your CSS, or plan it better? – I often find that I have unnecessary classes etc. when I check the code (things that could be done a better way)

[19:36] I love SaSS (and currently work in a Rails team) but am always concerned about the rails-centric aspect… on the other hand LeSS’s client side processing also concerns me… have yet to decide which I prefer

[19:36] Is there a tool available to check over specificity?

[19:37] Sass is amazing, prefer it over Less and the indented syntax is my favourite!

[19:37] why do you prefer it over less?

[19:37] What is Vertical Rhythm?

[19:38] Sass also ahs the benefit of having the Compass framework

[19:38] TaoistTotty There’s something called Dust Me Selectors: https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/ (and similar tools)

[19:38] typography Jerry

[19:38] ljI haven;t used Less! :-)

[19:38] verical rhythm is so two columns will synch on the horizontal axis

[19:38] But overall the syntax of Sass seems more sensible to me

[19:38] TaoistTotty But be careful, because I believe it checks on a per-page basis, so if something isn’t used on that page, doesn’t mean it’s not used on the project (but it’s been a while since I’ve looked at it, but it could be updated now)

[19:39] so far, SASS > 5, LESS = 0

[19:39] LouisLazaris and TaoistTotty – no, I don’t believe we’ve updated it for a looooong time

[19:39] Oh is Dust Me a SitePoint thing? I didn’t realize…

[19:39] If you give DustMeSelectors an XML sitemap, it will scan through all the pages.

[19:39] It is :)

[19:40] I generally seem to hear that SASS is more powerful than LESS.

[19:40] @Zoe good to know

[19:40] I started with less, the difficulty curve isn’t so steep

[19:40] Anyone able to help with my VR question?

[19:40] Sass also has a more robust syntax. The main issue with LESS is they have chosen to use the @ symbol for variables, which conflicts with @ directive in regular CSS. There is a lot you can’t (or hardly can) do in LESS that is absolutely trivial in any other CSS preprocessor because of this issue.

[19:40] rctneil That’s a tough one, and is probably more of a CMS issue than CSS.

[19:41] Compass is pretty cool… particularly for cross browser CSS simplification

[19:41] I’ve not had much to do with LESS to be honest. SASS I am a big fan of though

[19:41] or even, without the CMS, how do you deal with images in regards to keeping the rhythm?

[19:41] especially when doing that and making it retaina and hidpi friendly

[19:41] Can you explain pie?

[19:42] Thanks LouisLazaries I will have a look at that

[19:42] rctneil CMS’s will never be perfect. As long as users can do stuff, they will find ways to break things. That being said, you can use stuff like max-width and max-height or even word-wrap: break-word; to keep things from breaking, but there’s no guarantees.

[19:42] lj – 3.14159 or cherry?

[19:42] @lj What do you mean by “pie”?

[19:43] LouisLazaris Ok thanks

[19:43] jerry neither..the support for pie, something to do with clearfix

[19:43] http://css3pie.com/

[19:43] actually im confused about when to use clear fix. vs clear both

[19:44] For the Sass vs. LESS debate, these two posts are must-reads: http://css-tricks.com/sass-vs-less/ and http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

[19:44] Thanks Hugo G

[19:44] Clearfix = parent side. Clear both = sibling side.

[19:44] Thanks again

[19:45] lj A clear fix is used when all the children of an element are floated then the parent normally collapses so you use a clearfix to pull the parent down to contain all the floated children, the clear property is used to make one floated item go beneath another instead of along side – Sorry for the bad explanation

[19:45] But I have a body that doesnt stretch to bottom when looking in G dev tools

[19:45] Did we lose Rachel? :(

[19:45] rctneil – Good explanation! :)

[19:45] @lj: that could also be due to absolute/fixed positioned elements (assuming your HTML is correct)

[19:45] I have 100% height on body

[19:45] Q: SASS seems a bit like agile. For it to work, everybody needs to be signed up to the idea. Many large companies have multiple teams working on the same codebase. Are there ways of mitigating the confusion?

[19:46] lj This site is awesome at explaining it all: http://learnlayout.com/

[19:46] I dont think I have specified any fixed or absolute

[19:47] @lj – May give problems – try min-height: 100%; height: 1px;

[19:47] I posted a CSS example in the code pane :)

[19:47] lj If you are rying to get equal height columns with backgrounds then it is a tricky issue, backgrounds, min and max are all methods that can be used

[19:47] @lj then something must be floating outside its container… The body should wrap everything if properly clearfixed… Alternatively you might want to look into using inline-blocks if you don’t support IE7 and lower. Especially grid systems that use inline-blocks are superior to floats imo.

[19:48] twigsta Look into using Source Maps, which basically allows someone viewing the Sass to see what line the CSS is from in the original CSS file

[19:48] Part of the {potential} problem I have with SaSS is that unless you’re working on a Rails project, preferably with the integrated asset pipeline enabled and compiling on-the-fly, then it only takes one team member to work on the compiled CSS to break the whole process… compilers like CodeKit are awesome for individuals but not a reliable workflow

[19:48] for teams

[19:48] everything looks good in safari and FF but in Google Dev Tools it shows that my body only reaches so far down.

[19:48] I am trying for isolation…ie NO floating

[19:49] COncept I dont see how someone can break the css when it can just be generated again from the sass

[19:50] It’s not breaking the CSS. It’s breaking the workflow.

[19:50] Highly different things.

[19:50] LouisLazaris Nice ode sample. :-)

[19:50] Workflow is a word that almost doesn’t exist when working alone on a project.

[19:50] it’s not that THEY can break the css so much as they are writing into a black hole… ie. they make changes, those changes then get over-written…

[19:51] rachelandrew When did you decide it was time to come up with Perch and what has been the biggest learning point for you during the development?

[19:51] LouisLazaris thanks, I will!

[19:51] who has a brighter future? SASS or LESS?

[19:52] SaSS appears to have more traction at present…

[19:52] * LouisLazaris (ae599fcc@localhost) has joined #sitepoint

[19:53] There are more developers involved in Sass then LESS.

[19:53] than*

[19:53] I know one thing… I find it *difficult* going back to writing CSS in the regular way!

[19:53] @TheDutchCoder I’ve been asked here to chat about CSS, had best not take it off topic – always happy to talk about Perch elsewhere though ;)

[19:54] Oh my bad! :D

[19:54] I’ve lost track of where we’re at a bit. Let’s get things back on track. Has anyone got a question that hasn’t been answered yet?

[19:54] Main thing I like wih pre processors are mixins, very invaluable

[19:54] Concept me too and Sass was easy to learn you could insert regular css too wherever you were not up to it with SCSS

[19:54] rachelandrew – What’s your top solution for equal height elements?

[19:54] CSS question then: what was your most recent “wow” moment while learning something new in CSS?

[19:55] The main thing I tell people who are just starting with web stuff who say they want to learn Sass is to learn plain CSS first and know what to expect the output to look like

[19:55] rctneil Agreed

[19:55] How do I stop an image from dragging off the page when trying to drag its container?

[19:56] rctneil similar to jQuery <-> JavaScript imo ;-)

[19:56] definitely you have to know the css well to get into sass

[19:56] My most wow moment has to be with the work that I’ve been doing on CSS Grid Layout, I think it’s the best solution for having a proper layout method, early stage at the moment but worth looking at

[19:56] thewebwiz What do you mean by “drag”? It’s resizable?

[19:56] very true

[19:56] rachelandrew LouisLazaris You may have seen my articles on Sass. I’m a unconditional Sass hacker, I love it. Do you feel some preprocessors’ features are kind of crossing the line between what CSS should be able to do and what it shouldn’t? Where do you stand on this topic?

[19:56] TheDutchCoder Today, when I was looking into Vertical Rhythm for the first time, it’s great, nice typography and Sass and Compass are invaluable!

[19:56] rachelandrew nice, what kind of system are you going for? Is it inline-block based and responsive?

[19:57] can you talk more about the css grid layout?

[19:57] equal heights in css grids are a constant source of pain for me. What’s the best solution anyone’s got?

[19:57] The compass website and documentation are out-of-date and confusing

[19:58] HugoGiraudel I think Sass is the way CSS should be, and it should always have been that way. It’s so much more powerful with programming capabilities. When it’s just plain CSS, it’s too simple and too contrary to basic software engineering principles (DRY, etc)

[19:58] @TheDutchCoder I don’t follow, I’m talking about the new CSS Grid Layout module http://www.w3.org/TR/css3-grid-layout/ rather than any grid system

[19:58] LouisLazaris – Dragging an image gallery with JS – works on a DIV, but images move by themselves!!

[19:59] TheDutchCoder Currently only supported in IE10+. Chrome Canary will soon join the way.

[19:59] SpaceBeers I hate to say this, but the best way to do equal heights so it works cross-browser is either via JavaScript or the old faux columns technique. It’s just a sad reality, but at least there’s a way.

[19:59] SpaceBeers – display: table-row/column works IE 8+

[19:59] how soon will the grid layout be usable?

[19:59] Ah okay I follow now, thought you were working on a framework ;)

[19:59] rachelandrew – That looks very interesting.

[19:59] Yeah it’s certainly interesting for layouts

[19:59] SpaceBeers Yes, what thewebwiz said. That’s an option too

[20:00] Welcome to those people that have just joined. Feel free to jump in with questions – I’m queueing them for Rachel and Louis

[20:00] thewebwiz – Again, I don’t know what you mean by “dragging”?

[20:00] @lj try beta.compass-style.com More up to date. I wonder when Chris Eppstein will finally release 0.13?

[20:00] SpaceBeers – Louis is right. But gradients may help (SVG?)

[20:00] thewebwiz – yeah I like that one. I always liked the negative margin trick myself

[20:01] Grid layout kind of exists in IE10 (but the old implementation) however it’s fun to play around with

[20:01] rachelandrew Do you have any ideas on the release schedule of Compass?

[20:01] I have a set of slides here that I presented yesterday which have some more info and links to resources https://speakerdeck.com/rachelandrew/css3-grids-and-regions

[20:01] “Currently only supported in IE10+. Chrome Canary will soon join the way.” Who thought we’d ever be reading a statement like that! lol

[20:01] @rctneil I don’t use Sass or Compass so I don’t know

[20:01] CSS-Tricks has an Almanac entry on Grid Layout: http://css-tricks.com/almanac/properties/g/grid/

[20:01] Honestly, I’ve been avoiding the Grid stuff simply because it’s so new and has little browser support. I think flexbox is good to look into, but again, not as practical because of the cross-browser issues.

[20:01] rachelandrews Thank you!! And rctneil

[20:02] rachelandrew Fair Enough, thanks!

[20:02] IE10 has some great stuff in it – also support for some Regions and Exclusions stuff, they are doing good things :)

[20:02] And IE11 is really close to live.

[20:03] I am trying to us Singularitygs in its default isolation mode but my css is coming out with floats.

[20:03] For those who haven’t seen this yet, videos from the recent CSS Day are online: http://vimeo.com/channels/cssday

[20:03] Does it make IE 6, 7, 8 AND 9 miraculously disappear? ;-)

[20:03] Definitely not.

[20:03] But we’re getting to it.

[20:04] Does anyone know if IE10 is going to auto-update to IE11?

[20:04] Can they be watched if you didnt do the summit?

[20:04] @lj yes, of course!

[20:04] Thats great I was so interested in that.

[20:04] there are IE11 VMs now available at http://www.modern.ie

[20:04] LouisLazaris As far as I know, no.

[20:04] LouisLazaris At least on desktop.

[20:05] LouisLazaris But I might be wrong though.

[20:05] XP users (of which there are stil many in corporateland) are limited to IE9 and below

[20:05] HugoGiraudel That is pathetic, really, if that’s true.

[20:05] Good news is we will have to find new hacks! :D

[20:05] I think the lifecycle of MS browsers is linked to their supported OS

[20:06] LouisLazaris – By dragging, I mean go to any page with an image in FF or Chrome, and use yr mouse to drag the image. It will copy onto any palce you drop it. How to stop that?

[20:06] Is there another way to test css cross browser besides browserstack, to test a local file?

[20:06] lj http://www.modern.ie

[20:06] @lj use VMs

[20:06] Nothing better than Browserstack as far as I know.

[20:06] ConceptFusion – I think you mean IE 8!

[20:07] Browser VM’s is really the only reliable way I have found to test… either locally or remotely…

[20:07] thewebwiz Ummm, there’s no way to stop that. But it won’t really copy into just any place. I don’t see that ever happening the way you describe…?

[20:07] complicated to look at local files in Browserstack

[20:07] My bad… and SO much worse! lol (SVG nightmares)

[20:08] thewebwiz – The only way that might happen is if you drag it into an but I’m not even sure about that

[20:08] LouisLazaris – well, I have lots of unwanted images on my desktop from doing that! :)

[20:08] I was reading recently that IE will auto update now. Not sure how it works, though.

[20:08] rachelandrew Can’t find IE11 VM on modern.io. :(

[20:09] thewebwiz – Oh you mean drag onto your computer… Oh yeah, you can’t stop that, that’s a user option on their OS/Browser. I thought you meant, drag to another part of the page.

[20:09] thewebwiz Why do you want to stop that?

[20:09] rachelandrew Found! :)

[20:09] It is definitely there for Mac and VirtyualBox at least – you need to select your test environment and Virtualization platform to see

[20:09] LouisLazaris – cuz I am making a draggable image gallery. :)

[20:10] @thewebiz But that shouldn’t affect your image gallery functionality. Your script should override that, AFAIK

[20:11] thewebwiz Unless they drag to their filesystem (e.g. desktop), which would then be outside the browser, so you have no control AFAIK (but hey, I might be wrong; some further research would help)

[20:11] Welcome to those of you that have just joined. If you have questions, jump in at any time – don’t wait for a gap.

[20:11] I’ll post a full transcript up on SitePoint later today

[20:11] LouisLazaris Hmm. Don’t know how. (A using native JS for a responsive site.)

[20:12] thewebwiz Are you using a drag-and-drop plugin? You have to use drag-and-drop functionality, not just rely on the user’s ability to drag natively.

[20:14] @thewebwiz: Use img{pointer-events:none} to disable the dragging of an image (in browsers that support pointer events)

[20:15] LouisLazaris – not drag and drop – drag to next slide. Using JS but want to stop browser moving the image. Found a CSS property for Webkit, but not FF. ANyone?

[20:15] Hello, I am now starting to built a responsive website. with a big image background. which would be at least 1024px width on desktop but on mobile device around 320px: but then you need a lot of loading time for the small device? or how does that work?

[20:15] like, I prob use the -cover- function to crop it

[20:15] thats great wizbiz if it works…to make it more difficult for people to grab copyrighted images

[20:16] webbiz

[20:16] thewebwiz I think I’m still confused by what you’re saying. Contact me on my website using the contact form (in the footer is the link) and maybe I’ll have more time to explain once I understand what problem you’re trying to solve (www.impressivewebs.com)

[20:16] LouisLazaris rachelandrew what are your thoughts on frameworks like bootstrap? Do you think it’s helping building good CSS, or does it interfere with it?

[20:16] LouisLazaris okay. Thanks.

[20:16] @artfulnessnl there are some good suggestions re responsive images in this article http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

[20:17] @HAWK—can we post Paul’s code in the code editor?

[20:17] tnx! and I have the same question as TheDutchCoder I dont know if its because I am also Dutch, haha :)

[20:17] hehe ;)

[20:17] ralphm Good idea – I can give Paul permission to do that

[20:17] Paul Good news, Internet Explorer 11 will be the first IE version to support pointer-events.

[20:18] I mean Paul..looks like a very simple solution. I’ve seen people put transparent images over the real ones for that purpose

[20:18] (we’re very sceptic people obviously)

[20:18] @TheDutchCoder I’m not a fan, fine for prototyping but those things leave you with some incredibly bloated CSS.

[20:19] TheDutchCoder Regarding frameworks like Bootstrap: One of the things that these frameworks have done, which I like, is help promote modular, or OOCSS, which is good. I find sometimes people add these frameworks to their sites just to use one or two small things, which is bloat, but overall I think they are good for helping solve problems quickly. I

[20:19] believe Rachel wrote a good article on solving problems we don’t have, maybe she can link it up.

[20:19] Paul – you have permission to use the code editor if you want to post the code that Ralph is referring to

[20:19] @HugoGiraudel Yes that will be useful as Pointer-events is already supported in Firefox and Chrome at the moment

[20:20] Paul And Opera. And Safari. And Android.

[20:20] this one – more about stuff like HTML5 Boilerplate really, but yeah :) http://www.rachelandrew.co.uk/archives/2012/03/21/stop-solving-problems-you-dont-yet-have/

[20:20] TheDutchCoder – I love frameworks. I’ve studied most and learned a whole lot from each of them. Making my own… :)

[20:20] I’m asking as I currently have to work for a client with bootstrap and I find it interferes with my OOCSS more than it helps… Maybe it’s also because a lot of it dictates design elements.

[20:20] TheDutchCoder – The fact that these frameworks have separate modules that rely heavily on classes (and don’t use IDs) should be a clear indication that modular is the way to go.

[20:21] thewebwiz yeah they’re great for learning, but I’ve built me own that has no actual styling (it’s more of a layout framework than anything). Going back feels very cumbersome

[20:21] Paul You can save that code to a Gist which will put it into the transcript (use the settings cog)

[20:22] Who posted that img code? Thanks a whole bunch. That looks like a winner.

[20:22] This session is flying. We have approx 10 mins to go. If you have any unasked questions, now would be the time to jump in

[20:22] Saved editor: https://gist.github.com/6083386

[20:22] thewebwiz I believe it was Paul :)

[20:22] TheDutchCoder Agreed. I had a beginner friend ask me for help with a problem with Bootstrap, and I honestly couldn’t fix it without removing Bootstrap. It was conflicting with stuff and it was very hard to figure out what was wrong without removing it all and starting from scratch. I think the nature of CSS sometimes makes it easier to build stuff

[20:22] from scratch than to learn a frameworks’ intricacies.

[20:22] Do you have any recommendations for learning exercises like: here is an image for the page, now create the css for it. (this type of approach has worked well for me in the past)

[20:23] LouisLazaris yes of course, the modularity is very nice, I dislike the aesthetical part of it. Just a quick example: Bootstrap removes background images on active states of buttons. Things like that make me feel it’s more of a “I’m a designer and don’t want to learn code” thing. ;-)

[20:23] Thx Paul.

[20:24] is there a nice source for responsive navigation?

[20:24] thewebwiz You’re welocme :)

[20:24] http://css-tricks.com/responsive-menu-concepts/

[20:24] By Tim Pietrusky at CSS-Tricks.

[20:24] and for mobile: a button/link which links to a telephone number?

[20:24] For those interested in getting on overdose of frameworks and other front-end tools, I’ve recently launched a new newsletter: http://webtoolsweekly.com/

[20:25] how you do that

[20:25] :)

[20:25] tnx!

[20:25] Use the phone number as a href. Call me maybe.

[20:25] HAWK You might want to add this to the code editor. :)

[20:25] @artfulnessnl http://bradfrost.github.io/this-is-responsive/patterns.html a great set of design patterns including navigation

[20:25] ooooow, luckely some things are also just easy !

[20:25] More patterns here: http://bradfrost.github.io/this-is-responsive/patterns.html#navigation

[20:25] paulirish Hey Paul, nice to see you here! :)

[20:26] HugoGiraudel – You can do it :)

[20:26] Another responsive nav link (also Brad Frost): http://bradfrostweb.com/blog/web/responsive-nav-patterns/

[20:26] paulirish has 4 minutes to stump us :)

[20:26] :) hi all from russia!

[20:26] HugoGiraudel DOn’t forget to save to Gist

[20:26] “tel:” required?

[20:27] <3z

[20:27] Yes, forgot about this. :P

[20:27] I am going to steal the: call me maybe concept for sure

[20:27] Saved editor: https://gist.github.com/6083436

[20:27] louis, no questions. just came by to watch n learn

[20:27] 5 minute call, my friends

[20:28] Does the call me work for those using Skype on desktop?

[20:28] paulirish haha cool

[20:28] TaoistTotty that would be awesome, ha!

[20:28] There should be My Address!! :)

[20:29] Q. tel: link – how to make international phone number. Include + and country code?

[20:29] I always have problems with centering stuff. like navigation that has a float left

[20:30] is there a trick?

[20:30] I guess whatever you put after `tel:` (as long as it’s a number) get parsed. So Call should work. I might be wrong though, really not sure about this.

[20:30] Not sure if this helps: http://demosthenes.info/blog/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-&-Microdata

[20:30] artfulnessnl if you use inline-blocks then you can set the parent to text-align: center

[20:30] taoist, it works if skype installed this nasty browser extension that hijacks all your telephone numbers. otherwise nope. mostly a mobile thing

[20:30] artfulnessnl try inline-block

[20:30] Just make sure there’s no whitespace in between elements (use HTML comments to remove them if you want your code not to become one long string)

[20:31] @artfulnessnl There are better options than float in that case, like display: inline-block and display: table …

[20:31] Are their any problems with using inline-block?

[20:31] artfulnessnl I wrote about that here: http://www.impressivewebs.com/center-multiple-divs/ which works on list items too

[20:31] So that’s our hour up people. Thanks for taking part.

[20:31] paulirish Thanks, and I agree about that being nasty

[20:31] A HUGE thanks to Louis and Rachel for their time.

[20:31] Fighting the gaps between inline-blocks.

[20:31] You’re all welcome to stick around and chat for as long as you like, but I’ll cut our experts free when they’re ready

[20:32] **applause for Louis & Rachel!**[20:32] Thanks everyone, I’ll stick around for a bit

[20:32] Hear hear on thee applause

[20:32] Thanks everyone!

[20:32] thank you – good to chat to you all :) it’s late here so I’ll be disappearing in a moment

[20:32] And for anyone that missed it, here is Louis and Rachel’s latest book https://learnable.com/books/jscss1

[20:32] lj not if you develop for IE8+

[20:32] Same here on the applause

[20:33] thanks now I’ve got a hundred tabs open with all the good links suggested

[20:33] what about Chrome font face-rendering….and thanks so much Rachel and Louis and everyone

[20:34] Here’s a general question for all: Do you find yourself using the official specs for research? Or do you normally just use MDN or other such references?

[20:34] I liked the book. Couldnt put it down. read it cover to cover

[20:35] LouisLazaris both tbh. I find the official specs to be a bit overwhelming at times and MDN a bit too limited in their use-cases, so a bit of both!

[20:35] MDN most of the time. Official specifications when I want to dig deep into something.

[20:35] @LL what ever comes up in the searches! ;) but I do like MDN

[20:35] lj.. lots of work going into Chrome text rendering on windows lately. basically it means porting the text rendering backend from GDI into DirectWrite. it’s a biggg effort but we’re moving fast on it nowadays

[20:35] read the book to. But I always find myself struggling when I then put it into practice. everything seems so simple when you read

[20:35] LouisLazaris Usually other references as I tend to assume I won’t understand the official specs.

[20:35] and then you end up spending 3 hours on one div that doesnt go where you want :D

[20:36] lj: https://code.google.com/p/chromium/issues/detail?id=137692#c104 has the latest update

[20:36] THanks for the update PaulIrish…I thought maybe it was me. Is there a workaround?

[20:36] I agree with what HugoGiraudel said, I use both, but I personally think the spec has way too much stuff in it that doesn’t matter, and I think it could be trimmed down. It’s also got too much jargon and stuff that everyday people just don’t understand.

[20:36] the workaround most people use is using the svg font instead of the woff for Chroem

[20:37] *Chrome. this mostly works fairly well.

[20:37] Seriously, official spec are not for everyday read. It is overly complicated (which is perfectly normal by the way).

[20:37] ok… here’s something I struggle with: when is it best to use CLEAR property??

[20:37] LouisLazaris I think the spec *should* be very detailed, just for those edge cases, but yes, a more readable version would be nice for devs and newcommers

[20:37] I found a few tips in the book to help me immediately with my projects

[20:37] -m

[20:37] I think someone could easily built a funny quotes website called QuotesFromW3C.com :) with lots of ridiculously hard to understand examples.

[20:37] I’d say when you have elements A and B floated, and C as a direct sibling of B. Then you can clear with C.

[20:38] btw any headway of the responsive images front. None of the solutions seem ideal – canvas, multiple images size via media queries etc

[20:38] I think http://webplatform.org/ is supposed to be a sort of middle ground in that area.

[20:38] So I can specify the svg for Chrome, somehow, let’s say with Modernizr? Of course I have all the formats in there

[20:38] But I feel it came too late in the game to have a major impact.

[20:39] I have high hopes for WebPlatform. Looking forward to its growth.

[20:39] HugoGiraudel hmmm…. I wish there was an example I could see. I’m green @ this

[20:39] webplatform.org is still trucking. just been quiet on the outreach front but the content is doing very well

[20:39] chineebro I think that will always be a problem until we get a single, cross-browser solution that solves all the issues.

[20:40] it’s not come up many times, but when it has in class, i’ve just scratched my head.

[20:40] and maybe that’s it, i’ve not seen it enough times. but, thought I would ask.

[20:40] lj: i would sniff for chrome on windows and set a class.. use that to use a diff @ff definition that has svg in front.. you still want woff in front for everyoen else imho

[20:41] HenriHelvetica http://jsfiddle.net/e26Xs/

[20:41] chineebro My knowledge of the resp. images thing is pretty limited now. I’ve been mostly just reading other people’s thoughts and waiting for something good to emerge, so I can’t say much in that area. :)

[20:41] HenriHelvetica Try removing clear: both from C.

[20:41] @Henri when a non-floated element follows floated elements, it will tend to try to slide up beside the floated elements, which you often don’t want. So setting it to clear stops that happening.

[20:42] For most images I simply scale them in the browser, as most devices that need responsive layouts tend to render them nicely, but it’s far from ideal (e.g. it still downloads the full image of course)

[20:42] Thanks Paul Irish…this Talk has made my day. Gotta go. Bye. Look fwd to seeing the transcript with the many resources and links

[20:42] Ok guys, I have to head off – I haven’t had breakfast yet.

[20:43] Feel free to hang around for as long as you like, but note that the session will no longer be moderated.

[20:43] HenriHelveticaThis is a very old article but should help : http://www.search-this.com/2007/09/05/lets-be-clear-about-this/

[20:44] I wonder if it will be as big of an issue in a few years time as bandwidths and data speeds increase

[20:44] chineebro That would be ideal, if some sort of break-through data transfer technology would make that whole issue moot… but I doubt that will happen any time soon.

[20:45] i’m out. later Louis, Hugo. <3z

[20:45] chineebro agreed… And also don’t forget that for truly responsive images you need to generate several versions of the same image, sometimes cropped differently too… Maybe someday this will be much easier to do in CSS natively.

[20:45] Okay, thanks Paul

[20:45] See you Paul! Thanks for passing by. :)

[20:46] Yea I feel as the best solution is to have a new type of file format that compress well. But that would mean introducing a whole new standard… :)

[20:46] Thx gents for the links.

[20:47] After this is over, If anyone has any questions, I’m happy to hear them if you contact me directly: http://www.impressivewebs.com/contact/

[20:48] And again, in addition to the book (https://learnable.com/books/jscss1/online/ch01.html) you can also check out my newest project, a new weekly newsletter for front-end developers: http://webtoolsweekly.com/ :)

[20:48] Sorry, i am novice here. Louis can you explain me about FnExpr and FnDecl?

[20:49] Thanks Louis. I’m signing up. :-)

[20:49] andychups I don’t know what those are…. where are you getting those words from?

[20:50] I think that’s Java talk, no? ;)

[20:52] guys, do you know BEM?

[20:52] john yes I use it for our projects

[20:53] john I know of it, and I think it’s a very good methodology for large teams working on large projects. But I haven’t used it.

[20:53] Sure.

[20:55] I think andychups was messing with us

[20:55] Anyhow, I gotta head out everyone, thanks.

Talk With The Experts: CSS

Ricky Onsman — Thu, 25 Jul 2013 14:23:14 +0000

When I say “Experts”, I don’t mean just any garden variety, common old experts we happened to have lying around.

No, sir. This week, our increasingly popular online chat session features Louis Lazaris, most recently known as the author of our Jump Start CSS title, but well known to many SitePoint readers for the many articles on HTML and CSS he has written for SitePoint over the years – as well as many more on his own website – and his groundbreaking contributions to our 2011 book HTML5 and CSS3 for the Real World, and the video course of the same name.

But that’s not all.

Also in attendance will be Rachel Andrew, the Technical Editor for Jump Start CSS, who is also know to us as the author of our CSS Anthology and co-author of Everything You Know About CSS is Wrong.

But that’s not all.

Code samples tend to be a key part of any discussion about CSS, and wouldn’t you know it, Talk With The Experts is this week launching its new super-duper, custom-made, verrry shiny Live Code window.

All of this should make it one of the best TWTEs ever. There will be a transcript made available after the event, but why would you wait for that when you can jump in and join the chat from 12.30 PDT on Thursday, July 25?

Get on board at https://experts.learnable.com/.

The Web Designer’s Guide to Image Copyrights

John Tabita — Thu, 25 Jul 2013 13:30:18 +0000

Photographers—even amateurs—can get touchy if they think you’ve used their image without permission. About a year ago, I used a Flickr image in a blog post. Although I credited the photographer at the end of the article, the blog summary page displaying the image thumbnail did not have the credit line.

When the photographer saw I’d used her image, she didn’t bother to check the actual post to see if I’d credited her; instead, she sent me a snarky email, then posted a comment on her Flickr page, telling everyone how I’d “stolen” the image.

Once I showed her where I’d placed the attribution, it was all well and good. Misunderstanding avoided.

The ability to self-publish has led to the mistaken notion that, if it appears in a Google image search, it’s okay to use. As web professionals, we ought to know better. Coming from a graphic arts background, I already understood how copyrights worked long before I started designing websites.

Unfortunately, that’s not always the case. It’s easy to get into web design with little or no budget; and the temptation to use images from the Internet, rather than paying for stock photography, can be … well, tempting.

What’s more, easy-to-use blogging platforms like Tumblr and WordPress means people with no understanding of copyright laws are right-clicking and “Save(ing) Image As…” each and every day. Many of us build WordPress sites for our clients; it’s important we advise them on the proper use of images before giving them the keys to the back-end.

As a designer, placing copyrighted images on a site puts your client in an awkward position. After all, who do you suppose the owner of that image is going to contact? Even if a simple “cease and desist” resolves the matter, it’s still downright embarrassing. If you don’t have access to a stock library, a simple solution is to build the cost of a few stock images into the price of the site, then charge the client extra if he needs more.

When it comes to professional stock photography, there are two traditional licensing models: Rights Managed and Royalty Free.

Rights Managed

Rights Managed means the right to use the image is managed and controlled—usually by a stock agency. Images are typically licensed for a set fee based on where it’s being used, and for how long.

Rights managed images are advantageous when the advertiser wants to be sure that the image they’ve selected is “off-the-market” and not currently being used in any other advertising or—God forbid—by the competition. Paying more for a rights managed image ensures this never happens.

Royalty Free

Royalty free doesn’t mean free to use; it means you don’t pay a royalty payment each time you use the image. When you purchase a royalty free image—either individually or as part of a compilation—you may use it as often as you like, as many times as you like.

There are some usage restrictions (such as placing the image on a tee shirt or template you’ll be reselling), so be sure to check the licensing terms carefully.

The downside of using low-cost, royalty free imagery is the risk of a popular image or the same model appearing many places at once—such as here and here and here and here and here and here, and as well as a well-dressed doctor on a local medical center billboard here in my home town.

If you’ve built more than one website, you probably realize how difficult it is to obtain content from clients. Despite the risks, a typical small business doesn’t have the marketing reach or budget of a Dell or Gateway, so royalty free images remain a cost-effective alternative.

It’s certainly a better option than using images from a Google search. Unless the image you found specifically states terms of use, assume it’s not available to use. Otherwise, you may find yourself on the wrong end of a rights-violation sting. (And if you do, please don’t construe this article as legal advice. I’m not an attorney, so be sure to consult with someone who is, if the need arises.)

With sites like Flickr, you might be wondering why anyone would pay for photography, when you can get no-cost images legally. I’ll be covering that topic next week, so stay tuned.

Image credit