Morning (or evening) everyone. Welcome to our chat about Responsive Design with Craig Sharkie. I’m HAWK, Community Manager at SitePoint. We’ll be kicking off in 10 minutes. In the mean time, why don’t you introduce yourselves. Where are you from? What do you do? What would you like to get out of this session?

Hello! I am Jiran, I am from Colorado, I Freelance Web Design and Development! and I just want to learn more on Responsive I keep struggling with aspects and getting the design correct! Currently working on making my own site, jirandowlati.com responsive if you want to check it out! :)

Hello. Eric here, web designer from Cincinnati, OH. Just starting to explore responsive design. Just wanting to learn as much as I can.

Names Kyle, I’m from Chicago, currently working for a non-profit as an one stop shop web guy! I’ve been reading all about Responsive, and all I want to do is master it in every way.

UI /UX design/dev at Sprint. Kansas City, and already use Fluid layouts, just wondering what others might be up to.

Hello, I’m Justin. I’m in California. I’ve only gotten a taste of Responsive Design, hoping to find out what the future has in store.

Yeah @Sami89 The old one was a bit restricting.

Craig will be here any moment. He’s just signing in.

Hi! Scott from Kansas City. Done a couple of responsive designs, but not too extensive.

Andre here. All round web-learner. Trying to sort the good from the bad.

Morning and or evening everyone!

Marjorie from Montreal. I’ve worked with fluid layouts for a while and getting responsive layouts on new clients. Always interested on some insight and how tos.

Welcome all. Morning Craig.

from England

Samiullah Khan From Pakistan, working in Design agency; Just getting into adaptive designs

Experts is a hard word considering how fast things change.

Responsive design works really well when you combine it with a mobile first approach

I have no idea @skorpyo but it’s very frustrating. I’m in the market for an alternative product if you know of one.

From Ireland – just learning responsive design concepts

It isn’t mobile first as much as considering all devices, and what content each device should have.

Has anyone come up against an issue that they are struggling with?

Not sure about the mobile first. I think you should consider it while designing it but I still starts with the desktop when I code in HTML and css.

@deesadler I think the trick is to start, then add skills as you need. Waiting is only going to make the learning curve greater!

I always plunge in head first. :)

So jump in the deep end you reckon?

haha

the best way to do this would be to talk…IMO

Just the layouts, I have a hard time deciding what should be kept for a mobile screen.

Morning to anyone that has just joined us. Feel free to jump in and introduce yourself – where are you from and what is your experience (if any) with responsive layouts

@meiloo Mobile first lends itself to a different way to think about HTML structure. That can really help

Not content but how navigation and pictures should be laid out

@HAWK – how do you decide the smallest size to support (say for a menu) to ensure you get good coverage while still showing it nicely on a desktop size

I disagree entirely, when you take a mobile first approach it sets your mind on the user journeys and context of users actions and what they need to complete, without any of the extra fluff

I teach, so what I see as the most struggle for folks is images. Anyone agree?

Think the abundance of minimalist fluid designs out there exposes the surprising amount of work required to do it right.

@ConorD I’m going to throw that over to @Expert_Sharkie

Hi from Prema — we’re doing responsive (foundation) with Concrete5

Have found templates like 320 and up and Twitter Bootstrap ahve helped me learn the basics

I agree on Mobile First, do you guys have any suggestions with things like navigation I have hard time deciding what should be changed

@conorD the desktop size and smallest size should be able to be targeted separately with Media Queries

Yeah. Not sure I *get* the mobile first movement.

well, modernizr and boilerplate sure have helped folks. I love using it for prototyping these days

I just discovered relative mediaqueries (EM based) and it’s like…OMG!

@Jiran you should think about screen real estate when you get to small screen sizes i.e. mobile — it is better to have pivot button which opens open menu panel for small screen devices

Target separately? Shouldnt it be the same content for all devices?

@Expert_Sharkie , @HAWK, thanks! Also has anyone tried using something like knockout.js, with or without jQuery to aid responsiveness?

Image sizing is the newest part of the approach and the most volatile

Content will always be king, regardless of device

@Jiran and then standard design patterns for navigation as screen size increases

