Ok, well since Lorna is here, we may as well kick off. The format here is basically a free for all – if anyone has a question then throw it out there now.

I’ll monitor the questions and make sure that they all get answered.

can we start w frameworks?

Can we start with – What is PHP? :)

Sure thing @mycritter – did you have a specific question relating to frameworks?

Here you go @SEO2013 http://en.wikipedia.org/wiki/PHP

BTW, I’ll be posting a full transcript of this session up on sitepoint.com tomorrow, along with resources

well, what is the real world benefit of using a fw and which are really right for solid dev?

Thanks for the link. How long on average does it take to learn PHP?

@mycritter that’s a great starting question!

@SEO what prog languages are you familiar with now?

None unfortunately which I’m sure isn’t the answer you wanted :/ I’d really like to learn though.

Frameworks give you structure, and they also give you a quick start on the things that are the same in every project, they usually have routing, logging, templating … that sort of thing. So they save some of the repetitive work for you

I’d also like to plug Lorna’s latest contribution to the Learnable/SitePoint network, which is her course on Object-oriented PHP https://learnable.com/courses/object-oriented-php-2734

@seo2013 you just gotta get the book

Frameworks also give a common way to do things, so they make it easier to bring in a new developer to the team and that that person pick up the project much more quickly

@SEO2013 This is a great beginners course https://learnable.com/courses/php-mysql-web-development-for-beginners-13

@mycritter I’d say that the benefit is mostly to developers and to speed and quality of development – much more than how much difference it makes to the end product. Frameworks are about getting things done.

@lornaJane, do you use an out of the box framework or a platform like a cms for your web dev?

Welcome to anyone that has just joined us. We’re LornaJane is our expert today and we’re currently talking the benefits of using frameworks.

As for which frameworks are solid – they all have their strengths. For example ZF2 and Symfony2 are totally comprehensive, but they can be pretty heavy if you’re only building something simple. There are lightweight frameworks, where you will need to do some of the work yourself such as Silex or Slim. And then there are frameworks that are more aimed at friendliness than performance – that might be something like CakePHP

@mycritter I’m a consultant so I work with whatever my client has. My personal projects have been a mix, some ZF, some Slim, depending what I was building. Hope that helps give you some ideas!

Quick question about frameworks?

@TheCliff go for it

I am curious does heavy frameworks put more load on my server?

for rendering and things?

speed of the code being rendered and so on.

Lorna, do you have to spend a lot of time with each project learning its environment before being productive, or is there a small enough pool of common frameworks that you generally have it covered?

@TheCliff yes, it certainly can do. The frameworks can do lots of work in the background to make for easy, rapid development. For a very performant application, a full-stack framework probably isn’t the right tool. For 95% of sites, it’s absolutely fine

Php & Mysql “Novice to Ninja” is a pretty good starting point @SEO2013

Awesome answer thanks!

@TheCliff: generally the extra load is negligible, and if you have enough traffic for it to be a problem, you can afford to scale the site across multiple servers. The benefit of writing less/easier code faster with a framework outweigh the execution (in)efficiency.

Impressions of Twitter Bootstrap compared to other frameworks? That’s the only one I’ve used, mainly because it was the first I found and was pretty easy to pick up

@MikeH Many of the frameworks have good documentation and lots of shared ideas. For example many of them are MVC, they have routing, the templating tools are alike even if not exactly the same … and I’m very good at debugging after lots of practice! So I usually dive in and learn that way.

I should introduce Paul.Annesley. Paul is a senior dev with the SitePoint group.

An important aspect of using a framework is the security is can provide; default escaping of variables in HTML output, sanitizing user input, handling common gotchas, quoting/escaping database queries to mitigate SQL injection etc.

@theCliff: That’s a good point from @Paul.Annesley – mostly, the developer’s time will be MUCH more expensive than your hosting costs. So it’s a net win to use the framework and get your product shipped

The flipside of that, is that you inherit any security vulnerabilities present in the framework you use, which happens in all frameworks from time to time.

@Jerry The twitter bootstrap is more of a frontend framework, this discussion is more about the server-side frameworks which are written in PHP. The learning curve is different for the various frameworks, but as I said, many of them have excellent docs

Paul—as a senior dev do you become more specialized or broader in the languages you use server side?

@Paul.Annesley On that note, for someone who is relatively new to PHP, would you say the benefits of having pre-built security outweigh those of potentially missing certain aspects in our own code?

Do you know of any good comparisons of pros/cons for various frameworks?

@lornaJane, on basics, do you have good recommendations for securing our code for beginners. ways to stay ahead of hackers.

@MikeH: Both :) I learned a lot about PHP language and tools. I did so by taking on side projects like creating the PHP client for beanstalkd:https://github.com/pda/pheanstalk … I also learn other languages when I have time, and mainly write Ruby these days.

@mycritter: The built in functionality of frameworks can really help with security, as they will include database escaping and filtering input values and things

@BrandonKasteler: I certainly pick the benefits of a framework over trying to do it all myself… the latter results in attempting to build your own framework, and you end up with no time to build what you’re setting out to build.

@mycritter: my top tip though is to use the Filter extension in PHP for the incoming variables. Make that a requirement and it will reward you :)

Would you recommend PHP coders to get into Frameworks — MVC style of programming? I have been coding in PHP for 5 years now. Part of the reason I haven’t gone into Frameworks is because over the past couple of years I’ve put together a great “functions” file that has tons of stuff for me to use during coding to speed things up. I would need to find out if a framework has what my functions do in order for me to consider using it. I am really not sure what a framework really does to speed up writing code. For the most part I just need basic Mysql_query’s, while loops, and basic math. Would a framework really help that much trying to speed up basic php commands?

@Jerry: framework comparisons are pretty difficult, they are all aimed at doing different jobs so it’s comparing apples to oranges in many cases. I don’t know of any good benchmarks

@TheCliff: I’d say that for a really basic site, it probably doesn’t matter. Once you start building things that are a bit more dynamic, they will really make your life easier – particularly once you get past the learning curve

To anyone that has just joined, welcome. We’re currently talking frameworks, but if you have a question on any aspect of PHP (or OOP PHP) please throw it out there at any stage

I have a general point I’d like to add: PHP started as pretty much a way of embedding bits of code into HTML; making it a templating language. And using it like that is not a bad way to start learning it. But to build a serious website, one needs to learn to separate the templates from the logic of the website. Frameworks make that much easier to do (they provide models, controllers etc, which are pure PHP and don’t contain HTML).

Can you give me a quick example of one way that frameworks save time? Like a type of command or something that it would help with.

@LornaJane Bookmarked the various frameworks you’ve mentioned to look at later. Thank you kindly for that information.

or a site that would show me why using frameworks save time and how.

Lorna—do you work mostly with larger custom apps, or still on (WordPress|Concrete|Magento|LemonStand|Joomla) based sites?

@TheCliff http://www.phpandstuff.com/articles/top-10-reasons-why-you-should-use-a-php-framework

@TheCliff the simplest example is things like building forms, you define a form and the framework does client side validation, server side validation, handles the failures, displays the form itself, and gives you back valid data when it’s done. Saves a lot of repeat code for every form on every project – and you never forget to validate one field

@lornaJane, most of my clients want a cms. there are great options out there. recommendations on going w them vs building proprietary?

@Cliff: also things like there are database libraries already setup, and logging libraries

@BrandonKasteler that’s my pleasure, good luck with those

@lornaJane that could be very useful. I’m looking at that page now @hAWK

@mikeH, just saw your q. great minds think alike ;-)

@MikeH: I work almost entirely on custom apps, built with frameworks. I’ve got wordpress as my blog, but that’s all (and I didn’t build it myself!). I’m API specialist so I work more with integrating systems, and they are usually framework-built bespoke apps, just because that’s the best tool for these particular jobs

Hi Lorna: When writing a class is it always important to follow a design pattern. A lot of my classes seem to follow no design pattern at all. Is this a bad thing?

@mycritter: going with an existing open source CMS and customising it means that you get all the work done in the existing one for free, your client only needs to pay for the extra bits that are specific to their system, and you only have to do interesting and unusual bits of development, rather than repeating yourself all the time

@oatley, ooh, now we’re getting into the fun stuff ;-)

stuff like Drupal has loads of extensions and will offer you security updates all the time – and your own code won’t do that with zero work from you :)

Specialization begets productivity IMO. Having to swap often between frameworks, libraries or CMS brings a lot of overhead, and requires a lot more research time

@Oatley: not a bad thing at all. Too many design patterns is a bad thing. Not following patterns isn’t a problem. In fact, if you read a design patterns textbook, you’d probably find many more familiar patterns than you expect. The bottom line is that we’re developers and that means we solve problems. Whether those solutions have complicated-sounding names or not doesn’t matter IMO

I’m still really new to PHP, and haven’t touched a framework yet, but wouldn’t it pretty much be like a comparison to jquery and javascript? The dirty work simplified down into managed solutions?

@ridinQwerty broadly speaking — yes

@MikeH That’s not my experience, I find it helpful both in terms of getting things done and in terms of code quality to build on the existing libraries available in the open source world. Switching between them is hard work, but worth it, at least for me

Thanks for that page @hAWK

@RidinQwerty that’s a nice analogy, yes :) Some frameworks are little more than a few libraries – and you might add a few more to make something you’re comfortable with. But they’re just there to wrap things up and make them quicker to use

@ridinQwerty: main difference; jQuery is a library that you call from your code. A framework generally defines where you should put code so that the framework can call it when appropriate.

@TheCliff np

@LornaJane I agree on building on their foundations. I just find it hard to keep up with multiple systems.

For those of us without code reviews, etc. any ways of knowing when our OOP code is no longer procedural code in class? I feel like mine is haha.

@lornaJane so for beginners what framework would you recommend getting started with? I’ve had tons of people tell me that Yii is the best one as of late. What are your thoughts as far as learning curves, ease of use, etc. are concerned?

@ccovey <?php class Ccovey { public function__construct() { $this->isProduceduralInAClass = false; } } ?>

@ccovey: Method length is usually a clue. If your methods are really long then you’re probably still working in quite a procedural style. Some methods will always end up long though – such as a controller action for a complicated page

Apart from your own excellent sitepoint book (which I found out about at you at one of your excellent training courses i attended at Leeds NTI!) what other OOP books would you recommend?

@ccovey …problem solved

ccovey: one way is to try writing unit tests for your code… if you manage, it’s probably decent enough OO. If it’s really painful, maybe it needs refactoring to be more OO :)

@TheCliff: I haven’t used Yii but I’ve had people who do both front end and back end enjoy it. I usually recommend that people get comfortable with OOP, then try out something like CakePHP – it’s not too complicated a framework but is built by smart people and has a fabulous community behind it.

@Paul.Annesley speaking of, what is the Unit Testing framework de jour?

I have been trying to keep methods under 20ish lines if possible and have started testing on my recent side project

awesome. I’ll look into that!

MikeH if only I would’ve known that years ago :)

@Oatley: PHP Master is the only resource you’ll ever need!! Seriously though, there aren’t a lot of OOP books out there. Once you’re at the level where PHP Master is making sense, you’re better reading the blog articles so make sure you’re subscribed to phpdeveloper.org and the Sitepoint sites including phpmaster.com – that’s where much of the advanced content goes, and it’s properly up to date. Many of the books are pre-PHP 5.3 right now, although I’m seeing updates coming out

@Paul.Annesley I probably have awhile before I will be able to ingest what you just said. I’m still goofing around with filling tables with data I create and ect… Not too far along at all in other words. I’ve just gotten comfortable with the front end of things, so it’s time to progress. I’ve got the first two books you guys offer on it though, and am enjoying them. The one on OOP with be the next.

@ccovey: that sounds to me like you are on the right tracks already, great work

I assume you guys know about Lorna’s OOP course…https://learnable.com/courses/object-oriented-php-2734

Sure do

@MikeH: sorry for the delay… I believe PHPUnit is where it’s at. http://www.phpunit.de/

I’ve mostly used SimpleTest in the past, but I don’t recommend it, and don’t let the name fool you… it’s not simpler :)

Good. I started to dabble with that one a few years ago.

And what @HAWK said – if you’re looking for an intro to OOP, I have the Learnable course up now, mix of me talking (and drawing pictures!) and showing code, which I hope will help. For those who learn better from reading, the PHP Master book has an OOP chapter but also chapters on Design Patterns and on Databases, using PDO which is also object oriented

I definitely recommend learning to write unit tests if you want to do object oriented proramming.

@lornaJane, are we talking applying OOP to PHP, or implementing new powerful PHP versions?

Hi Lorna. Thanks for all your help by the way. Another one for you When I’m writing classes I can never seem to extend them. In examples I constantly see things like cat extends animal, which makes sense. But in the real world I’m never going to be building a ‘cat’! Say I’m building something like a website, what would be a good example of using extends here?

I had to switch my email address to join because it said someone was using it, on a unrelated but related note. ?

@mycritter I can take any questions you have

@ridinQwerty same with me. Remembered my email from a chat months and months ago and wouldn’t let me in

Same. Fake email addresses all round :)

Lol

@ridinQwerty and @MikeH Yeah, that is a very frustrating bug with this s/w – I don’t even know why it stores the emails, I can’t aces them. The good news is that we have our own interface well on the way to completion and with any luck I’ll be using that for the next session.

Related fact: did you know example.com and example.org etc are reserved for testing, so you know nobody will get email sent to them?

@Oatley For example you might make a base model, and your other models extend from that – same for controllers. Quite often I do this the other way around. When you copy and paste something into another class, then instead you should create a common parent, rather than looking to create a child

guess we should all log out before closing the browser

I had to try 3 fake email addresses before I found one it would accept. :)

PHP Pros — do you do any front end dev work (excluding personal projects)? Or put another way do you get to focus on the server side?

Yeah, sorry about that. Annoyingly, they don’t answer support tickets either so there isn’t much I can do except bin the product.

@Oatley also if you’re using a framework, have a look around in it’s source code – you’ll see some very good “real” examples there of when classes are extended – and sometimes you’ll want to extend their classes yourself to add things

np @Hawk

@MikeH I do not do any frontend dev work. To put it politely, it’s not where my talents lie :) It isn’t a problem because I do APIs rather than websites a lot of the time

Lorna, I’m a ZCE 5.3. Do you know of when/if the exam will involve the very latest version of ph

@MikeH: I’m no pro in frontend stuff, but I like to do some occasionally to keep up to date. I think when you’re working server-side, it’s important to understand how the data you’re pushing to the frontend layer is going to be worked with and displayed.

@lornaJane, when you say “do APIs”, do you mean build or integrate them?

Indeed.

@oatley: I can’t see the ZCE exams updating any time soon. It’s a huge investment for Zend to make that happen and I’m confident they aren’t working on that at the moment

Github? Is it as ubiquitous as the all the kids say?

@mycritter: either/both. I build lots of APIs, but also go in and make systems talk to one another with whatever functionality they have available. I spend more with data and servers than with browsers, by a long way

@MikeH I think source control is ubiquitous. Many companies use alternative hosting as GitHub is expensive for private repositories, but the idea of having remotely hosted collaborative source control is standard, in my experience

Welcome to those of you that have just come in. We’ve mostly talked frameworks so far and are now touching on source control.

Thanks Lorna, with extends can you extend anything? For example I see this “has a” vs “is a” debate, so for example would it make sense for something like a class FormBuilder to extend the class validation? (keeping things separate?) thanks.

Oatley: keep in mind inheritance isn’t the only way to bring functionality into a class. Check out http://en.wikipedia.org/wiki/Composition_over_inheritance… you can just write small methods on your class which call out to other classes dedicated to that particular job.

@Oatley the “is a” and “has a” debate is useful in terms of naming things and thinking about how they go together. If you try to extend one thing into another incorrectly, I usually find that you’ll realise that this makes no sense pretty quickly :) My advice is to try out your ideas on a small scale, and see if you think it works for your application

contrived example which might help illustrate composition, as opposed to inheritance:

class Form {
  public function validate($field) {
    $validator = new Validator();
    return $validator->validate($field);
  }
}

so Form is “composed of” Validator… it uses it, but doesn’t have to deal with the complexity of inheriting from it.

Thanks Paul & Lorna :-)

it could also have a translate() method which calls out to a Translator class… much harder to extend/inherit from two different base classes :)

One thing ive always wondered In a class before you write any methods at the very top you declare your properties (ie public, private, protected) a lot of the time when I have forgotten to do this my script class is fine so why do they need to be declared?

@Oatley they don’t need to be – if you just start using properties, they work fine. BUT by declaring them, you can document them, and also if you don’t want the properties to be public (which often they shouldn’t be) then you will need to declare them and their visibility

@Oatley it’s good practice to declare them, but PHP will roll with it if you don’t, it’s very tolerant

@LornaJane: does failing to declare them raise warnings at certain error_reporting levels in modern PHP?

Depends on usage

PHP borrows heavily from Java for its class/object model, and Java being a statically compiled language depends on those properties being declared up front.

@hawk. Will a article of all the questions and answers today asked be somewhere on would be very useful. Thanks

I seem to remember having problem with __set() and __get() magic methods when not declaring properties. Details hazy.

$this->foo += ‘bar’; will throw a warning if not declared. But that is a bit of a different issue

@Paul.Annesley no warnings from PHP, it’s a backward compatibility thing. PHP 4 had no visibility, so public was the default then, and that’s still the case now. You can just use properties and PHP will assume that you meant to do that

@oatley Yup. I’ll post a transcript of the session on sitepoint.com tomorrow :)

I’m trying and write a mini framework that creates drivers or for any PDO queries, or read any XML files passed into my system. Is this a good idea, or is it overkill?

Maybe problems with serialize() or json_encode() if you don’t declare them? I’m clutching at straws :) But they should definitely be declared.

@oatley And all transcripts of these sessions can be found here http://www.sitepoint.com/forums/showthread.php?873280-Transcripts-From-Past-Sessions

@Oatley it sounds like a good project to me. You might try to make them as standalone classes – then you can add them to any other project, even if you’re using a framework, by including your classes in the autoloader

Here’s an interesting thing to consider: if you have a site that doesn’t need a database etc, but you want the benefits of using PHP to create it (e.g. shared header/footer/layout/components etc), consider a static site generator. Write your site in PHP, generate it to HTML files, and deploy them to a static website host or Amazon S3. Never get hacked ;) In Ruby-land, I’d recommend http://middlemanapp.com/ for that. Googling around for PHP examples, I see http://www.phrozn.info/en/ and http://sculpin.io/ and various others, but haven’t tried them.

