What Happened When We Talked Responsive Design with an Expert

Sarah Hawk

This morning saw us talking responsive design issues and concepts with one of my personal favourites when it comes to experts – Craig Sharkie (co-author of the jQuery: Novice to Ninja books). It was an interesting session, and Craig managed to stay on top of a barrage of questions from a very keen audience. If you missed the session and want to know what went down, below is a full transcript.

If you have any ideas for future chats, fancy yourself as an expert and would like to take part in a session, or know of any good chat products that you think I should check out, please get in touch as I’m on the lookout for all three.

HAWK HAWK
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?
Jiran Jiran
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! :)
ehCincy ehCincy
Hello. Eric here, web designer from Cincinnati, OH. Just starting to explore responsive design. Just wanting to learn as much as I can.
kwibbles kwibbles
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.
andrevr has entered the room
deesadle… deesadler
UI /UX design/dev at Sprint. Kansas City, and already use Fluid layouts, just wondering what others might be up to.
josterho… josterholt
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.
HAWK HAWK
Yeah @Sami89 The old one was a bit restricting.
HAWK HAWK
Craig will be here any moment. He’s just signing in.
srarden srarden
Hi! Scott from Kansas City. Done a couple of responsive designs, but not too extensive.
andrevr andrevr
Andre here. All round web-learner. Trying to sort the good from the bad.
Expert_S… Expert_Sharkie
Morning and or evening everyone!
meiloo meiloo
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.
HAWK HAWK
Welcome all. Morning Craig.
lagoona lagoona
from England
Sami89 Sami89
Samiullah Khan From Pakistan, working in Design agency; Just getting into adaptive designs
deesadle… deesadler
Experts is a hard word considering how fast things change.
digikev digikev
Responsive design works really well when you combine it with a mobile first approach
HAWK HAWK
I have no idea @skorpyo but it’s very frustrating. I’m in the market for an alternative product if you know of one.
ConorD ConorD
From Ireland – just learning responsive design concepts
deesadle… deesadler
It isn’t mobile first as much as considering all devices, and what content each device should have.
HAWK HAWK
Has anyone come up against an issue that they are struggling with?
meiloo meiloo
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.
Expert_S… Expert_Sharkie
@deesadler I think the trick is to start, then add skills as you need. Waiting is only going to make the learning curve greater!
deesadle… deesadler
I always plunge in head first. :)
HAWK HAWK
So jump in the deep end you reckon?
haha
skorpyo skorpyo
the best way to do this would be to talk…IMO
Jiran Jiran
Just the layouts, I have a hard time deciding what should be kept for a mobile screen.
HAWK HAWK
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
Expert_S… Expert_Sharkie
@meiloo Mobile first lends itself to a different way to think about HTML structure. That can really help
Jiran Jiran
Not content but how navigation and pictures should be laid out
ConorD ConorD
@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
digikev digikev
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
deesadle… deesadler
I teach, so what I see as the most struggle for folks is images. Anyone agree?
andrevr andrevr
Think the abundance of minimalist fluid designs out there exposes the surprising amount of work required to do it right.
HAWK HAWK
@ConorD I’m going to throw that over to @Expert_Sharkie
prema prema
Hi from Prema — we’re doing responsive (foundation) with Concrete5
lagoona lagoona
Have found templates like 320 and up and Twitter Bootstrap ahve helped me learn the basics
Jiran Jiran
I agree on Mobile First, do you guys have any suggestions with things like navigation I have hard time deciding what should be changed
Expert_S… Expert_Sharkie
@conorD the desktop size and smallest size should be able to be targeted separately with Media Queries
andrevr andrevr
Yeah. Not sure I *get* the mobile first movement.
deesadle… deesadler
well, modernizr and boilerplate sure have helped folks. I love using it for prototyping these days
Wakkos Wakkos
I just discovered relative mediaqueries (EM based) and it’s like…OMG!
digikev digikev
@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
Anthony Anthony
Target separately? Shouldnt it be the same content for all devices?
ConorD ConorD
@Expert_Sharkie , @HAWK, thanks! Also has anyone tried using something like knockout.js, with or without jQuery to aid responsiveness?
Expert_S… Expert_Sharkie
Image sizing is the newest part of the approach and the most volatile
deesadle… deesadler
Content will always be king, regardless of device
digikev digikev
@Jiran and then standard design patterns for navigation as screen size increases
kwibbles kwibbles
I get it if a client want’s to focus mainly on mobile.
Tsotsi Tsotsi
Howdee!
kwibbles kwibbles
But if it’s just a feature, I don’t see a point to start mobile first.
Jiran Jiran
That is what I have seen which makes sense but what about when there is only like 4 options?
Wakkos Wakkos
I demand a <picture> tag for Responsives!!!!!
kinaz kinaz
me too
skorpyo skorpyo
since responsive came in need more for mobile devices and tablets…I also agree with the Mobile First thing
prema prema
Interesting to hear viewpoints on whether to use ready made or roll your own
Sami89 Sami89
responsive web design vs graceful degreadation vs adaptive design
Expert_S… Expert_Sharkie
@conorD trying to achieve success without JavaScript will help your load performance
Clarkey Clarkey
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 ?
HAWK HAWK
Morning @Tsotsi
Clarkey Clarkey
I start with 1136px 16 col, working my way down
lagoona lagoona
I haven’t attempted converting sites to a responsive design – any suggestions/pointers on how to go about this?
digikev digikev
@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
ConorD ConorD
@Expert_Sharkie, thanks again.
skorpyo skorpyo
first came fluid, then came responsive…next maybe adaptable?!
veerdin veerdin
I’m interested in the answer to lagoona’s question
Expert_S… Expert_Sharkie
@deesadler Have you had a look at the proposals for responsive image sizes from HTML5
digikev digikev
@Jiran and test, test, test — your user base will guide you to the best option for their needs
Wakkos Wakkos
mobile First helps you on content hierarchy definition.
Jiran Jiran
@digikev Yes I agree and to EVERYONE http://responsinator.com is a great resource
HAWK HAWK
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.
Jiran Jiran
just get started on it is the best way instead of keep trying to learn, keep failing until you start understanding how things work!
digikev digikev
Older browsers will need to be kicked into shape a bit by adding CSS3 media queries JavaScript
andrevr andrevr
@wakkos. How?
Expert_S… Expert_Sharkie
@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
Wakkos Wakkos
@andrevr You can see what’s really important content to show (I.E.: logo, menu, tagline) without “compliments”
kwibbles kwibbles
Oh nice, http://responsinator.com is awesome.
Kestrel Kestrel
@digikev i was just going to ask how do we deal with compatibility when making responsive designs?
Expert_S… Expert_Sharkie
@wakkos Spot on! Thinking about the Mobile structure is a great place to start
Jiran Jiran
Yep it helps a lot!!
veerdin veerdin
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?
Wakkos Wakkos
@veerdin there’s this Alistapart Book about responsive design!
Kestrel Kestrel
How far can we really go with responsive design right now when IE7-8 still exists?
prema prema
@veerdin – Try Foundation or bootstrap frameworks
andrevr andrevr
@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?
meiloo meiloo
for ie 7-8 modernizr can help. I find it useful to get websites good even of these oldies
Jiran Jiran
@veerdin Responsive Web Design from ABA is a good start? it was for me
Expert_S… Expert_Sharkie
@veerdin Have you started with Ethan Marcotte’s article? http://www.alistapart.com/articles/responsive-web-design/
kwibbles kwibbles
Wakkos Wakkos
@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)
Jiran Jiran
^^ yep!
ehCincy ehCincy
@Jiran plan to check it out also
veerdin veerdin
Thanks y’all – perfect and thanks!
Clarkey Clarkey
@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
kwibbles kwibbles
I agree @jiran that book was a great start for me.
HAWK HAWK
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.
deesadle… deesadler
Ethan didn’t invent responsive, just coined the phrase. Not nitpicking, and not saying he isn’t super smart, just making the distinction. :)
ehCincy ehCincy
second that, just read the article earlier
Kestrel Kestrel
@meiloo thx :) but what kind of performance hit do modernizr and javascript fixes have on slower pcs and phones?
meiloo meiloo
Content is always the most important thing. karen mcGrane : http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365
Expert_S… Expert_Sharkie
@kestrel Internet Explorer can still handle Flexible Grids and Flexible images. That’s a great start. Then there are shims
digikev digikev
@Kestrel as long as you taylor Modernizr to your needs (rather than the whole lot out of the box) you should be fine
meiloo meiloo
I used fluids layouts since 2002. so even on IE6. that is not a problem.
Jiran Jiran
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?
digikev digikev
helps to have a vey good JS developer on your team to check it out
Kestrel Kestrel
@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?
Clarkey Clarkey
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.
digikev digikev
and @Kestrel, Yahoo! YSlow will help http://developer.yahoo.com/yslow/
Clarkey Clarkey
meiloo meiloo
@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
Clarkey Clarkey
@melioo, might have to have another look
deesadle… deesadler
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.
Expert_S… Expert_Sharkie
@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!
Jiran Jiran
@Clarkey cssgrid.net
capescaf… capescafe
is there supposed to be sound?
RyanConw… RyanConway
Has anybody seen or used http://www.gumbyframework.com/
Clarkey Clarkey
@Jiran thats only 12 col
digikev digikev
@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
Jiran Jiran
@Clarkey oops sorry :P
Kestrel Kestrel
@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?
deesadle… deesadler
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.
digikev digikev
@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
Wakkos Wakkos
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)
Clarkey Clarkey
@Jiran I used to use cssgrid.net and loved it until I needed more cols.. Great grid system though
meiloo meiloo
@digikev and @Kestrel https://developers.google.com/speed/pagespeed/insights pretty useful tool too
kwibbles kwibbles
@ryanConway I’ve seen that, there’s so many frameworks to start with, don’t know which one is best for the long run.
Clarkey Clarkey
@Wakkos I’m the same mate
Expert_S… Expert_Sharkie
@kestrel Exactly! It’s another aspect of Progressive Enhancement
deesadle… deesadler
Well, that’s fine @digikev, I don’t always have that option.
digikev digikev
@Wakkos some are good, such as take a look at semantic.gs which works with Compass SASS or LESS
Kestrel Kestrel
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?
RyanConw… RyanConway
I guess the real question is, frameworks or start from scratch?
Jiran Jiran
Any suggestions on using Javascript Media Query style, serving different code based on what is viewing the site?
srarden srarden
I think emailonacid.com has some mobile device email clients in their testing. Pretty reasonable pricing too.
digikev digikev
@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
Expert_S… Expert_Sharkie
@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
Wakkos Wakkos
@ryanConway I think that you must use whatever you feel comfortable with.
Kestrel Kestrel
@srarden thx man :)
lagoona lagoona
@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
Clarkey Clarkey
What do you guys code html/css/less/sass in? Currently running Coda 2 and I ‘effing love it!#
Wakkos Wakkos
I though I was a weirdo because I didn’t like to use frameworks xD
kinaz kinaz
Textmate
Wakkos Wakkos
Textmate!
purpledu… purpledude
@clarkey Coda 2 and Sublime Text
kinaz kinaz
for everything actually
Expert_S… Expert_Sharkie
@Jiran that’s a contentious question :) I think changing content based on use-case is going to get more acceptance
prema prema
@ryanConway — think it needs a bit of careful thought — With roll your own – compatibility becomes a big issue unless you have massive test resources
ehCincy ehCincy
Textmate first, playing with sublime
kinaz kinaz
@wakkos I dont use frameworks either
Clarkey Clarkey

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
digikev digikev
@Clarkey Macrabbit Espresso, and just trialling Coda 2 at the moment
HAWK HAWK
Haha @Clarkey – that’s what happens when you cut and paste
sarah sarah
Anyone use YUI?
meiloo meiloo
@Kestrel also interested in the email part… definitely my next step. anyone has advices?
alexmark… alexmarkup
Is someone has a good exemple of ecommerce responsive website ?
HAWK HAWK
Now that we have a quiet moment – has anyone asked a question that they don’t feel they’ve had a response to?
RyanConw… RyanConway
I found these slides from Andy Clark to be really helpful
sarah sarah
@alexmarkup Amazon
purpledu… purpledude
@RyanConway Thx!!
Clarkey Clarkey
@HAWK I didn’t paste, just use shift-enter for new line
capescaf… capescafe
oops @Sami89 I’m having a hard time following discussion too
deesadle… deesadler
@alexmarkup there are some, but t-shirt shops, nothing super eCommerce. We, at Sprint are working on that also, but nothing up yet.
HAWK HAWK
Weird then @Clarkey
alexmark… alexmarkup
@sarah THKS but its not responsive.. its progressive enhancement
Clarkey Clarkey
:D funny
Kestrel Kestrel
@sami89 open all the links people are pasting in and read them tomorrow. works best for me :P
Sami89 Sami89
yes ofcoarse @capescafe they are only discussing templates, those bootstraps
alexmark… alexmarkup
@sarah cause they hide and show content. Responsive should be always the same content with diffrent layout
deesadle… deesadler
love me some Twitter bootstrap UI components
HAWK HAWK
@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
Expert_S… Expert_Sharkie
@alexmarkup A lot of Malarkey’s Enhancement lends itself well to a Responsive approach
capescaf… capescafe
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?
Sami89 Sami89
@sarah what is diff b/w responsive and progressive enhancement
deesadle… deesadler
lets talk images
HAWK HAWK
Cool. You good to talk images @Expert_Sharkie?
ehCincy ehCincy
Is it best to keep your responsive “styles” in one stylesheet?
Expert_S… Expert_Sharkie
@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/
Clarkey Clarkey
@HAWK this is great chat system tbh
RyanConw… RyanConway
@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/
Clarkey Clarkey
@ehCincy I do
alexmark… alexmarkup
@sarah for me reponsive = always same content with different layout and Progressive = you add, show, hide (css or js) some part
mobius has entered the room
kinaz kinaz
<picture> tag looks promising
HAWK HAWK
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.
Sami89 Sami89
than what the diff left in img and picture @kinaz
mobius mobius
So how do you define responsive design? Noob right here..
Clarkey Clarkey
@HAWK Let’s make one?
deesadle… deesadler
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
Expert_S… Expert_Sharkie
@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
HAWK HAWK
I know a guy that is thinking about it @Clarkey (cc @Expert_Sharkie)
deesadle… deesadler
Yes, for the n00bs, lets define responsive/adaptive/progressive
sarah sarah
@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
RyanConw… RyanConway
responsive design, is essentially fitting content to users device without sacrificing the users overall experience
Sami89 Sami89
yes @deesadler i asked twice but no one is responding, everything is going over our heads
JAY6390 has entered the room
HAWK HAWK
@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.
Clarkey Clarkey
@HAWK If you need fast hosting for it, I got a few Linodes
Expert_S… Expert_Sharkie
@capescafe There will definitely be an HTML5 solution. At the minute it looks like the srcset attribute in a good old img element
deesadle… deesadler
I teach this stuff @sami89, just trying to help out.
alexmark… alexmarkup
@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
HAWK HAWK
@clarkey I’ll keep that in mind :)
Sami89 Sami89
so @HAWK RWD is done, now gracefull degredation
Expert_S… Expert_Sharkie
@capescafe The picture element that’s been proposed by the community has a lot of great ideas also
Niel has left the room
Sami89 Sami89
@Expert_Sharkie which kind of ideas
alexmark… alexmarkup
@sarah ok, but imagine when you have a small data plan… users download markup that they dont need
capescaf… capescafe
ok i’ll have to look those 2 up on the image tags sounds promising at least
RyanConw… RyanConway
@sami89 please check this out http://www.w3.org/community/respimg/
Expert_S… Expert_Sharkie
@Sami89 the child element syntax used by HTML5′s video and audio elements is FAR more intuitive than the srcset approach
Sami89 Sami89
@RyanConway if i were to read those lengthy articles i shouldn’t be here
andrevr has entered the room
Expert_S… Expert_Sharkie
@alexmarkup doesn’t that mean you should be using a combination of RD and Enhancement?
denzil denzil
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
meiloo meiloo
read in diagonal and keep the links then read all of them later :-d
tgfoo has left the room
HAWK HAWK
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
Sami89 Sami89
@Expert_Sharkie which kind of child elements??
Kestrel Kestrel
does anyone have any great examples of responsive design they would like to share? websites that do a great job?
RyanConw… RyanConway
@sami89 how do you know its a lengthy article, it will give you a glimpse of the ideas being proposed by the community
alexmark… alexmarkup
@expert_Sharkie i agree, but when you target some width or devices with progressive it become huge in the analysis process
Expert_S… Expert_Sharkie
@sami89 You can add different source elements for your sizes and a fallback image if the browser can’t cope with HTML5
alexmark… alexmarkup
@Expert_Sharkie @sarah
prema prema
@Kestrel — yes good to see some samples
HAWK HAWK
@purpledude You can edit that paste to remove the address (assuming that was accidental)
Jiran Jiran
I love they way happycog.com does it
Wakkos Wakkos
One of the bests examples so far in my opinion is smashingmagazine.com
Jiran Jiran
smashing is awesome too! :)
HAWK HAWK
alexmark… alexmarkup
@expert_Sharkie @sarah And Wha about nested grid ?
andrevr has left the room
meiloo meiloo
@Kestrel www.carnationgroup.com, seesparkbox.com
JulesWebb has left the room
meiloo meiloo
kinaz kinaz
@kestrel you can find many here http://mediaqueri.es/
aha
alexmark… alexmarkup
t ill now, there is no real ecommerce website fully reponsive. Only blogs or very simple retails websites are using it …
Wakkos Wakkos
Then we should make a Prestashop Template xD
Kestrel Kestrel
wow smashingmagazine is great there must be like 3 different versions of the menu alone in there :P
Expert_S… Expert_Sharkie
@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
Jiran Jiran
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!
Sami89 Sami89
Could any one share tutorials on conference talk on responsive web design
purpledu… purpledude
@HAWK thx, yes it was :)
Kestrel Kestrel
i love shrinking and growing the browser to see the instant reaction of responsive designs
RyanConw… RyanConway
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/
Clarkey Clarkey
smashingmagazine is REAL nice
sarah sarah
@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.
Jiran Jiran
wow I love how http://builtwithmomentum.com/ does their navigation!
mobius has left the room
meiloo meiloo
smashingmagazine is real nice but the menu is quite deceiving on mobile…
sarah sarah
I don’t think you have to use media queries or a grid for a responsive site
Wakkos Wakkos
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?
Expert_S… Expert_Sharkie
@sarah I think more an more we’ll see sites adopting a content level approach in their Responsive Design practice
Clarkey Clarkey
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
Jiran Jiran
I am confused though, does anyone know how builtwithmomentum switches the navigation like that?
Wakkos Wakkos
No mediaqueries in a responsive site = godlike.
RyanConw… RyanConway
sarah sarah
We are using Javascript for your responsive sites
Salsa has entered the room
sarah sarah
your = our
Sami89 Sami89
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
capescaf… capescafe
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.
kinaz kinaz
@sarah I think you don’t need a grid, but you need media queries or some kind of substitute
RyanConw… RyanConway
@sami89 that is a joke right?
sarah sarah
@Expert_Sharkie How do you mean?
meiloo meiloo
Expert_S… Expert_Sharkie
@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
WebKendo has entered the room
meiloo meiloo
RyanConw… RyanConway
why is flash not a good idea?
Clarkey Clarkey
^^
Expert_S… Expert_Sharkie
@sarah I was agreeing that the need to change the content delivered to devices is getting more support :D
Wakkos Wakkos
One word: iPhone does not like flash.
deesadle… deesadler
Lets keep this about the topic at hand, not a Flash vs HTML5 debate please
RyanConw… RyanConway
@sami89 flash could be the worst idea I have ever heard, i am not even to get into it
Wakkos Wakkos
That’s more than one word, right?
meiloo meiloo
@RyanConway Cause flash isn’t supported by apple…
Wakkos Wakkos
So, display none loads CSS3 animations?
Expert_S… Expert_Sharkie
@ryanConway Flash isn’t supported on many Mobile devices, but can still be made to deliver Responsive style designs
ehCincy ehCincy
@meiloo food sense is nice
deesadle… deesadler
OK, breaking my own rule here, Flash Pro and Flash Builder can indeed create apps that are compiled into native apps. End of story.
Sophie has entered the room
RyanConw… RyanConway
you guys don’t have to tell me flash is a terrible idea, that was not my idea to begin with
Kiasaki has entered the room
Expert_S… Expert_Sharkie
@wakkos I haven’t heard of the CSS3 animation display: none bug your talking about
deesadle… deesadler
back to responsive/adaptive talk now
HAWK HAWK
Does anyone have a question that they don’t feel has been properly addressed?
Wakkos Wakkos
no, is not a bug. but CSS3 takes a lot of resources. So to avoid them, I’m not sure if display:none works.
deesadle… deesadler
Now, being the good Adobe girl I am, has anyone used Edge yet? Talking about CSS3/js/HTML5
meiloo meiloo
Expert_S… Expert_Sharkie
@wakkos Ahhh … it works or you can deliver the animation only to devices that can benefit from it using your Media Queries
RyanConw… RyanConway
css3 takes alot of resources?
srarden srarden
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.
alexmark… alexmarkup
@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
WebKendo WebKendo
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?
Kestrel Kestrel
@webKendo i was just going to ask something similar
Sami89 Sami89
@webKendo i’d agree with second part
deesadle… deesadler
Canvas vs CSS3 is a whole other talk session I think. How about I just say a hybrid approach is best. lol
Clarkey Clarkey
@WebKendo I design with fixed reponsiveness
Kestrel Kestrel
the goal should be readability on any device right?
capescaf… capescafe
It seems completely independant of device widths since there are so many widths
Expert_S… Expert_Sharkie
@kestrel @webKendo Break points are the way to go as they give you the best control and more opportunity for Response
deesadle… deesadler
Fixed responsiveness is adaptive. Responsive is fluid
kinaz kinaz
@webKendo the first approach makes more sense to me
lagoona lagoona
@WebKendo So far the first way – specific break points
Sami89 Sami89
@webKendo before the introduction of Android i would have voted for first part
RyanConw… RyanConway
@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
WebKendo WebKendo
@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…
Clarkey Clarkey
The lowest I design for is 320px, most mobile devices will be retina-equivalent soon anyways.
deesadle… deesadler
@webKendo agreed.
Kestrel Kestrel
@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
Sami89 Sami89
@ryanConway so the second part is the clear winner isn’t it @webKendo
kinaz kinaz
yep @webkendo agreed
Expert_S… Expert_Sharkie
@webKendo you can be fluid within your breakpoints, but the breaks give you goals for your design process
deesadle… deesadler
@kestrel they will “adapt” thus adaptive
Kestrel Kestrel
can’t wait to see what websites look like on a retina resolution MBP :P
HAWK HAWK
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.
Expert_S… Expert_Sharkie
@kestrel Not changing anything is a valid response too!
prema prema
Can anyone defne retina-equivalent pls
Kestrel Kestrel
@expert_Sharkie thats true maybe its not going to be as much work as i realise once i get into designing responsively / adaptively
deesadle… deesadler
@prema 960×640 on phones
Sami89 Sami89
silence
kinaz kinaz
@kestrel they sure will look great, but it’s gonna be no fun for devs :)
mikemikehestheman has entered the room
alexmark… alexmarkup
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
Wakkos Wakkos
I read this somewhere: “Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint”
prema prema
OK cool thanks @deesadler
WebKendo WebKendo
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.
Jiran has left the room
deesadle… deesadler
WP sucks
Expert_S… Expert_Sharkie
@kestrel The sooner you include RD as part of your day to day approach, the sooner you’ll forget there was any other way :)
deesadle… deesadler
back to images?
prema prema
Concrete5 rulez
Wakkos Wakkos
Images are tabu, until we got a cool tag xD
Expert_S… Expert_Sharkie
@webKendo They are also designing for content they can’t predict. So they are creating robust solutions
ehCincy ehCincy
@Expert_Sharkie good point
mikemikehestheman has left the room
purpledu… purpledude
@deesadler care to elaborate on that ? (wp sucks) :)
WebKendo WebKendo
@Expert_Sharkie
Salsa has left the room
WebKendo WebKendo
@Expert_Sharkie: My point exactly…
Clarkey Clarkey
Why can’t someone blow up Internet Explorer?
Just a thought.
prema prema
Second that
Kiasaki has left the room
capescaf… capescafe
@Clarkey second that also!!
RyanConw… RyanConway
3rd that
Kestrel Kestrel
@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
ehCincy ehCincy
I find myself resizing my browser for almost every site I visit
RyanConw… RyanConway
@ehCincy haha same here
deesadle… deesadler
@purpledude I hand code, so WP takes out all <p> tags and uses spaces in the HTML. That sucks
Expert_S… Expert_Sharkie
@wakkos Our current image solutions are a great place to start. We need to show the W3C what we need!
Wakkos Wakkos
what’s your current image solution?
digikev digikev
ehCincy ehCincy
dang I have a lot of tabs open right now. Looking forward to the transcript @HAWK
Sami89 has left the room
WebKendo WebKendo
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…
Expert_S… Expert_Sharkie
@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
Sami89 has entered the room
ConorD ConorD
@WebKendo 100% correct
Clarkey Clarkey
Just throwing out a simple CMS for sites.. grabaperch.com
prema prema
..We’ve got to go — Thanks SitePoint and everyone — some excellent tips
RyanConw… RyanConway
HAWK HAWK
Thanks @prema – see ya
Sami89 Sami89
you shoud use responsive mode in firefox nigtly build @ehCincy
Expert_S… Expert_Sharkie
@webKendo I think we need to put pressure on browser manufacturers as well as publishing solution vendors
RyanConw… RyanConway
havnt used this, but came across itr
purpledu… purpledude
@ryanConway going to try that one right now, thx
prema prema
Thanks HAWK appreciate it
WebKendo WebKendo
@RyanConway – thanks… @Expert_Sharkie – How do you propose we do that..?
Sami89 Sami89
wow @webKendo you have real experience, good example
Expert_S… Expert_Sharkie
@webKendo Use the tools you have today and get involved in the browser community. They really do listen!
prema has left the room
Expert_S… Expert_Sharkie
@webKendo real world examples are a great way to show real world solutions
kinaz kinaz
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
WebKendo WebKendo
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..?
srarden has left the room
jjones has left the room
Expert_S… Expert_Sharkie
@kinaz but that’s a great example of Responsive Design :)
Sami89 Sami89
thats @HAWK you provided great platform to discuss our problems
HAWK HAWK
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.
ehCincy ehCincy
thanks @sami89
RyanConw… RyanConway
@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
Expert_S… Expert_Sharkie
THANKS EVERYONE
Kestrel Kestrel
@hawk :)
Sami89 Sami89
thank you all, Love you all
capescaf… capescafe
thanks!
HAWK HAWK
You’re welcome @sami89 – I run these sessions every couple of weeks on different subjects. Next up is HTML5.
Kestrel Kestrel
@expert_Sharkie thanks for your time again :-)
ehCincy ehCincy
@HAWK sweet look forward to the next one
xhtmlcod… xhtmlcoder
I’ll be there. >;-)
Clarkey Clarkey
@HAWK Message me to remind me for the next one
Sami89 Sami89
@HAWK shoud we discuss html5 in the means of structure or API’s too
ConorD ConorD
Thanks all, good night!
lagoona lagoona
thanks look forward to one on HTML5 – cheers
HAWK HAWK

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Steve

    Now I understand why an “edited” transcript is so important. It’s hard to follow the disjointed conversations and get anything meaningful out of this article.

    • http://thehawk.wordpress.com HAWK

      Hey guys,
      This was HEAVILY edited. I spent over an hour culling it. Unfortunately, I don’t know what’s valuable to whom. Happy to take your (constructive) advice on the approach that would make the most sense to you….

  • Cabbagehead

    Waaaay toooooo long! :)

    What’s the bottom line?

    • http://thehawk.wordpress.com HAWK

      The purpose of the transcript is primarily to negate the need for participants to record links and resources as they go. If you’re interested in these sessions, make sure you head along next time. :)

  • lou

    more expert, less chat please

    • http://thehawk.wordpress.com HAWK

      Hey Lou,
      These sessions are community driven. Our experts can only answer questions if they’re asked! Why don’t you come along and take part if there are things that you think were missed…?