I get it if a client want’s to focus mainly on mobile.

Howdee!

But if it’s just a feature, I don’t see a point to start mobile first.

That is what I have seen which makes sense but what about when there is only like 4 options?

I demand a <picture> tag for Responsives!!!!!

me too

since responsive came in need more for mobile devices and tablets…I also agree with the Mobile First thing

Interesting to hear viewpoints on whether to use ready made or roll your own

responsive web design vs graceful degreadation vs adaptive design

@conorD trying to achieve success without JavaScript will help your load performance

Hi all. I don’t understand this mobile-first approach?? Do you design for mobile, then just add what you can for desktop viewers whilst coding :S ?

Morning @Tsotsi

I start with 1136px 16 col, working my way down

I haven’t attempted converting sites to a responsive design – any suggestions/pointers on how to go about this?

@Jiran all depends on the context of the options. Can those nav items be portrayed effectively as icons? If so, go for it. If not, and iconography will be too ambiguous then maybe stacked buttons or a pivot

@Expert_Sharkie, thanks again.

first came fluid, then came responsive…next maybe adaptable?!

I’m interested in the answer to lagoona’s question

@deesadler Have you had a look at the proposals for responsive image sizes from HTML5

@Jiran and test, test, test — your user base will guide you to the best option for their needs

mobile First helps you on content hierarchy definition.

Just a note – I am filtering out your questions and listing them for Craig, so if you feel like yours has been skipped, just hang fire – we’ll get back to it.

just get started on it is the best way instead of keep trying to learn, keep failing until you start understanding how things work!

Older browsers will need to be kicked into shape a bit by adding CSS3 media queries JavaScript

@wakkos. How?

@lagoona the real approach starts well before a conversion, but its not impossible. The first two things to start working on are Media Queries and Flexible Image Sizing

@andrevr You can see what’s really important content to show (I.E.: logo, menu, tagline) without “compliments”

Oh nice, http://responsinator.com is awesome.

@digikev i was just going to ask how do we deal with compatibility when making responsive designs?

@wakkos Spot on! Thinking about the Mobile structure is a great place to start

Yep it helps a lot!!

I’m an experienced developer, but I’m not positive where to start with responsive. Is there a good resource I can go to and look at to be up and running fairly quickly… kind of give me the basics in a nutshell?

@veerdin there’s this Alistapart Book about responsive design!

How far can we really go with responsive design right now when IE7-8 still exists?

@veerdin – Try Foundation or bootstrap frameworks

@wakkos Sure, but for diff sizes, diff content is nb. I think each size should be optimized. Then what’s the bonus to starting mobile?

for ie 7-8 modernizr can help. I find it useful to get websites good even of these oldies

@veerdin Responsive Web Design from ABA is a good start? it was for me

@veerdin Have you started with Ethan Marcotte’s article? http://www.alistapart.com/articles/responsive-web-design/

Also: http://www.abookapart.com/products/responsive-web-design

@andrevr In Coolvillage.es I hide this twitter top left box in mobile. That’s a non-important content! so I didn’t add it in the mobile design. (that’s an example)

^^ yep!

@Jiran plan to check it out also

Thanks y’all – perfect and thanks!

@melioo, I’m not too sure on Modernizr and other easy-start “frameworks”. I’m the kinda person that like to adjust everything the way I like it, with minimal code so I know exactly what is happening

I agree @jiran that book was a great start for me.

Another note – I’ll be posting a transcript of this session up on sitepoint.com later today, so if you miss the references to resources, you’ll be able to grab them later.

Ethan didn’t invent responsive, just coined the phrase. Not nitpicking, and not saying he isn’t super smart, just making the distinction. :)

second that, just read the article earlier

@meiloo thx :) but what kind of performance hit do modernizr and javascript fixes have on slower pcs and phones?

Content is always the most important thing. karen mcGrane : http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365

@kestrel Internet Explorer can still handle Flexible Grids and Flexible images. That’s a great start. Then there are shims

@Kestrel as long as you taylor Modernizr to your needs (rather than the whole lot out of the box) you should be fine

I used fluids layouts since 2002. so even on IE6. that is not a problem.

What’s a good resource for using @media queries and javascript?? Like to have your javascript also change based on the site and helping the older browsers?

helps to have a vey good JS developer on your team to check it out

@Expert_Sharkie yeah good point, thats what i’m really asking how far can we go with responsive design if we’re running a high traffic website which still gets significant older browser traffic?

I made a 1136px 16 col responsive(fixed) system if anyone would like it. I couldn’t find one online so had to make it myself.

and @Kestrel, Yahoo! YSlow will help http://developer.yahoo.com/yslow/

Also, easy shim: <!–[if lt IE 9]><script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script><![endif]–>

@Clarkey you can have a custom modernizr file and check out how they do it and then build your own library. Thing is it’s a community of people working so they always add thing and you learn from everyone

@melioo, might have to have another look

Designers owe it to themselves to become a good js developer. My good friend James Williamson, and a speaker at my conference (D2W) is a Lynda.com author and has multiple vids on media queries.

@kestrel Older browsers likely wont be appearing in non-desktop devices, so you should have no trouble there. And we all know how to make the desktop look its best!

@Clarkey cssgrid.net

is there supposed to be sound?

Has anybody seen or used http://www.gumbyframework.com/

@Jiran thats only 12 col

@deesadler designers have enough to contend with without having to worry about being really good JS developers too — different discipline, get an expert to handle it

@Clarkey oops sorry :P

@Expert_Sharkie thats a good point! So really with responsive design we’re adding in features that newer browsers support rather than losing them for older browsers?

There are a ton of Fameworks out there. But… sometimes it is easier to just write the CSS yourself, or else you have to wade around in tons of stuff you’ll never use. Dreamweaver makes media queries easy.

@deesadler I know enough to get me around jQuery and to prototype stuff, but when it comes to production code, pass it over to a good JS developer, not a designer

Do you guys really feel comfortable with Frameworks? I rather to make all my design from skratch (well, form Boilerplate, but that’s more like a template than a framework)

@Jiran I used to use cssgrid.net and loved it until I needed more cols.. Great grid system though

@digikev and @Kestrel https://developers.google.com/speed/pagespeed/insights pretty useful tool too

@ryanConway I’ve seen that, there’s so many frameworks to start with, don’t know which one is best for the long run.

@Wakkos I’m the same mate

@kestrel Exactly! It’s another aspect of Progressive Enhancement

Well, that’s fine @digikev, I don’t always have that option.

@Wakkos some are good, such as take a look at semantic.gs which works with Compass SASS or LESS

also i think maybe important to discuss responsive emails as ALOT of people read emails on their phone instead of using their desktop these days. Does anyone know of any good tools for checking how emails look on mobile devices?

I guess the real question is, frameworks or start from scratch?

Any suggestions on using Javascript Media Query style, serving different code based on what is viewing the site?

I think emailonacid.com has some mobile device email clients in their testing. Pretty reasonable pricing too.

@Wakkos but some are being abused, such as Twitter Bootstrap (which is great for prototyping with), which is not good enough for production ready code — loads of bloat, unsemantic structure and presentational markup

@clarkey and @wakkos I agree also. There’s a lot to be learnt from frameworks, but the sooner you can include them in your own boilerplate the better

@ryanConway I think that you must use whatever you feel comfortable with.

@srarden thx man :)

@deesadler I’m finding that too but I think it’s maybe good at the start to use frameworks as they definitely aid the learning process and then help you to write your own versions – haven’t got there yet though

What do you guys code html/css/less/sass in? Currently running Coda 2 and I ‘effing love it!#

I though I was a weirdo because I didn’t like to use frameworks xD

Textmate

Textmate!

@clarkey Coda 2 and Sublime Text

for everything actually

@Jiran that’s a contentious question :) I think changing content based on use-case is going to get more acceptance

@ryanConway — think it needs a bit of careful thought — With roll your own – compatibility becomes a big issue unless you have massive test resources

Textmate first, playing with sublime

@wakkos I dont use frameworks either

View / Edit paste

I host for my clients, having Terminal, a great sftp system as well as everything else, you can’t go wrong..
Never heard of Sublime, have to check it out

@Clarkey Macrabbit Espresso, and just trialling Coda 2 at the moment

Haha @Clarkey – that’s what happens when you cut and paste

Anyone use YUI?

@Kestrel also interested in the email part… definitely my next step. anyone has advices?

Is someone has a good exemple of ecommerce responsive website ?

Now that we have a quiet moment – has anyone asked a question that they don’t feel they’ve had a response to?

I found these slides from Andy Clark to be really helpful

https://speakerdeck.com/u/malarkey/p/fashionably-flexible-responsive-web-design-full-day-workshop-1

@alexmarkup Amazon

@RyanConway Thx!!

@HAWK I didn’t paste, just use shift-enter for new line

oops @Sami89 I’m having a hard time following discussion too

@alexmarkup there are some, but t-shirt shops, nothing super eCommerce. We, at Sprint are working on that also, but nothing up yet.

Weird then @Clarkey

@sarah THKS but its not responsive.. its progressive enhancement

:D funny

@sami89 open all the links people are pasting in and read them tomorrow. works best for me :P

yes ofcoarse @capescafe they are only discussing templates, those bootstraps

@sarah cause they hide and show content. Responsive should be always the same content with diffrent layout

love me some Twitter bootstrap UI components

@capescafe and @sami89 I’ll be posting up a transcript on sitepoint.com later today so that you can go through it at your leisure. Make sure you ask any questions that you have though, so that we can include them

@alexmarkup A lot of Malarkey’s Enhancement lends itself well to a Responsive approach

I have a question about images…there are so many different options right now but none seem to be the best answer yet…does anyone know if there will be a new tag included in either html5 or css3 to handle responsive images?

@sarah what is diff b/w responsive and progressive enhancement

lets talk images

Cool. You good to talk images @Expert_Sharkie?

Is it best to keep your responsive “styles” in one stylesheet?

@capescafe No one knows for sure just yet. There’s a good start to the current situation here: http://html5doctor.com/html5-adaptive-images-end-of-round-one/

@HAWK this is great chat system tbh

@capescafe right now they are lobbying for such tags, but no such luck. You can take action and learn more herehttp://www.w3.org/community/respimg/

@ehCincy I do

@sarah for me reponsive = always same content with different layout and Progressive = you add, show, hide (css or js) some part

<picture> tag looks promising

I have two issues with it @Clarkey – I can’t download transcripts (so I have to copy and style them) and everyone enters/leaves twice. I’d also like to be able to set up specific users (ie the experts and admins) with a different colour to make the chat easier to follow.

than what the diff left in img and picture @kinaz

So how do you define responsive design? Noob right here..

@HAWK Let’s make one?

But… you don’t want to scale a large images down to mobile. I like scaling to a point, then replace that image with a smaller one, then again for mobile devices

@alexmarkup That is a great place to start, but you’ll quickly find that you’ll want to adopt Progressive approachs under your Responsive banner

I know a guy that is thinking about it @Clarkey (cc @Expert_Sharkie)

Yes, for the n00bs, lets define responsive/adaptive/progressive

@alexmarkup wow I had to pull it up on my iphone to see..they might use two separate content feeds but it works really well. I know the big thing is to only build one set of content for multiple devices but I think Amazon made the right choice to go a seperate route

responsive design, is essentially fitting content to users device without sacrificing the users overall experience

yes @deesadler i asked twice but no one is responding, everything is going over our heads

@sami89 From wikipedia: Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule[1], with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images.[2][3][4][5] As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

@HAWK If you need fast hosting for it, I got a few Linodes

@capescafe There will definitely be an HTML5 solution. At the minute it looks like the srcset attribute in a good old img element

I teach this stuff @sami89, just trying to help out.

@Expert_Sharkie im working on R&D with the resonsive approach without progressive enhencement and its difficult but the work should be in the IA process

@clarkey I’ll keep that in mind :)

so @HAWK RWD is done, now gracefull degredation

@capescafe The picture element that’s been proposed by the community has a lot of great ideas also

@Expert_Sharkie which kind of ideas

@sarah ok, but imagine when you have a small data plan… users download markup that they dont need

ok i’ll have to look those 2 up on the image tags sounds promising at least

@sami89 please check this out http://www.w3.org/community/respimg/

@Sami89 the child element syntax used by HTML5′s video and audio elements is FAR more intuitive than the srcset approach

@RyanConway if i were to read those lengthy articles i shouldn’t be here

@alexmarkup doesn’t that mean you should be using a combination of RD and Enhancement?

Hi guys. If i work on a large existing fixed width site, where would i start with making it responsive. Would you leave all the existing code and bolt on media queries for smaller resolutions? What does this mean with download speeds? having the site read the css

read in diagonal and keep the links then read all of them later :-d

Note: I should have mentioned this earlier:

View / Edit paste

Available commands:
/clear
/help
/invite john.doe@email.com
/me loves pizza
/msg @username This is your message
/togglesound

@Expert_Sharkie which kind of child elements??

does anyone have any great examples of responsive design they would like to share? websites that do a great job?

@sami89 how do you know its a lengthy article, it will give you a glimpse of the ideas being proposed by the community

@expert_Sharkie i agree, but when you target some width or devices with progressive it become huge in the analysis process

@sami89 You can add different source elements for your sizes and a fallback image if the browser can’t cope with HTML5

@Expert_Sharkie @sarah

@Kestrel — yes good to see some samples

@purpledude You can edit that paste to remove the address (assuming that was accidental)

I love they way happycog.com does it

One of the bests examples so far in my opinion is smashingmagazine.com

smashing is awesome too! :)

@Sami89 http://dl.dropbox.com/u/11177072/Screenshots/aoj-.png

@expert_Sharkie @sarah And Wha about nested grid ?

@Kestrel www.carnationgroup.com, seesparkbox.com

Check out http://mediaqueri.es/

@kestrel you can find many here http://mediaqueri.es/

aha

t ill now, there is no real ecommerce website fully reponsive. Only blogs or very simple retails websites are using it …

Then we should make a Prestashop Template xD

wow smashingmagazine is great there must be like 3 different versions of the menu alone in there :P

@denzil the addtional CSS should only be small and shouldn’t cause too much additional performance issues. And if you can tailor your content to the smaller size you can make back bandwidth requirements there

Eh carnationgroup.com still feels like too much going on for a mobile, I was kind of lost going on it, I think there is a difference just changing layout and truly tailoring to your users on different screens!

Could any one share tutorials on conference talk on responsive web design

@HAWK thx, yes it was :)

i love shrinking and growing the browser to see the instant reaction of responsive designs

Great little write up from elliot jay stocks – Better background images for responsive web design http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/

smashingmagazine is REAL nice

@alexmarkup actually the small data plan was what i was just being amazed over on amazon. they created separate content/page true, but they skinnyed it down So that a person on a mobile device has an equal experience as a desk top only different, and the skinnyness of it allows for quicker download.

wow I love how http://builtwithmomentum.com/ does their navigation!

smashingmagazine is real nice but the menu is quite deceiving on mobile…

I don’t think you have to use media queries or a grid for a responsive site

I’m working on http://coolvillage.es but I still have serious doubts on CSS3 animations (toys floating) and that carries me to a question:

If I set a display:none a css3 animation loads?

@sarah I think more an more we’ll see sites adopting a content level approach in their Responsive Design practice

How do you guys handle the iOS text zoom on orientation changes.. I’ve found a way to disable it but then the user can’t pinchNzoom

I am confused though, does anyone know how builtwithmomentum switches the navigation like that?

No mediaqueries in a responsive site = godlike.

Skeleton WordPress Theme http://www.simplethemes.com/blog/entry/skeleton-wordpress-theme

We are using Javascript for your responsive sites

your = our

Hey what do you think about mobile website build in Flash

Hey what do you think about mobile website build in Flash

Hey what do you think about mobile website build in Flash

When planning a responsive site is it best to start with a one column fluid design that will then adapt to say 2 or 3 columns at certain break points? I find it hard to plan a responsive site since previously I’ve always planned a fixed width site in Photoshop and then planned accordingly with my css and any fixed width images. It’s hard to retrain the brain.