@MikeH: going back a bit… I’m a massive fan of git and GitHub. git is not trivial to learn, but I consider it well worth it… definitely one of my most valued development tools. I `git init` and commit to any old directory I write code/docs in, even if it’s just a one-day-one-developer project.

And git doesn’t lock you into GitHub… there’s other hosts, or you can host your own, or if you’re a solo developer you can just not push your code to a remote server. Git can run entirely locally, doesn’t need a server.

I’m going to jump in and say that we have 5 minutes left of the session (at which point you are welcome to chat amongst yourselves but I’ll cut Lorna free) so if anyone has a question that they haven’t asked, now would be the time

@Paul.Annesley I’m pretty ignorant with VC, except that I do understand it’s benefits. Is Git (without the hub) still good for getting code onto different machines? Do you need to setup a host?

Never mind, you answered that

@MikeH: git works great over SSH, so you can push/pull easily between any hosts you can SSH between.

It might not be something I should admit publicly, but I use Windows and would have to learn SSH too

:) PuTTY is an excellent SSH client: http://www.chiark.greenend.org.uk/~sgtatham/putty/ … it’s been years since I’ve used it though, and I’ve never used git on windows.

@MikeH You are in good company there, plenty of windows users around

There’s a Windows GitHub client though.

Thanks.
What about code documenting? I used to use PhpDocumenter, but I couldn’t get the latest version to work

If you have the time and interest, I’d recommend running a linux (Ubuntu?) virtual machine on your windows machine, so you can play with and learn tools like git/php/etc in the environment they were built for.

I use gitbash on windows wish comes with ssh already installed for you so then you just need to generate keys ect.

I’m usually running an Ubuntu Server virtual machine on my Mac, which I SSH into.

And… that’s a wrap. Thanks very much to everyone that participated. I’ll post a transcript up on SitePoint tomorrow. Don’t forget to check out Lorna’s course https://learnable.com/courses/object-oriented-php-2734 and lastly… a huge thanks to Lorna for her time, and to Paul for stepping in at the last minute to help out. Much appreciated.

You’re all free to stick around here for as long as you like, but the session will no longer be moderated. :)

@MikeH definitely phpDocumentor, I’m sure their IRC channel or mailing list would help you with setup problems

Thanks Lorna, Paul, Hawk

If you’d like to sign up for email notifications of future sessions, you can do so here https://www.facebook.com/sitepoint/app_115462065200508

I’m a generalist, so my to-learn list is as long as my arm. Might not extend to Linux.Thanks @LornaJane, @HAWK

No worries @Jerry

Thanks for having me everyone, some good questions today

See ya everyone

Cool, thanks everybody for the questions and interest.

Maybe my inability to spell ‘documentor’ was the problem? Thanks

I’m http://twitter.com/pda on Twitter, although you’ll see more about Ruby etc than PHP there ;)

GitBash on Windows is handy just for the Unix tools that come with it (grep, etc.)

Paul, do you find Ruby (on Rails I presume) to be a lot faster for CRUD like apps than PHP?

@MikeH: honestly, I don’t build many small apps in any language, so it’s hard to comment on that.

I much prefer the Ruby language to the PHP language, despite it being slower

and Rails is an impressive framework, but it’s incredibly large and therefore complicated… takes a long time to really learn it.

My answer is: web development is hard. :)

Does the new book cover bootstrap, or some other framework?

@ TonnnnUK Bootstrap can be a great introduction

Hello. Andy – Front end developer from Brighton UK

I would love to be able to use a framework that was responsive-ready

@SHARKIE yes, I used it following a YouTube tutorial! We’re spoilt these days for learning :)

the company I work for is very keen on ‘original’ designs & layouts

BTW the transcript of all this will be available at… ?

Hi to anyone that has just joined – we’re just introducing ourselves

I’m Community Manager at SitePoint

Our experts are @SHARKIE and @ajfisher – authors of JumpStart RWD

(I’m not going to type Responsive Web Design every time)

If you haven’t seen it – here is the book:http://www.sitepoint.com/books/responsive1/

https://learnable.com/books/responsive1

@HAWK why did I have to use a different email to gain access to the room

Hi all. I’m Jeff. I’m in West Virginia (4 p.m. here). Redesigning two websites now using responsive design, with new tools & techniques seeming to pop up every day.
Now enamored with Twitter’s “Bootsrap” framework, but tomorrow? Maybe something else.

@srpsco An extremely annoying bug with this app that I have no control over :(

I don’t have access to the email addresses so I have no idea why that happens

I’ve logged many support tickets and never had a response

@HAWK ok fair enough thanks

if you know of a better app – let me know!

@Jeff_S The huge interest in the movement is leading that dynamic growth. Its really exciting

So it’s 9am – let’s kick off. Has anyone got a question that they’d like to kick off with?

@b0ss_ I think a link to the transcript will be posted in the Talk with the experts thread?

It will be posted up on SitePoint.com @b0ss_ @guido2004

Hi all, I’m Cris, from Guatemala

I would like to know what is covered in the book when I checked earlier the book had not appeared on sitepoint.com/jumpstart page yet

The book is up now - http://www.sitepoint.com/books/responsive1/

But I’m sure the guys can give you a brief rundown of the contents

@srpsco The book’s available now!

Hi all I’m Leanne from Oxford, working as a front end developer. Tried my first responsive site the other day with media queries.

Sounds like I need to follow up with the issues logging in here

I haven’t had a chance to checkout the book – but I’m wondering if there are any resources (live/updating) in the digital version that deal with popular device dimensions?

And more specifically if twitter bootstrap and coverage of responsive images and data tables are included

I bought it yesterday. Only had a chance to skim through it, but I like what I see FWIW!

hi all… I built a responsive resume with the ‘foundation’ framework… plus several others – but these frameworks seem to be jumping about like ‘cats on a hot tin roof’

@Jeff_S Thanks!

@jeff_S great!

@mcynowicz Chasing device sizes is not necessarily the best way to go.

My first time in one of these chats … tell me how it works and what will I learn?

@mcynowic There’s no capacity in the digital edition for constant updates, but I’m sure sitepoint.com will keep you updated on news

Hi, would you recommend the ‘Mobile First’ strategy? If yes, what about the browsers that do not support css3?

Hi @Mary It’s a free chat – you ask questions and our experts answer. What you learn will depend on what you ask :)

Hi – I’m Jean in New York. I’m a Digital Solutions Architect specializing in eBooks, HTML5 and mobile apps for an offshore publishing production company. I’ve been working with stylesheets since way before CSS3, so RWD is actually not new to me. Just new in syntax…

What’s the best RWD framework to use?

Hi All. Pete here from Hastings UK. Have to do a little bit of everything on websites – so not great at anything :(. Worked with Bootstrap for the first time today. Woah. Maybe ideal for someone like me. (Kids due home any moment so may have to leave at short notice. Apologies if I do.)

@ralph.m Is it safe to assume that device sizes are unofficially standardized? Can we now break down to simply phone, tablet etc?

@SHARKIE perhaps you can address this : but I’m wondering if there are any resources (live/updating) in the digital version that deal with popular device dimensions?And more specifically if twitter bootstrap and coverage of responsive images and data tables are included

@ralph.m great point Ralph. Using your content as your guide to when breakpoints are required is the most responsive way forward

@molona – it appears many of us just made up fake addresses

my biggest dilema is “pixels/ems/pt” – does anyone have a definitive response?

No worries @pete – I have my kids watching Aladin on the couch beside me…

how about rems?

Mobile First Strategy or Responsive Web Design? Why ???

Rems yes

Responsive images has a whole chapter, and Bootstrap is there as well.

@ralph.m it’s important at my company because we rely heavily on Google Ads – I need to conditionally load different ad size based on sniffing the device width

Nothing specific about tables in the first edition

@simonJae – it what context?

@simonJae I’ve seen and read about ems and percentages

@crissoca – what exactly is a REM?

@simonJae – pixels and points aren’t gonna get you anywhere in the world of responsive design that is relative to the device in front of the user… EMs, %, and REMs are gonna be the way to go.

@HAWK fyi I see it is up on the sitepoijnt books page but not http://www.sitepoint.com/jumpstart/

@MarkDSki As SHARKIE said, it’s better to look at the logical breakpoints for your content. There are many different screen sizes, with no ‘one size fits all’ as far as I know.

REM were a good band…that’s all i can contribute :)

@jerry… I knew I wasn’t the only one :-D

@srpsco Ah – ok. I’ll have that addressed today. Thanks

Hey, Mikko here from a train somewhere between Stockholm and Mariefred.
Saw some post here about frameworks. When it comes to grids there are allmost too many to count. The one I’ve recently found and really really like is unsemantic.com . Anyone else using it allready?

@simonJae REM is a relative EM

@simonJae http://snook.ca/archives/html_and_css/font-size-with-rem

responsive design and mobile first complement each other and are not mutually exclusive

REM = root em – where you set a specific size on the root, and then refer to REMs so that everything is relative to what you set for the root – less math.

and everybody is setting root (body) to 10px I guess.. AS YOU SHOULD ;)

@SpaceBee – with large ‘.net’ sites I have found myself calculating some of these “ems” like 3 times… !!!

@mcynowicz That sounds like a tall order. Device sniffing is a lot of work. Needs constant monitoring and updating. Not worth it IMHO. I would explore the possibilities of making those ads more fluid.

@joshbyers Great point Josh

RD can be used progressively (see the 320 and up framework) which falls in with a mobile first philosophy

@jeankap – yeah – that makes sense – thanks

no one should be setting root to 10px… That’s WAY too small. Usability studies say 16 px at least. more for those of us in the world who are blind as bats.

@ralph.m So you’re saying to start applying responsive design techniques once the content/site design requires it? Regardless of device dimensions? I could see this as a good way of designing.

do you guys have any experience working with already made sites by a third party to make it responsive?

@ralph.m Does Google provide fluid ad sizes? I was under the impression that they were static width & height by pixels

@mcynowicz You could use your advertisement units as the content which drives your breakpoints

@b0ss_ Mobile First is really an approach to RWD. It comes from the view that it’s **generally** easier to start from the smallest screen sizes and work your way up to larger ones, enhancing your design as you do to take advantage of more space

I have been working in old technologies … ASP and Javascript, etc. I am getting ready to retire form my day job (yes, I’m old!) Is this somehting I can easilty pick up?

yeah sure it is too small. but it’s easier to calculate rems. you should set your texts to a bigger font ofc

I have recently worked in some sites like this and it kinda becomes a nightmare

@Mikko 10px is pretty small. Too small for me. Try to avoid font’s in px.

The guys over at Filiment Group wrote a nice article on leaving the default font size alone,http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

@crissoca – yeah. This was my task a couple of months ago – .net also

joshbyer : thanks

@crissoca I have used Genesis responsive themes for WordPress

@MarkDSki Yes, that’s a better approach, I’d say.

How does one start with responsive design?

If anyone has any good resources then make sure you drop them in here – I’ll list them at the start of the transcript

I have a responsive WP theme from themeforest.

@Mary I hope with the book you’ll be up and running in a weekend. And then you’re on your way

Mobile first approach is a good one because it forces you to prioritize the site hierarchy. That’s prioritization is always important but because of the small screen starting point, it demands it.

@mcynowicz I’m afraid I don’t know. Something to investigate, though.

it used to be said that you should set body to 76% of whatever and tehen calculate from that. problem is, if I have set my browser font to something else than the standard 16pt then everything is more or less crapped

Good starting question @imagestic – how does one get started?

ajfisher: 1) someone typed here they complement each other. True? (2) The way you explained is exactly the opposite as gracefull degradation, right ?

@crissoca I have always felt that to add responsive design technology to a website often requires a very thorough redesign. Not just of template, but often a rethink of content too

@imagestic – start with a google on “responsive frameworks”

that’s what I mean with setting “root” to 10px. then it is easy to calculate from that, if you use rems !

@Mary: I’m convinced this is the way forward. If you’re doing web design, learning this will be worth every bit as much as learning HTML and CSS in my opinion.

Welcome to anyone that has just joined us. Our experts today are @SHARKIE & @ajfisher – please feel free to jump in with questions at any point. I’ll do my best to make sure that everything gets answered. If things move too fast, you can grab the transcript off sitepoint.com later today

I have been having the same issue to my graphic designer, how to get started – I have been providing a layout but laying of graphics which I dont like. @imagestic

@mikko The proportions should be the same if you do EVERYTHING in relative units. So your design should be coherent even if the scale wasn’t what you’d originally thought of

thanks @HAWK and @Jeff_S

I have found that Bootstrap is very easy to start with. Also Foundation by Zurb is really good too, but you almost get too much with that framework. You have to take time to thin out the code you don’t need.

@ajfisher Maybe you could address the question of how to get started with RWD?

Thanks @Hawk. transcript is a great idea :)

@thebrassman Agreed. Much easier to build from the smaller device up. At the same time, I think that when designing now to incorporate responsive design techniques, it is important to consider and picture how the site will look across all dimensions in the early stages of design

oops @Sharkie especially

@mikko – why not “@media” queries?

@markDSki yeah I feel like it’s not only a matter of the developer but a whole team work

@ShARKIE well yeah they should be, but u know :)
if you set 10px (or whatever) it’s like resetting the size no?

@imagestic Perhaps a good place to start with responsive design is to change your fixed width layout to a $ width. Watch how the layout reflows as you narrow and widen the browser window. (Technically, responsive design has been around a long time.) Now there are more sophisticated tools for responsive styling, thanks to things like @media. (Of course, another way to get started is to get the book. :D )

@b0ss_ your’re right – thinking mobile first is the opposite of graceful degradation. You start with the mobile device and then progressively enhance with the options that a bigger screen afford you

@MarkDSki Totally agree. In fact that’s one of the challenges of working with clients is the, “what will it look like?” question. There are two levels of education going on here…our own understanding of the technique and the clients’ understanding.

@ralph.m I see, thank you very much

@mikko If you’re design is fluid – if the dimensions you use all come from the browser, and there are no fixed widths – then even going down to 10px font size should mean your design will respond

Is writing Responsive CSS the normal way really too hard to be using a framework/ bootstrap instead ? I don’t think its really hard or anything to start with …. ( yes I have not jumped on to the framework/bootstrap bandwagon yet )

is it safe to use rems? do browsers support them?

@ralph.m I ended up using this technique to swap Google Ad Slot IDs based on widths

@imagestic Oops, I meant to type “change your fixed width layout to a % width”.

@imagestic easiest way to get started is to use one of the frameworks and see how it makes things responsive. Responsive version of Bootstrap or Foundation for example. That will give you a sandbox to play with where you can observe things going on and see how they work. If you want something a bit more barebones then the responsive layout for HTML 5 Boilerplate is a good learning tool also

@ralph.m http://www.labnol.org/internet/google-adsense-responsive-design/25252/

@joshbyers Think of it as enhancement, rather than degredation

@christos as far as I can tell it needs a fallback size

I built my website in rems a few weeks ago, no issues,

http://caniuse.com/#search=rem

REM support is great http://caniuse.com/rem

IE 9 & IE 10 do not support rem units when used in the “font” shorthand property.

@ajfisher Nice! Is Dreamweaver a nice tool for Responsive Design? If not then what is?

again… why does everyone use EMS – it is an archaic measure. Why not POINTS?

h, @ralph.m, , I thought $ meant “flexible” or “adaptive”. We could introduce the term here ;)))

Nice link @mcynowicz :-) (I thought there must be something like that.)

I just completed this client site using Foundation as the framework. http://www.neheart.com

@simonJae PTs are a print unit

Responsive web design is tool agnostic. It’s all about the target apps/browsers/devices you test on.

@images any too is good for RWD or any kind of design… if you know how to use it

Thanks @spaceBeers!

@imagestic well I use Vim ;) but the reality is you’ll need to test it in your browser and on target devices so editors shouldn’t make a big difference

what is the current best practice for images that also addresses retina displays

@jeankap that is so true

@blanchrt Sounds like it would cost too many $$$ :p

@srpsco Good question. Anyone?

@SpaceBeers – 8 ‘points’ make up an EM – though POINTS are closer to pixels – both are a print term

@imagestic… the problem with Dreamweaver (or any other WYGIWYS) is that if you trust the automated code it crates, your site will be … rubbish… speaking of code, obviously

You do not have to use a bootstrap framework of any kind to make a Responsive Design … its really just straight forward CSS

Anyone have any examples of sites they’ve built using responsive techniques?

I mean its not neccessary to use a framework for RWD

so instead of ems/px/pts would you set a base pixel size and work with percentages for font-size?

@imagestic but if you know your code well, then it may speed your productivity

@ralph.m – cost is dependent on your business requirements and your content strategy. You don’t have to pay for everything up front, but you do have to expect a reasonable amount of cost for the amount of effort required to meet your business requirements and satisfy your content strategy. In short… try to deflect the expense conversation until after you know what it is you need to do.

@thebrassman – artatwork.com.au/resume

@srpsco You’ll need to be looking at adding the srcset parameter to your images and watching as browser support grows. I’m looking forward to it becoming more popular

http://www.jobhub.com (just went live today, first responsive project, please be kind :-) )

@mcynowicz – yes. that would be a preference…

100% is approximately 16 px in most browsers where you haven’t mucked with the user agent settings. Start with 100% and scale up and down from there.

@simonJae Very nice!

@jeankap Apologies, it was just a poor attempt at a joke. But good point anyway. :-)

@mcynowicz Thanks for sharing I’ll take a look later. What was the best part of the development experience?

@srpsco srcset is your friend here. Though support is a little light just yet but will get better.

so in order for my site to be responsive, it should use EM instead of PX ?

… even a POINT base size

jeankap, it was just a joke with a typo ralph.m did (he wrote $ for %)

@mcynowicz – let me have a valid zip…. :)

@thebrassman finalizing this one. Soft presentation right now. http://www.nonanetwork.com this used the bootstrap framework

@ralph.m no worries… I just think all the way back to why we’re doing this in the first place. :)

@mcynowicz Nice Job! Looks good!

valid US zip: 90210

and I’m following the conversation out of one eye… ;)

We’re redoing one of the biggest travel brands in the world using Bootstrap at the moment

@b0ss you definately have to go fluid… and that means EM or % instead of px

@thebrassman – used the “Foundation” framework – very nice!

@b0ss_ Relative versus fixed, not necessarily EMs

@b0ss_ that’s a start and you have to use percentages for your width also for the site to shrink

While designing responsive websites is it recommended to use either Bootstrap or Zurb foundation

Whats the best way to test my RWD? Can I rely on web based emulators?

@helloCarlosR – I like how you’ve resized the header text for smaller screen sizes. Nice work!

@b0ss you could also test and have fun with the new measure units (such as rems)

now using a framework called “gantry” (through Joomla)

How far (realistically) do you take device testing?

@thebrassman thank you

@SHARKIE I liked working with a fluid/mobile layout. I haven’t had the opportunity to work in that environment much. Lots of devices sitting on my desk :-)

So… this may sound old school, but what about not using a framework and actually starting from scratch? What are the benefits of not including a whole bunch of stuff you might never use anyway?

@Tunbosun both Bootstrap or Foundation are a great place to start. Bootstrap might have you seeing results slightly faster

@srpsco depends on the type of image and the context in which you’re using it. For icons you can use an icon font, css3 multiple backgrounds combined with media queries is a good option and then for content images there are several scripts available though this is still in the wild wild west stage in my opinion (not sure if there is a “best practice” yet)

@pete good question – you can use emulators to start with but nothing beats testing on actual devices. Not least because with mobile devices you’ll need to see if your touch targets are big enough to actually hit with a finger….

@jeankap just what I am talking about

I enjoyed this blog post about ems in responsive design: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Worth reading.

@pete firefox has some testing tools under the web developer tools add on. Which shows what you’re site will look like in different devices etc. It seems pretty good.

@jeankap: Good question!

@jeankap in my opinion, that depends on the project and your schedule

@jeankap – David Bushell wrote a good piece on this recently - http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/

I don’t think responsive frameworks are the way to go for beginners. If you don’t get your hands dirty, you will not learn. Besides, they take out all the fun.

@mcynowicz Seeing your design just WORK in different devices is always a great buzz

On the subject of device testing, we’re launching a product that crowdsources front end testing on a number of devices. You can sign up for beta here eyeball.sitepoint.com

I relied very heavily on The Responsinator for initial testing: http://responsinator.com/?url=http://www.jobhub.com&scroll=ext

Are we in the beginnings of responsive web design, and how long will it take business owners to be willing to pay to have their fancy websites revamped? (I know this is more marketing/business rather than technical)

@jeankap. good question. this helped me a little. http://tinyurl.com/ar8axu6

@jeankap I think starting from scratch is the best way to learn the responsive approach. Depending on the scale of the project, it may take longer but you’ll get a lot out of it. The benefit of a framework is that it’s awesome for rapid prototyping.

@HAWK – Thanks. I used to go to the local phone shop and test my sites in there.

@jeankap if a framework is well design and speed the process then there’s nothing wrong using it… still, if you have to personalize almost every single bit… you can start from scratch and make it work the way you just want it to work

Just thinking… In an ideal world, where the powers that be have been convinced to let you do it right instead of just get it done… No framework could mean cleaner code. I come from the days of SGML and XML. I like clean and valid code…

I might be the odd one out over here maybe, but personally I find bootstraps and frameworks irritating …. nothing wrong in writing code the straight forward way

@SHARKIE thanks if i want to add some margins to a content while using bootstrap the layout gets scattered

@jeankap Frameworks and boilerplates get you great results quickly, but for long term success I always prefer to roll a custom solution. It’s lean and fast!

@tonnnnUK how good are you at selling? how much is the business worth? how much money can they do if the design is revamped?

I’ve gone to the local warehouse club to do testing on the 7 inch tablets. Take screenshots and send ‘em to myself. Or just take pictures with my phone…

Can anyone give me any details of the error they were getting about their email address when logging in here?

@anir99 I feel the same. I’d rather write my own code.

@jeankap – how do you mix IE compliance with RWD?

@tunbosun Try adding margins to elements inside the grid, rather than to the elements that structure the grid

@tonnnnUK if you can estimate how much more the business will earn with the new design, that will help you to set the price right

I’m all in favor of up and running fast – that’s why I bought a WP theme instead of rolling my own. I just don’t have that kind of time… But for a customer project? I’d try to do it right.

@TonnnnUK my company is very old school when it comes to designing/re-designing a web project. I couldn’t convince anyone here to ‘approve’ RWD. There’s a learning curve for the designers and no one in marketing really followed my arguments for business value

@TonnnnUK Businesses might wait until their site needs a revamp anyway. And then they’ll have to decide if a design that reflows for various devices is really the way to go.

@leanne @ajfisher cheers

which CSS editor do you recommend?

@anir99 You are not alone. :-)

@jeankap lol. great idea.

TonnnnUK: Sharkie and Andrew’s first chapter, I think, covers some of the essentials we need to understand before conveying the importance of this to managers and business owners. This is not about mobile anymore. This is about universal design that is device agnostic. And it works. And it’s cool.

@imagestic I use CSSEdit, or simply Textmate

I got lucky in that this particular project passed under-the-radar and they let me design it on-the-fly while I coded

@mcynowicz – good reason to go “mobile first”

they didn’t know ahead of time that it was going to be responsive

@simonJae IE compliance? I plug my ears and say “la la la la I can’t hear you”… and then I go look for a shim, a workaround, or a hack. But only if I can’t convince the client to just move on to a browser that will support their requirements without hacking.

@tonnnnUK the other thing to consider there as well is that a well implemented piece of RWD will probably last longer now than a “traditionally” built site so your overall cost goes down

@imagestic for me, Notepad++… because I know how to do macros there and I absolutely love the Zend coding extension

@molona I guess it is a sales pitch…..I think the majority of biz owners will be ignorant of it for a fair while….how long did it take for them to realise they needed a normal website?

@jeff_S Thanks Jeff! That’s a great point

@imagestic – I am in the same boat as SHARKIE

@HAWK If you have used an email address before, it doesn’t seem to let you use it again (say it’s already taken). So I just make up a different one each time.)

I asked a CSS WG member about editors recently. He said most of them work in their favorite ascii editor. With the exception of Daniel Glauzman (BlueGriffon developer).

all hand coding and Firebug etc

Some great responses…..thanks guys

Thanks @ralph.m

What are some of people favorite solutions for off canvas navigation on mobile?

@imagestic

for me VI or GEdit !!!

@simonJae there are CSS3 Media query polyfills for IE compliance, check this out:

http://chrisjacob.github.com/Respond/#RESET

https://github.com/scottjehl/Respond

@jeankap Same here, I bought a WP theme for use on a personal project. Saved me hours upon hours for minimal cost. It’s been much easier to take an existing theme and make basic modifications than to build from scratch, or even on a framework. That said, this approach is definitely very dependant on the project.

@tonnnnUK that’s why you need to figure out the results of the competitior your client wants to beat (they will have to tell you who is their competitor, in their eyes) and how the website can help them to reach those figures… they don’t understnad design or the need of a website… but they do understand the value of money… that’s international language

@simonJae IE doesn’t play a huge role in a lot of places that you’re design will appear. That means that you’re only gong to need to make sure one of your breakpoints works, in general. And you can always give them a little conditional support

I’ve been testing Espresso, Style Master, and TopStyle 5 (PC). TopStyle was my favorite back in 2000. The newest version is all tricked out for CSS3 and HTML5… And then I just do stuff in Sublime Text 2 because it’s quick and dirty.

@imagestic css is better without an editor imho

If you go ‘Mobile First’, what do you do about the browsers that do not support media queries?

@christos The lack of media query support is the first media query, then use min-width to build up.

@lorraine care to explain that? Not sure that I understand what you mean

@molona spot on! money talks.

a big sell for the Business/Marketing aspect is the opposition to device-specific URLs and redirects – a single URL without a device-sniffer redirect is better for SEO rankings while maintaining the integrity of the user-experience on any device

@christos If you’re first target are mobile devices they’ll all support Media Queries

Thank you for the answers people!

@anir99 – thanks Anir. there are also several other JQuery modules – see here (somewhere) - http://www.unheap.com/

+1 @mcynowicz !

any recommendation for calculators

@christos media query support is pretty good these days ( http://caniuse.com/#feat=css-mediaqueries ) and excellent on mobile but if you need to look after browsers that don’t support it then that’s your fallback test

px2em is an iOS app that is supposed to take the pain out of the math conversion…

@srpsco Grid calculators? Have you had a look at https://gridsetapp.com/

@simonJae Thanks Simon for the link, I’ll check it out :)

can someone post a URL example to a Responsive site they’ve built using Bootstrap?

Isn’t the Bootstrap site responsive in itself?

I feel a lot of the heavy lifting should be put on the server – as in device detection

Isn’t the Bootstrap site responsive in itself? [2]

@mcynowicz Interesting point, can you provide a bit more detail on how a device-sniffer redirect can be a negative in SEO? Do search engines actively look for these redirects and adjust your positioning accordingly? Does this affect search results across different devices? I currently run a website (non-responsive) that redirects to a /mobile URL based on device.

@mcynowicz have you had a look at http://builtwithbootstrap.com/?

@simonJae Really? That’s more to the progressive enhancement side of things, then, isn’t it? But what about the UA’s that “lie” about what they are and what they can do?

@jeankap @b0ss_ I was under the impression that it was a framework – I was interested in design customizability

@mcynowicz Take a look at http://builtwithbootstrap.com/

@simonJae Device detection requires a lot from you, too—or from someone, at least, as new devices have to be added all the time, and not all devices are easy to detect.

Welcome to anyone that has recently joined us. Feel free to jump in with questions at any time.

@simonJae a combo of client side and server side detection will usually yield the best results. Clients still have more capacity for feature detection than the server does which can really only interpret the request and make decisions from there.

@MarkDSki it can be a negative for SEO based on the fact that it slows the site down. Since site speed is a factor for SEO every redirect and request has an impact

@ajfisher that’s what confuses me. My fallback is wide sized ie8 or ie7 window?

@ralph.m – agreed. though its time the server worked for us… don’t you agree?

@MarkDSki if you are redirecting your visitors to an alternate URL, then you are registering activity at a secondary URL, no?

Not a technical question – Thoughts on showing / hiding content on different sized devices?

@SpaceBeers – absolutely

(hiding)

@joshbyers Fair point.

@spaceBeers That’s where Media Queries excel

@MarkDSki also Google prefers responsive design ala one url which doesn’t necessarily hurt you but who’s to say they don’t promote sites with RD more as part of the algorithm somewhere?

@christos as Sharkie mentioned, having a catch all if you’re targeting mobile first should be enough for those that don’t support it. You’re really just ensuring that you have a reasonable default.

@simonJae Personally, I’m not too keen to overwork the server too much. Responsive design is more about CSS and perhaps JS, which it browser territory. But there are many factors here … and server stuff is not my thing.

@spaceBeers I think you could just use the display: none; css rule for that

@ajfisher ok, thanks. I think I’m getting it now

together with the CSS Media query

FYI I know how to do it – Should you be hiding your content from your users just because they’re visiting from a phone?

so if Ie8 doesn’t support media queries (http://caniuse.com/#feat=css-mediaqueries) do all RWD either use polyfill or settle for a narrow site on that browser?

@ralph.m More and more we’ll see Responsive Content becoming a factor too. Especially for Mobile First design. Using the server can be a great tool here

overall I would say it was much less work hours spent building a single responsive layout with a single testing URL than to build one layout, and then another separately for Mobile devices

I am surprised nobody is pushing for a “device switch” at the server

Specially as their is no “view full site” available. Your essentially cutting your content off to a certain % of your audience

@anir99 But ALL users will have to wait till all that hidden content is downloaded anyway

“you’re” of course.

@SpaceBeers: Content has to be purpose-driven, has to be prioritized with purpose in mind. Some images are only decorative, and losing the doesn’t hurt. Lose what hinders, keep what your users came for. That’s my rule of thumb, anyway. :)

@spaceBeers if it is on his and your best interest, definately, you should be hiding content… such as pictures that only serve to delay the delivery of the page

@mcynowicz True, visitors are registered as landing at the abcd.com/mobile page. Don’t get me wrong, the plan is to move to a responsive design on the next redesign, however its interesting to hear some opinions/discussion on how a separate mobile version of a website negatively affects SEO.

@simonJae we’ll server the server playing a bigger role as Content First design becomes more typical

@SpaceBee if you’re hiding content it tells me you haven’t thought through your architecture enough – a mobile first philosophy solves this pretty well

@simonJae you can also consider routing different templates out of your view that you send to the user based on the broad decisions about their capability (eg UA checking or session variables etc). Then you can tweak the presentation using more standard RWD techniques to deal with the nuance (eg res differences across iPhones). We actually talk about this in the book

@blanchrt I think that would be the case with visibility: hidden; and not with the display: none; rule

@SpaceBeers – but thats a good thing… !! is it not?

” Lose what hinders, keep what your users came for.” That’s a great mantra

@SpaceBeers If you mean setting content to display: none, I’m not keen on that … unless maybe for an alternative menu or something small like that. I don’t like the thought of mobile users downloading content they can’t see. If you find that there is a lot on the desktop version of the site that you don’t want to appear on mobile, it’s a good time to ask if that content should even be on the desktop version at all. (I like the way mobile design is making us ask these questions. Many websites are full of unnecessary and distracting content, IMHO.)

They are and they aren’t… One of the things that came out recently is a debate over the @supports conditional that just got added to CSS3. Some people are in favor, others, not so much. They think it’s vague, and should be more specific. They also worry it could lead us down the path to places we’ve already been – like browser extensions.

@spaceBeers understanding each device and how to interact with it is a must for a good design… and not losing the % of users that you spoke about before

Given that the majority use other browsers, when we design a site, should we have in mind IE too, or not?
What’s your opinion?

@molona hiding pictures doesn’t mean the device doesn’t request them and download them – it just doesn’t display them

@spaceBeers thats a good point you made

+1 @ralph.m

Yeah. WE have to keep IE in mind. Especially in the corporate and government world. There’s just no getting out of it.

Especially in locked down desktop environments. Yep. They still exist.

@ajfisher – is that true. Its where we should all be going. Thanks

@imagestic since it is still a major browser, you should take it into account, of course… but the browsers that are more important depends on your business and website…if you have some statistics, even better

IE is still an important browser but try and implement a “current minus one” policy. That should give you sufficient coverage. Also go back to your data. I did some work for a retailer and we showed that IE users just simply didn’t buy as much stuff as “the rest” to a significant level. That pretty much contextualised where they should be spending their development budget

anir99 It doesn´t take space (as with visibility: hidden), but it IS downloaded. Disable CSS and you´ll see everything

How does a mobile only site detract from SEO? If you do not allow spiders on it. Then your main site is indexed and mobile users are taken to the redirected mobile url. Yes/No?

if you are building a responsive site though, your IE8 (or lower) browser will miss your media queries entirely. If you are building your CSS media queries in a shrinking format (desktop first?) won’t your site just be ‘fine’ in IE8? It’s not being loaded on mobile devices

Statistics for IE are scary. There are still so many users out there using XP that we cannot get out of supporting IE 8. MS is pushing IE 10 to Win 7 this week, but that doesn’t necessarily mean that everyone will let the push happen.

This chat has been full on! Is there anyone lurking that has a question that they haven’t had a chance to ask? Or anyone that asked a question that hasn’t been answered yet?

@joshbyers true if you only use CSS with a display:none… but that would mean that the picture was there in the first place… so why don’t we do it the other way around? We add the picture when necessary using either background properties (of course, you should not limit yourself to background properties…)

@joshbyers or any other property that will help us with that particular content

@ajfisher – interesting fact (IE buyers) – were they high end products???

@mcynowicz There are some schools of thought where IE6-8 should load the mobile-only version of the site. However, I tend to include IE conditionals so the desktop version of a site is visible

@HAWK What are some of the best ways to do off canvas navigation?

couldn’t you do a conditional comment for ie8 when doing small -> up

@ajfisher – yes very interesting regarding IE buyers. I should dig into some client’s stats

@simonJae not really – it was a fashion retailer.

@molona, @joshbyers – We’re looking at loading content in aysncronously on desktops, so for tabs, modal windows etc, where they’ve got the most power. Mobiles (with terrible connections) would have the content on seperate pages. Should keep the site nice and snappy.

@schnell I wrote about this recently – One site helps with backlinks, bounce rate and load time. http://www.copyblogger.com/mobile-responsive-design-benefits/

@HAWK – just trying to read up LOL

thanks @joshbyers

@SHARKIE What are some of the best ways to do off canvas navigation? (for @mhenderson)

I know that Craig and Andrew mention progressive enhancement in the book. Quick summary statement of its ongoing importance and relevance in combination with RWD?

@schnell data is definitely the way to address a lot of those concerns, especially with clients. Look at the way people behave as well not just the proportions as well.

@molona yep – I agree. Background properties with media queries are a good option.

@schnell At the very least, having multiple domains in the search space means that all your traffic isn’t going to a single domain and that can have it look as though you’re getting less traffic. SEO is still a great challenge, but I’m sure the engines will respond to the new approaches of content serving, just as we are :)

For anyone that wants to preview the book, there are sample chapters available here https://learnable.com/books/responsive1/online

@spaceBeers I agree with you… maybe I didn’t express myself as well as I should

I read some research that suggested that most folks using legacy IE browsers (6-8) were doing so from their workplaces where the business was managing their hardware and operating systems upgrades – that even the ‘users’ were stuck in legacy browsing that they didn’t want to use. Also could be why people might not make purchases in IE (if they are at work they shouldn’t be shopping)

@cherylea There will be a transcript posted up later today on sitepoint.com and if you have questions, make sure you head over to the SitePoint forums

@Jeff_S I still come down on the side that it’s a good thing. Deliver a nice solid baseline and use feature detection to enhance the experience for those who can get it.

@molona – I read my question again and realised it sounded like I was asking “how” to hide things. Glad that got cleared up.

thanks @HAWK

@HAWK – lol – terrible cover – IMHO (no offence) black??

Thanks, @ajfisher

@mcynowicz I can only say in the company I’m working at that’s true… among other things because they have quite a few appllications based on SAP and they would not work well in any other browser than IE (although the official version is 8)

@HAWK – will grab a copy

@SimonJae All the JumpStart books are black. :)

@simonJae responsive design is the new black :)

grey !!!

Does anybody know of a good article on ‘desktop down/first’ versus ‘mobile up/first’?

:D

And don’t tease @SHARKIE about the dolls

great chat folks! I’ll be following many of you on twitter… Ciao!

thanks all

@mcynowicz the reasons vary for workplaces, but when it comes to home users, some just don’t know the difference (or can’t upgrade IE if they are running XP)

@mcynowicz yeah there’s still and element of that. Though you’d be surprised at the stats of people shopping during work hours off mobile devices – probably as a result of that I reckon…

@spaceBeers no probs… typing so fast and following everythng that goes around is not easy… it is hard to say what you really want to say :D at least for me, it is hard to express it clearly enough ;-)

