Petra Gregorová

I’ve been a vivid supporter of responsive web design approach for some time, so whenever there is an opportunity to implement it, I am all for it. About two weeks ago, I was approached at work if I could build a landing page for our new fun app, PhotoBlast. I didn’t even see the creative and had said yes as I knew I could take on something small that I will sure enjoy working on. Even though “responsiveness” wasn’t necessarily part of the scope, I made sure to make time for it, regardless the amount of time I got allocated.

Once I got to see the creative, it was quite obvious that this one might be somewhat challenging to achieve in about 20 hours all the little details but I was ready to take it on anyway.

I first had to really take it all apart to see how I could split up and mark up the content in a way that would make sense but could also accommodate all the creative directions that this one page had. Once I’ve completed with marking up the content in HTML5, that’s when I turned to my CSS file. While still keeping with “content first” concept, I went into structuring my CSS using 320 and Up approach.

This is when the real fun has begun when I got to start with the smallest screen and making decisions what will people get to see and at what dimensions or screen sizes. What truly saved my life and lot of my time was this fabulous tool called ResponsivePx that was created by no other than the talented man, Remy Sharp. He told me about it few months back when we first met during his visit to Portland; however, I wasn’t truly able to test it out until now. Oh man, and does that work like a charm!

For this project, since there were so many image elements on the page, I wanted to fit them as soon as I had the real estate for it and this was where this tool came super handy when trying to figure the “break points” for different screen sizes. I found it better to use in Chrome, as you got to have a slider to modify width and height of your screen rather than use dropdowns, which you’d have in Firefox.

Well, I am sure you get the point. It’s fun and super easy to use and maybe you’ll get to try it on your next project yourself. There are definitely many aspects that need to be considered when us developers and designers are being responsively responsible but thankfully there are so many resources out there for you to dive in and get inspired.

I find myself referring back to any of A Book Apart books that I keep religiously expanding as new ones are coming out, and I think you should too. In addition, I have attended several conferences or workshops that touch on the subject but this topic is still quite hot, so there are more upcoming ones. If you find yourself in Vancouver BC area in March or you were looking for an excuse to go there, then maybe Simon Collison‘s full day workshop on Crafting Responsive Experiences might convince you, just like 3-day Breaking Development Conference in Orlando, FL one month later – your choice.

Anyway, that’s that. So now, if you are an iPhone owner, go and download PhotoBlast from App Store and go have fun with it. Or just play with the landing page I built while dragging around the corner of your browser to see how it adapts.

Update: Thanks to Joel Shapiro, I found a video that Remy did demoing responsivepx.

Stephanie (Sullivan) Rewis who is a well-known front-end developer, an amazing speaker & author, who I first saw at An Event Apart New Orleans 2008. If you don’t want to miss what is Stephanie working on next, you can also follow her tweets on Twitter.

She has recently made a series of videos about HTML5 that I enjoyed watching and figured that it would be nice to share with rest of you here, in case you missed.

• Video & HTML5 – Part 1: Understanding HTML5

• Video & HTML5 – Part 2: Getting Started

• Video & HTML5 – Part 3: Maximizing HTML5 Video Access with Flash

Yes, it’s that time of the year again when you might be wondering what got into people by changing their profile pictures and avatars wearing those silly blue beanies. Well, let me break it to you – it’s a Blue Beanie Day!

No, but seriously, if you still aren’t sure what the whole deal is, it’s just a way people like me try to show their support to how to design with web standards. This is actually already a 4th year of this event that seems to be growing bigger each time & it’s definitely something that I look forward to.

It’s fun to see what people come up with and how creative some can get.

Would you like to participate and don’t know how? It’s easier than one thing can ever be and it’s never too late to join. So, this is how (just like Jeffrey suggests):

1. Take a picture of yourself wearing a blue beanie upload it to the Blue Beanie Day 2010 pool on Flickr.
2. Add a blue beanie to any of your social network avatar that you are using like Twitter, Facebook, Flickr, etc.
3. If you don’t have a blue beanie nor time to Photoshop one out, that’s when monkeyfy.com or face-sticker.quodis.com come to the rescue.

If you feel like you want to go above and beyond, feel like you have something witty to say, you can always write a web standards haiku and post it to Twitter with the hashtag #bbd4 for your chance to win one of Peachpit’s & A Book Apart’s web design books in the Blue Beanie Day Haiku Contest.

So, what you are waiting for and join the band wagon of yet another year in spirit of web standards and making the web a better place for everyone! I’ll see you there, right?

I am sure that I’m not the only one who is digging more and more into what CSS3 capabilities have to offer us. The buzz about all the things that you can do has been around for some time now. However, people were hesitant about taking their stab at it for one main reason – poor browser support.

A year ago, I got more enthusiastic about it after getting my hands on Handcrafted CSS by Dan Cederholm. Dan answers one question that most of us ask ourselves: Do websites need to look exactly the same in every browser? No, they sure don’t! For the most part, all that matters to many of us is that an end-user can navigate and effectively use our site while still looking nicely.

As the time went on, more and more people started to publish or post more on subject. As a matter of fact, yesterday Dan came out with yet another book, CSS3 For Web Designers. It’s second book that A Book Apart published this year, following after Jeremy Keith‘s HTML5 For Web Designers. A book that seems to have it all that you may need to know nowadays, and then some is Hardboiled Web Design from Andy Clarke.

Anyway, today was just one of those days where I got a chance to work from ground up on some new templates for a client who needs a copy of its current site for their Canadian audience, while keeping same branding as well as design of their US site. So I told myself that this will be a perfect opportunity to minimize use of all the background images that are used for gradients or shadows, as well as other visual enhancements. I’d like to demonstrate our client how much can improve overall performance of their site, when not being so set on having all the bells and whistles among all browsers but still looking good.

As I was working along, I ran into a little road Continue Reading »

Tomorrow’s The Big Web Show that’s hosted by Dan Benjamin & Jeffrey Zeldman will have Andy Clarke on as a guest at 10AM PST/1PM EST.

So, just in case you still haven’t made up your mind about buying his newly released book Hardboiled Web Design. If you aren’t familiar with The Big Web Show, it is about an hour long live video podcast that you can choose to watch either live or later that day from archives, once it becomes available. By watching tomorrow’s 27th episode should help to convince you why this book is a “must-have”. Make sure you take the opportunity to watch the web show live, as it will give you an opportunity ask a question via live chat.