@sarah I think you don’t need a grid, but you need media queries or some kind of substitute

@sami89 that is a joke right?

@Expert_Sharkie How do you mean?

http://foodsense.is/

@Clarkey Orientation change is a great challenge, but the solutions are still young at the minute. I think we’ll see some OS level changes that will help alot

A good article to get started: http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

why is flash not a good idea?

^^

@sarah I was agreeing that the need to change the content delivered to devices is getting more support :D

One word: iPhone does not like flash.

Lets keep this about the topic at hand, not a Flash vs HTML5 debate please

@sami89 flash could be the worst idea I have ever heard, i am not even to get into it

That’s more than one word, right?

@RyanConway Cause flash isn’t supported by apple…

So, display none loads CSS3 animations?

@ryanConway Flash isn’t supported on many Mobile devices, but can still be made to deliver Responsive style designs

@meiloo food sense is nice

OK, breaking my own rule here, Flash Pro and Flash Builder can indeed create apps that are compiled into native apps. End of story.

you guys don’t have to tell me flash is a terrible idea, that was not my idea to begin with

@wakkos I haven’t heard of the CSS3 animation display: none bug your talking about

back to responsive/adaptive talk now

Does anyone have a question that they don’t feel has been properly addressed?

no, is not a bug. but CSS3 takes a lot of resources. So to avoid them, I’m not sure if display:none works.

Now, being the good Adobe girl I am, has anyone used Edge yet? Talking about CSS3/js/HTML5

http://cossette.com/, http://thefuturemckeowns.com/, http:///www.colly.com/

@wakkos Ahhh … it works or you can deliver the animation only to devices that can benefit from it using your Media Queries

css3 takes alot of resources?

I played with a couple early versions of Edge and liked where it was going, but haven’t had a chance to mess with the more recent ones – new job.

@sarah Right, Amazon did a webapplication for smartphone.. thats cool and optimized but i think that the tablet version is not like this … more like desktop version with hidden stuff

Do you guys feel that one should design for specific break-points – i.e. 768px, 480px, 320px – and have the layout reorganise to a fixed width, or do you believe layouts should be completely independent of device widths and scale (and respond) no matter what the size?

@webKendo i was just going to ask something similar

@webKendo i’d agree with second part

Canvas vs CSS3 is a whole other talk session I think. How about I just say a hybrid approach is best. lol

@WebKendo I design with fixed reponsiveness

the goal should be readability on any device right?

It seems completely independant of device widths since there are so many widths

@kestrel @webKendo Break points are the way to go as they give you the best control and more opportunity for Response

Fixed responsiveness is adaptive. Responsive is fluid

@webKendo the first approach makes more sense to me

@WebKendo So far the first way – specific break points

@webKendo before the introduction of Android i would have voted for first part

@webkendo, I think right now taregting specific break points is a start, but there are thousands of devices that you cannot possibly tagret them all eventually you will have to find a way to just resize and fit content

@Kestrel and others – But frameworks like Skeleton, etc are designed to specific break-points. Adaptive. Fluid Responsiveness leaves a lot to be desired from a layout perspective…

The lowest I design for is 320px, most mobile devices will be retina-equivalent soon anyways.

@webKendo agreed.

@expert_Sharkie i guess i understand the term responsiveness now. basically designers are going to have to constantly respond to each new device that comes out :P

@ryanConway so the second part is the clear winner isn’t it @webKendo

yep @webkendo agreed

@webKendo you can be fluid within your breakpoints, but the breaks give you goals for your design process

@kestrel they will “adapt” thus adaptive

can’t wait to see what websites look like on a retina resolution MBP :P

Hey all – we only have 10 more minutes of Craig’s time (at which point you’re all welcome to stay here and chat amongst yourselves) so if you have any important questions for him, please get them in now.

@kestrel Not changing anything is a valid response too!

Can anyone defne retina-equivalent pls

@expert_Sharkie thats true maybe its not going to be as much work as i realise once i get into designing responsively / adaptively

@prema 960×640 on phones

silence