A book apart has an entire book about Mobile First. That one definitely makes the argument for mobile first.

@mhenderson I’d be looking at Luke Wroblewski Off Canvas work – a quick Google will point you in the right direction

We have 10 mins if anyone has outstanding questions.

@pete check out http://designshack.net/articles/css/mobilefirst and yes check out Luke W. book mobile first

@SHARKIE I see we have a common line of thinking… ;)

so WML is dead ?

@to the experts… what is your best project (or the one that you enjoyed the most)?

Luke W. also has his mobile first presentation available on Vimeo http://vimeo.com/38187066

Luke W also has a video available on safaribooksonline

@jeankap That’s another benefit of RWD. There’s a lot of designers and developers working together on common ideas to drive the technology forward

@b0ss_ don’t get me started. My first mobile job was building a gig guide in WML in 2000… painful doesn’t even describe it. Let’s keep that sucker buried

ajfisher: lol

so I think mobile first suffices.

WML?

ta @joshbyers

‘kay guys… I gotta drop. My presentation slides for April aren’t gonna write themselves. It’s been fun!

Accessibility is one of my primary concerns, as I work for a gov’t agency that serves people with disabilities. The usability improvements brought by RWD will be huge, I think, and will improve accessibilty for all of us on all platforms. (Not a question, but this is one of my passions so I had to say it.)

@Jeff_S Very Good to hear.

Thanks for joining us @jeankap

Thanks for coming everyone

@molona I’m eagerly awaiting the launch of my next one which is just going through UAT at the moment. It’s for a retailer here in Australia (there’s a screen shot in the book as we thought it would have launched by now) that uses the same core for mobile, tablet and desktop but presents tuned experiences for each based on behavioural research we did on their usage. Will be very happy when it launches

@Jeff_S ditto I work with college disability offices and accessibility improvements are a big win with RWD

Are there any last minute questions?

@ajfisher I’m eager to read the book :-D

I may need all my spare time for the next three days to go back and check the links everyone has posted. You folks are great. Thanks to all of you!

@SHARKIE Its been good – too short. Thanks

@ShARKIE thanks very much

@SHARKIE ummm, What’s the answer to life the universe and everything?

thanks folks, it’s been useful

@jerry http://en.wikipedia.org/wiki/Wireless_Markup_Language a very bad detour the mobile industry took on their path towards HTML enlightenment

Thanks everyone for joining in today

@imagestic 42, of course

Thanks everyone. Good show.

@imagestic – @SHARKIE is the wrong guy to ask ;)

@imagestic

Keep your eye out for more of these sessions next month

@shARKIE Of Course XD

@Jerry I like the euphomism sarcasm re: wrong turn

@blanchrt well true, if the CSS is disabled everything will load up anyway as there are no more custom rules to govern the way the elements are displayed , but anyways , is there any other way to stop a box from loading or hiding it on a certain device of some width when its the same HTML file used to display it everywhere ? I don’t know much about those .htc files, will those be of any help to stop something from loading ?

thak you very much everyone

Thanks ajfisher

*thank

@imagestic: Don’t panic. And bring a towel.

Special thanks to @SHARKIE & @ajfisher for getting up early to share their knowledge. Much appreciated guys.

@HAWK – sounds great. 30 minutes is not enough time

Thanks for all the great questions

thank you!

The session was 60 mins @simonJae ;)

Always a pleasure! Thanks again everyone.

Thanks everyone

How was @sydjs last night @SHARKIE?

@shaRKIE and @ajfisher thank you

… yes. I am on daylight saving time… :)

yup, so are we, but not for much longer :(

thanks all

(Hey, and thanks for writing the book!) SitePoint rocks.

Thanks everyone

@HAWK Over 120 JavaScript developers had a great night :)

Nice.

@sharKIE you got 120 devs there last night?!

Looking forward to a drink and a catch up tomorrow night. Have a great day :)

until next time then. take care. thanks and bye

Well pleasure talking to everybody on here :) Looking forward to get my hands on the new book now :)

@ajfisher We get that most months :)

Wow – am going to see if I can organise a trip to overlap for the third week of next month then I reckon

Signing off folks! Thanks for making the early rise so worthwhile :)

MelbJS got a huge turnout last week too. (My first time.)

finish?

@HAWK thanks for hosting @shARKIE @ajfisher thanks for being mobile first and rd evangelists!

Looking forward to more sessions

@rangga Afraid so – just wrapping up now :)

Now, that was fun. Cheers!

Right – time to get ready to go to work now. Thanks for all the questions peeps – made the early start worthwhile

Ok, we may as well kick off then. For those of your that don’t know, @daz4126 is the author of Jump Start Sinatra, and @rkh is the expert reviewer. They are today’s experts. So what are your interests in Sinatra. Anyone already a user?

I work for rundavoo. Live in Los Angeles. Developing Sinatra API.

Any one else already start reading the book?

What are your thoughts on it so far @srpsco

Hi guys!

And @daz4126 is here. :)

I haven’t used Sinatra yet

I didn’t have the time to start the book but I’m looking forward to it

but it’s cool

I am interested if the abstraction of Sinatra hurts underlining development?

@ServerStorm how do you mean?

@HAWK So far so good I am only 1/3 done

@serverStorm, what sort of abstractions?

As you are not working with RAILS directly, what happens if something breaks can you easily debug it in Sinatra or do you have to climb into RAILS deeper to do this?

For those of you that haven’t seen the book yet, you’ll find it here http://www.sitepoint.com/launch/8396b1

@HAWK I am thinking of doing a review for dzone when I am done

@ServerStorm Sinatra does not sit on top of Rails.

I have a question. I would like to develop a Sinatra API for a stock exchange. I imagine that most existing stock exchanges use C++/C#/Java. Is it practical to develop a high volume API in Sinatra?

@serverStorm You don’t need to use Rails at all, Sinatra only uses Rack and Ruby

Sounds great @srpsco – if you’re on Twitter, make sure you tweet us a link

@George I think Sinatra is for simpler applications

Oh ok then I have much to learn ;)

Can it scale to millions of requests per second?

@HAWK will do

Thanks @srpsco!

@George Scalability is not really a question of language or framework.

It’s more about architecture

I’m quite curious about Sinatra but I have yet to make time to start learning. Would Sinatra be a equivalent to PHP’s Codeigniter? as far as weight and liberties go?

@George I know of Sinatra apps having response times of under 24 ms.

Is it practical to create the architecture that supports such a Sinatra API?

I think you could write this sort of thing in Sinatra, it would depend on the api used by the stock exchanges you were connecting to

What are the key strengths of Sinatra over competing frameworks?

@alme1304 I think it is closer to laravel

I am creating the exchange. Other people connect to it using REST.

I’ll jump in here and let you know that I’ll be giving away a couple of free copies of Darren’s book at the end of the session to people that ask great questions.

@alme1304 Sinatra is much more lightweight than CodeIgniter

Code Igniter is based on Rails

Welcome @Hiro – we’ve just kicked off. Feel free to jump in with questions at any time, or just to lurk if you’d prefer!

Is getting it up and running on Windows difficult?

@mib not at all, using the “Ruby Installer” it’s actually quite easy to get it running on Windows.

Just tried that a few days ago.

Windows is such a mess..

but yea should be easy

@Hiro Asari?

@HAWK thanks

@rkh Yes, sir.

How about security? Is it too difficult to enforce security with Sinatra? I would assume that it has functions for hashing and all that

Is Darren here? Do you have an answer to my question?

@molona good question

@srpsco and as far as deployment goes, how does it work, do I have to use something like heroku or is the wider selection of deployment options compared rail?

@molona in contrast to Rails, etc, Sinatra is only about HTTP, but it does provide security mechanisms out of the box.

rails*

@serverStorm Sinatra isn’t really a framework, it’s a DSL (domain specific language). It’s strength is in its flexibility – you can choose how to construct the architecture of your application

I’m on it George!

If you are using a REST API then you should easily be able to build it with Sinatra

@alme1304 anything that can run rails can run sinatra, there is a wide selection, and you basically just need to get ruby running.

Do it use OOP conventions or procedural or both?

thanks

I know very little about Sinatra. Does it manage sessions and cookies?

@alme1304 Heroku is an option and one that is very easy, ut it can be done with a vps, aws I also think engine yard offers support

@watjen yes Sinatra handles sessions and cookies for you. It’s covered in the book

@ServerStorm internally, it is object oriented and you can easily write fully object oriented apps, but the DSL is declerative

Thanks you

Don’t forget Appfog

Welcome @dorthe. Feel free to jump in with questions if you have any.

yikes maybe I can learn to speak English today :(

Yes there are loads of deployment options nowadays, anything that supports Ruby

@ServerStorm You speak French?

Yes some but I’m supposed to be a native English speaker, it just isn’t showing well currently

Am I allowed to plug in the PaaS that I work on? ;-)

haha

Tx -i don’t know anything about sinatra – was just curious

(@Hiro is from RedHat and on the JRuby team)

I assume that even if it doesn’t need Rails it should do fine with Rails too? or am I assuming too much?

@dorthe Sweet – feel free to lurk then!

@haWK is offtopic link-posting allowed?

@molona it works fine with rails

@ServerStorm… you still speak better English than I do :D

Do you know of any larger commercial projects that have been developed using Sinatra?

@nicksh Yeah – this is pretty informal. I may edit them from the transcript though

@molona github is one rails app and ~30 sinatra apps, all running in the same process

