Responsive Design

What is Responsive Web Design?

Google defines responsive web design as an approach to web design aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling. In a more concise way, responsive design is modifying your website so it can be viewed on any device in a user-friendly way. Responsive design has become so relevant because of the rise of mobile devices and tablets. So many people are always on the go and don't have time to be tied down to a website. An important part of responsive design is media queries. Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It  is a cornerstone technology of Responsive web design. Another first step to creating responsive design is establishing breakpoints. Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information. When you first begin Responsive Design you will define your breakpoints at the exact device widths that you are looking to target.

Example

One of the responsive websites I was able to find was Rally Interactive and you can see its link below
http://rallyinteractive.com/

 This screen capture to the left is the widest full version of the website. You can see it has three columns with a full footer and header. The triangle gadgets are however the smallest out of the three versions of the site. The font is an appropriate size but we will also see that change as we go.

 This next screen capture is the medium size option. This can be achieved just by dragging the browser window to a skinnier size or if you were perhaps viewing this site on a tablet in the portrait view. The major difference is that this went down to just two columns but in return the triangle gadgets where able to increase in size a bit. Notice you did not lose any of the gadgets rather they just became more stacked. We notice also a small difference in the increase size in the fonts. Overall layout of the footer and header remained the same.

This final image is the smallest responsive design I can  view on the desktop. Alternate views for an app may also be available. The contrast is most visible on this one as it went down to just one column. You also notice again the increase size in font but also that we lost some of the design graphic of the header and some of the gadgets in the footer. This website overall has an excellent format for all screen sizes and is very user friendly in that regard.

Desktop and Mobile trends

Desktop vs. Mobile

Over the years trends in desktop sessions has gone down steadily and mobile usage has gone up. Most predict that this trend will continue to happen and even in a more dramatic way.

Data

 The first graph pictured to the left shows total minutes used per month by a desktop, app only, and browser only. Both the app and browser are mobile ways of viewing the website. This graph proves the hypothesis of the desktop and mobile rates intersecting in January of 2014 with desktop numbers going down and the mobile going up.

 This second line graph truly validates the first graph above. This graph is more concise in showing mobile altogether and then of course desktop. This graph brought from a different source also shows the intersection point occurring in 2014. However this also illustrates that although mobile devices are becoming useful, desktops still are of a service.

This final chart represents exactly what the first line graph did and continues to solidify the results. Unlike the graphs above this chart gives a specific example of the stagnant desktop users between 2013 and 2014. While Mobile web and app contented to grow, desktop stayed the same.

Acquisition and Behavior

Other factors such as bounce rate, page session and average session duration plays a part in these results. First we will take a look at bounce rate. Bounce rate is the percent of viewers who leave the site after viewing only one page. A high bounce rate for mobile may mean the information was easy to access. They got what they needed and the web designer did their job. For a desktop a high bounce rate could be a negative thing. Meaning the website was boring and didn't do it's job of holding the viewer's attention. Page session and average session duration hasn't played much part in the evolution because it has changed barely over the years. 

Sources

http://searchenginewatch.com/sew/opinion/2353616/mobile-now-exceeds-pc-the-biggest-shift-since-the-internet-began#

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

http://techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-place-in-mobile-apps/

The past week my focus in both web and graphic design has been updating my blog. Some specific changes I've made are adding a banner to my header which i did a live trace on. I also customized my template using the advanced settings  and by adding my own CSS. I added multiple gadgets such as labels, pages, about this blog, a favicon, and follow button linking to my other social media. In the end I am fairly happy with the outlook but I'm sure it will undertake many more updates.

This screenshot shows my new header which I placed a background image in. The original picture was not the right size and to resize it to fit the width i needed would make the image squishy and pixelated. Instead i put a live trace on the photo and then resized it. 

 This shot shows all of my new gadgets that i added. The cloud on the bottom right is all my tags that I've put on my posts ever. You can see the individual labels on the post on the screenshot below. Also you can see the blurb about my blog which has an html link embedded.

This was my imitation of a saul bass movie poster. I moved outside of some of the creative boundaries with the colors but stuck to the basic flat shapes and overall look of his posters. I created this using all basic shapes. 

This is an original poster of Saul bass's which can draw some relation to mine because of the original shapes

Custom Graphics

This is my custom graphic from illustrator. I worked mostly with kerning and just simple merging. I also pulled in a new font for this.