@kestrel they sure will look great, but it’s gonna be no fun for devs :)

Fluid layout for a complex ecommerce website is pretty difficult…. often designer put fixed height and …. not sure that is a good approach for complexe wesite

I read this somewhere: “Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint”

OK cool thanks @deesadler

When one takes a look at WordPress themes available for purchase, most are designed to adapt to fixed break-points. This, I believe, is because theme designers are trying to cater for websites that will accommodate a lot more content than the simple, designed-by-designers-for-designers websites we’ve been seeing.

WP sucks

@kestrel The sooner you include RD as part of your day to day approach, the sooner you’ll forget there was any other way :)

back to images?

Concrete5 rulez

Images are tabu, until we got a cool tag xD

@webKendo They are also designing for content they can’t predict. So they are creating robust solutions

@Expert_Sharkie good point

@deesadler care to elaborate on that ? (wp sucks) :)

@Expert_Sharkie

@Expert_Sharkie: My point exactly…

Why can’t someone blow up Internet Explorer?

Just a thought.

Second that

@Clarkey second that also!!

3rd that

@expert_Sharkie yeah i think now understand the idea is production ready and that i’ve got loads of articles to read on the subject from tonight i should be working it into the site in no time

I find myself resizing my browser for almost every site I visit

@ehCincy haha same here

@purpledude I hand code, so WP takes out all <p> tags and uses spaces in the HTML. That sucks

@wakkos Our current image solutions are a great place to start. We need to show the W3C what we need!

what’s your current image solution?

http://uxmag.com/articles/a-primer-on-responsive-design

dang I have a lot of tabs open right now. Looking forward to the transcript @HAWK

Responsive layouts are easy for blog-styled websites that only really have one type of content. For client / production websites where someone else will be managing content, one needs to create a far more robust, idiot-proof solution… Especially for images. And the WordPress core needs to come up-to-speed with image handling… We shouldn’t have to remove width and height declarations using PHP or jQuery…

@wakkos the first is 100% width in sized containers, or using background images applied through Media Queries. Maybe not the final solution, but a great place to start

@WebKendo 100% correct

Just throwing out a simple CMS for sites.. grabaperch.com

..We’ve got to go — Thanks SitePoint and everyone — some excellent tips

automatic responsive images in wordpress http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/

Thanks @prema – see ya

you shoud use responsive mode in firefox nigtly build @ehCincy

@webKendo I think we need to put pressure on browser manufacturers as well as publishing solution vendors

havnt used this, but came across itr

@ryanConway going to try that one right now, thx

Thanks HAWK appreciate it

@RyanConway – thanks… @Expert_Sharkie – How do you propose we do that..?

wow @webKendo you have real experience, good example

@webKendo Use the tools you have today and get involved in the browser community. They really do listen!

@webKendo real world examples are a great way to show real world solutions

how do you guys deal with customers, how do you sell’em responsive websites? they often (if not always) want very specific designs for different devices

It might open up a can of worms, but would this be the right forum for other (front-end) developers to share examples of real-world / client work they’ve done..?

@kinaz but that’s a great example of Responsive Design :)

thats @HAWK you provided great platform to discuss our problems

Ok people, that marks the official end of the session. From this point on it won’t be moderated, but feel free to hang around and chat as long as you like. Thanks for taking part.

thanks @sami89

@kinaz specific designs for specific devices is a terrible idea, how will they manage all that content? Let them do it, more billable hours for you right? Show them the price for building to tailor specific devices Im sure they will nix that idea real quick

THANKS EVERYONE

@hawk :)

thank you all, Love you all

thanks!

You’re welcome @sami89 – I run these sessions every couple of weeks on different subjects. Next up is HTML5.

@expert_Sharkie thanks for your time again :-)

@HAWK sweet look forward to the next one

I’ll be there. >;-)

@HAWK Message me to remind me for the next one

Thanks all, good night!

thanks look forward to one on HTML5 – cheers

Here are the details for the next session for anyone that is interested http://www.timeanddate.com/worldclock/fixedtime.html?msg=Talk+HTML5+With+The+Experts&iso=20120626T21&p1=22&ah=1