and no, I don’t speak French :p

@ServerStorm yes, lots

@dorthe Sinatra is a Domain Specific Language that lets you build web apps in Ruby by helping you connect to HTTP

Is Sinatra a stand alone server?

@ServerStorm http://www.sinatrarb.com/wild

@serverStorm gaug.es uses it

Thanks rkh

@watjen ruby ships with a server and sinatra can manage it for you

does siantra or rack cahe views and layouts

yes

@srpsco yes

@srpsco it does

There is a bit in the book about caching

The cache control is really easy to use

@daz4126 thanks I have only gotten to chapter 3 will finish the rest tonight

What are the best tools to use when developing Sinatra? Are there specific IDEs or do you use simple text editors

@srpsco great, would love to know what you think. I wrote a bit about caching here too http://rubysource.com/sinatras-little-helpers/

ahh. I’m new to Ruby but i’m thinking to get the sitepoint book

Will a Sinatra app run on Passenger?

@serverStorm definitely just a text editor! I use gedit

@ServerStorm I prefer Sublime Text 2 for everything

@ServerStorm I use textmate, there is a bundle for it, you can also use the RubyMine IDE.

Gedit is also good with plugins

@watjen yes

I use eclipse but I’m sure it will work too :)

probably

@serverStorm should do

I used NetBeans at one time to do Sinatra development

How long has Sinatra been around?

since 2007

You can build apps in a single file, so you could even use …(shock horror) … notepad!!!

(scary music)

Hey! I use Notepad… ++ :p

At least Notepad++

It has really come on loads since @rkh started maintaining it

Is it a real advantage to cram it all into one file?

Was started by Blake Mizerany (of Heroku)

companies using Sinatra include Apple, the BBC, GitHub, LinkedIn, houghtbot and many more

my current 2 favorite apps for dev are PHPStorm (though a bit overkill at times (read that as slow) but lately I’ve been enjoying working in Sublime Text 2

Good job rkh!

@serverStorm not for big apps, but it’s cool to do it for little demos

Is it possible to make a quick guide to get started – maybo put on on the Facebook page

@ServerStorm thanks

get ‘/’ do

“hello world”

end

That’s your basic app

Wow – even I could do that ;)

To get started … install Ruby, install the Sinatra gem

It seems that “Hello World” is the only application that I’ve learnt to write in any programming language :p

save the lines above as hello.rb

if you have a decent ruby version installed, you can also run this on the command line: ruby -rsinatra -e “get(‘/’) { ‘Hello World’ }”

then type hello.rb into a terminal/console

@molona ha ha, same here for me with many languages

If you considered building the same small application in ASP.NET, Symphony, Node.js using Coffee Script, and Sinatra is the development cycle faster, slower? Is the code base the smallest?

here is a complete chat implementation, everything in one file: https://github.com/sinatra/sinatra/blob/master/examples/chat.rb

thanks rkh

@serverStorm some of them are languages (like ruby) and some are frameworks so not easy to compare

@rkh thanks. Great resource :D

Is there a set of community standards or guidelines when developing apps or does everyone have different methods

@alme1304 great question!

there are a lot of sinatra clones in other languages, btw.

There aren’t really any standards – this is a good and bad thing!

Is Node.JS’s Express similar to Sinatra?

yes

Although it’s easy to build a MVC architecture using Sinatra (like Rails uses)

Yes, I’m just trying to understand what advantages it has over other framework choices in other languages. I know this is a loaded question, but never written a line in Sinatra it is a valid question

@nicksh express was written by a former sinatra contributor

and is inspired by it

The advantages are that development is very quick and you get to choose how it is set out

I’m wondering about resources… the book seems to be a good starting point but where would be possible to find more examples/advanced information?

Thanks daz

There is also minimal amount of fuss and set up when you are getting started

@ServerStorm simplicity, security, maturity

Cool

some larger companies use it because they can do a complete security review in a week or less

For those interested in an example, here is a blog post of how I built and deployed a simple site in a couple of hours using Sinatrahttp://rubysource.com/sinatra-heroku-super-fast-deployment/

some companies use it because it plays nice with their pre-existing software

what about security? Sinatra can’t possibly be buttoned as tightly as Rails? http://guides.rubyonrails.org/security.html

for instance, linkedin added it on top of their java business logic

A big advantage is it uses Ruby … and Ruby is a nice language!

@watzit it can’t indeed, because it does not know about your database

*JRuby* ;-)

@daz4126 Can’t agree more :D

Why would I want to use Sinatra instead of Rails?

@watzit this comes with sinatra: https://github.com/rkh/rack-protection

@molona RubySource has articles and there are other things floating around on the net

@watjen Simplicity

I don’t know Ruby… would you suggest me to learn Ruby first? or should I be fine if I learn as I learn Sinatray

?

http://rubysource.com/

But after reading the book, the main thing would be to improve your Ruby … because anything written in Ruby can then be plugged into the web using Sinatra

So the limiting factor becomes your Ruby Skills

Yes, there’s lots of information around the net but it is always so hard to know what’s good and what’s bad :(

The Sinatra google group is always a good place to go for info too

@molona Sinatra is straight forward and really simple, so the big thing will be learning Ruby anyways.

@molona that’s why @daz4126 wrote a book :)

Here’s a good place to learn basic Ruby http://pine.fm/LearnToProgram/

@rkh good reply :D

@daz4126 nice link

@daz4126 Don’t forget TryRuby :D

For anyone that is planning on getting into Ruby/Sinatra, I’ve started a Podling group for support https://podling.com/invitations/298-talk-sinatra-with-the-experts/325/edHfz8B6yP

Is Sinatra’s handling of AJAX pretty easy? What about database connectivity?

@watjen Here’s a link where people compared using Sinatra and Rails http://rubysource.com/rails-or-sinatra-the-best-of-both-worlds/

And of course there are the forums http://www.sitepoint.com/forums/forumdisplay.php?227-Ruby-amp-Rails

@ServerStorm yes, doing ajax is straight forward.

Of course @nicksh the interactive one http://tryruby.org/

@serverStorm db connection is very easy and supportsseveral different DB’s

And specifically this thread, where @daz4126 is answering questions specifically http://www.sitepoint.com/forums/showthread.php?960208-New-Book-Jump-Start-Sinatra&p=5299210#post5299210

@ServerStorm there are a couple of database libraries to choose from

thanks rkh and srpsco

@serverStorm you can connect to any database really easy. In the book we use DataMapper to connect to a sqlite database

But you can also use things like MongoDB if nosql is your thing

What about NoSQL support

Ajax is covered in chapter 6 of the book

for our product we use ActiveRecord, which originally comes from Rails

… and ajax is covered here http://rubysource.com/the-robot-factory-part-two/

I love ActiveRecord

@ServerStorm there are libraries for any popular and most unpopular nosql solutions out there. sinatra it self does not care.

@serverStorm and postgres for heroku folks you can test locally with sqlite and with nearly no changes move to heroku/postgres

I never really liked it, but I gather it’s got better recently

for us it’s that we moved from a rails app to many sinatra apps

That’s nice srpsco

@srpsco yes in the book, that’s what we do – sqlite locally and then use postgres on Heroku for live deployment

I really like the mongo syntax and the whole idea of schemaless dbs so will be trying to use that this year

Have to try that too… I’ve never used a no sql database

btw I just installed sinatra

Yes I’m still not clear on the support for mongoDB or other NoSQL databases

@serverStorm yes it supports most of them

@serverStorm mongodb is supported

great

@nicksh nice one!

you’ll love it

@ServerStorm there is a library called MongoMapper and an alternative called Mongoid that give you top MongoDB support with Sinatra

@ServerStorm http://mongomapper.com/

Thank you rkh :)

Another thing I really like about Sinatra is that you get to see what is happening more … there’s less magic going on, so you get more control over how your app behaves

I’ll compile all these resources into a post on sitepoint.com along with the transcript, later today

@ServerStorm MongoMapper also has a similar API to DataMapper, which is used to talk to SQL databases in the book

How do I make it run on port 80?

-p 80

ruby main.rb -p 80

Yes I’m quite familiar with different Database patterns so I’ll look forward to this in the book

@daz4126 are you saying that Sinatra is easier to debug?

probably with a sudo

tx hawk

@molona not necessarily … that depends on your code!

@rkh still runs on 4567

But you just have more of an idea how everything in your app fits together, so if you want to change something then you know how it works

Welcome @guido2004 and @richybailey – feel free to jump in at any time

Our experts are @daz4126 and @rkh

@richybailey hi mate!

btw I love the start and stop messages of Sinatra

View / Edit paste

== Sinatra has ended his set (crowd applauds)

@nicksh have you seen the page missing and error pages yet?

@nicksh strange, works for me

No

Hi all

@nicksh That’s hilarious!

Haha awesome

@guido2004

hi

@Daz4126 I saw in the book that you used a url like ‘what/time/is/it/in/:number/hours’ would you do this in production where many of the intermediate URLs would not exist?

hi molona :)

welcome to the Sinatra world :p

@guido2004

Hi

@daz4126 the error page is amazing :D

hi serverstorm

@srpsco probably not (unless I linked to it directly) that was just to demonstrate named params

@nicksh it’s great isn’t it … you can make your own really easy though

Yes sing me a song guido2004, Sinatra here :0

@daz4126 thanks just wanted to clarify

@nicksh not_found { “That page is missing” }

wow nice