Responsive Web Design Badge

3 Apr
A desktop view of my artist portfolio site

A desktop view of my artist portfolio site

Responsive web design is without a doubt a huge trend right now, and something I figured would be a great skill to have. I proposed my own badge for responsive web design and it looks like it was a overall success.

For my responsive website, I made a generic online artist’s portfolio type site.

I really expected the coding process to be a struggle, but it really wasn’t nearly as horrible as I anticipated. Media queries were surprisingly simple, and using percentages and em as measurements rather than pixels just took some trial and error.

My site uses media queries to adjust for screens at several size intervals:

  1. Greater than 980px wide (white background; to accomodate for the 960px wide desktop version with some margins)
  2. Between 980px and 710px wide (light blue background; includes iPad when viewed vertically)
  3. Between 480px and 710px wide (light green background; mostly due to my tendency to snap multiple windows on my screen and needing to adjust them)
  4. Less than 480px wide (light gold background; for browsing on a mobile phone)

I changed the background colors for each interval to illustrate how the site was adjusting. Normally the background color would be consistent.

The header and navigation text adjusts at each interval on all pages, and changes to center alignment for the mobile version.

The gallery on the portfolio page scales with the browser width while maintaining the layout on the for all versions but the mobile layout. When browsing on a mobile phone, the image columns are reduced from four to two so that the images don’t get scaled so small that they are difficult to make out.

The content on the remaining three pages simply scale with the browser with two exceptions. For the “Blog” page, I removed the float on the sidebar and content so that the sidebar content now appears after the blog entries. I did the same for the photo of Alphonse Mucha on the “About” page.

I used ipadpeek.com to preview the how the site will appear on both an ipad and an iphone since I own neither device. Check out the screenshots below or visit the site.

Desktop view of the blog page

Desktop view of the blog page

Content scales to fit the browser

Content scales to fit the browser

Viewing the size on ipad horizontally displays the desktop view because the width is greater than 980px

Viewing the size on ipad horizontally displays the desktop view because the width is greater than 980px

Viewing on an ipad vertically adjusts the site to second interval

Viewing on an ipad vertically adjusts the site to second interval

The portfolio page layout changes for mobile phones

The portfolio page layout changes for mobile phones

The blog sidebar is no longer floated on the mobile version

The blog sidebar is no longer floated on the mobile version

The sidebar content is appears below the blog posts

The sidebar content is appears below the blog posts

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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: