HOWTO: Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize

From the blog:

Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize – Scott Hanselman

I recently did a video with Rob Conery on how to be a better technical speaker and blogged about it. I wanted to put up a site for this video to give people more details and to make it easier for me to get the word about about the video separate from Tekpub. I went and bought http://speakinghacks.com and fired up WebMatrix to do a quick one-pager.

The idea was to spend only an hour on this from the moment I got the domain to a “complete” site. My requirements were:

  1. An easy to remember domain name.
    Check. SpeakingHacks.com
  2. A site that looks kind of like my existing site, to keep the branding cohesive.
    Cool I’ve got some existing CSS.
  3. Site should look good on mobiles and tablets so I want to use responsive design.
    Um…
  4. A site that includes the free trailer for my video that plays on any device, including phones and tablets.
    Um…
  5. A site that resizes cleanly, rotates cleanly and the video thumbnail is always as large as possible.
    Um…

(Read the full article to see the solution.)

Advertisements

~ by WPA Staff on May 22, 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: