Mobile Web and Responsive Design

When it comes to web design, Gone are the days when web design was just for a desktop or laptop computer. As technology has increased, people are able to access the web from their cellphones, tablets, game consoles, cars and even refrigerators. As web designers, we must design with these accessibility discrepancies in mind. Having a website with a responsive design or a mobile version of a website are great ways to make your website accessible to more people across different platforms.
At first glance, it may seem that mobile website design and responsive website design are the same. They both:

  • Are designed with a small screen in mind
  • Are set using ems or percentages instead of pixels
  • Try to avoid excessive scrolling

However, they are different. According to wegraphics.net, mobile sites include a separate url (usually “mobile.yoursite.com or m.yoursite.com) and should implement:

  • One column layout. Users shouldn’t have to zoom in on mobile to view all the content at a comfortable size.
  • Simplify and optimize content. Remove the sidebar and keep only the necessary information.
  • Reduce navigation. Have the navigation exist in the form of a dropdown menu so that it’s easier for users to click.
  • Avoid Flash, Javascript and pop ups. Mobile does not support them.

Responsive websites on the other hand enhance the original website. According to coding.smashingmagazine.com, these are some elements of a responsive website:

  • Images and text resize proportionately. As you change the width of the window from desktop view to smaller screens, all of the content changes its position on the page so that it is still viewable, but able to be comfortable accessed depending on the screen size.
  • Media queries allow you to maximize control of how your content looks to your user depending on screen size. In your CSS, you can set @media with a minimum width to have a certain style.

An example of a website with a responsive design is amazon.com. This shopping website for all types of products has a responsive design. If you resize your browser window, the layout conforms to the shape like liquid. There is, however, a min-width set, so that it stops resizing at a certain point. With this liquid layout, a user can comfortably browse their website whether using a desktop or a tablet.

Twitter
has a great desktop website as well as mobile website (mobile.twitter.com). They look similar except where on the desktop website you can see twitter backgrounds, the mobile version omits that completely. What you get instead is just the tweets displayed down your timeline. The icons for visiting your profile, writing a new tweet, seeing your mentions and checking your direct messages remain the same on both pages. The mobile version is also web responsive, so it fits to however small your screen is. It lays things out in a one column format and the tweets on your timeline become the first thing you see.

In conclusion, designing a website with responsive design and designing a mobile website has similarities as well as differences. No matter what, you want to make sure that your user is viewing the most important elements first. An ideal website is able to be scaled and viewed across all platforms with virtually no load time and very little scrolling.

Great Design Website Elements

Portfolio/Work Section

http://www.shannonmoeller.com/portfolio/archive/

I love the clean layout of his portfolio page. Each project has it’s own space dedicated to it. As you hover over the photo, you get an overview of who the project was for, but you are able to click on it, and it takes you to another page with more detailed information about the process.

http://www.joonaspaloheimo.com

I love the visual aspect of it. The layout is clean and gridded, and when you click on a portfolio piece, it expands below in a bubble, pushing the other line down. I want something like this for my website.

http://www.danielmall.com

I like how he put his portfolio pieces into circles. It is a unique way to present his portfolio.

About Me Section

http://www.chiragjsolanki.com

I love the design of the website and how everything floats in space. I like how in his About Me section, he included a link to his portfolio. The skill set chart on the side is nice too. In his background design, he also lists hobbies he has like “photography, drawing, dancing.”

http://www.nineliondesign.com/about

I like how he has a “too long didn’t read” version in big letters, and in between that he has a normal about me section. 

Resume Section

http://www.meganlouise.net/images/resume_Megan%20Thome.pdf

She attached her resume to her website as a PDF. I like this better than prominently displaying a resume as a page on the website. I like the design, as it in in-sync with the design of her website.

http://www.kickingdesigns.com/portfolio/resume/

The resume is very clean and even includes contact information and social media links.

Contact Info Section

http://www.gpacheco.fr/#contact

Love how he evokes a peaceful feeling as you get to the last page of his website. By using a beach and sand effect, it is like he is telling you that if you choose him for a job, your mind will be at ease and you will be able to relax.

http://chadmueller.com/#all

This guy doesn’t even have a contact page, his contact link just goes straight to an email bar. I think that’s pretty convenient to be honest.

Online Identities

Even though they are a company of graphic designers as opposed to an individual, I love the look of SimpleArt’s website.

Simple Art screenshotThe design and color scheme is brilliant. The background is kept a muted gray, with interesting graphics adorning the page. The first thing you see is an aerial view of a desk and chair.

The website design is set up like you would see an office, already establishing common ground with the viewer that it is a business setting. But it has all been vectorized, showing off the skills of the designers. These elements are within the top and bottom corners of the webpage, leaving for an interesting background to entertain your eyes, but leave room for the main content of the site in the middle. With the background being a neutral color, it allows for the portfolio pieces to pop on the page. I love the theme and how flexible it is. The portfolio examples float in space, and the footer (which includes the trashcan, side table and social media links) moves down to accommodate for the pieces. This will make it easier to update the website later. The most important thing I love about this website is that it gives a bit of personality, while still focused on conveying their message.

We Bleed Design logoI love the logo of Bryan Katzel’s portfolio We Bleed Design. It is so funky, yet the design is simplified and we get the message it is trying to convey. The website design is also awesome. Everything is on one page, and as you scroll down, the background transitions, and it’s really fascinating. It’s better shown than explained. Check out the website!

The last website I choose to highlight is Jonas Paloheimo’s. I love his tagline/ branding slogan:

From ideas to executions, creative retouching and illustrative services

It is so creative. I like how he strayed away from the traditional “graphic designer”, or “illustrator” and got fancy with it. His portfolio is also non-traditional. Instead of blurbs about each art piece, he wrote a very detailed paragraph for each one. I like that approach because we know clearly what the design problem was, and how he came up with his creative solution.

CMS

CMS stands for Content Management System. While the most simple forms create blogs, designers and organizations use them to create websites. Content Management Systems are sites like WordPress, Drupal, and Joomla. Instead of creating a website from scratch, CMS creates the basics for you. They start you off with a template, and depending on your HTML/CSS skills, information and desires, you can edit the code to fit your needs. The benefits of using a CMS is that it does the basic coding for you, providing you a functional website in a matter of minutes. It is easy to update content and change themes. However, the drawbacks are that your url is not always customizable, if you don’t have any experience with HTML/CSS, it will be almost impossible to customize it how you want. 

#3: A Brief Overview of jQuery

When I saw that jQuery was a possible blog topic, I was excited because it is something that I have been curious about since I’ve been web designing on my own. I found out about it while I was working on the homepage for my personal website. I wanted to incorporate a pop out photo gallery when if you click on a thumbnail, the photo pops out and enlarges on top of the home page screen. The method for achieving this was called a jQuery Lightbox. But when I looked up on how to incorporate it onto my website, the instructions were vague and I was overwhelmed with all the obscure code I was faced with. I ended up not incorporating it at all.

Fast forward five months later, and jQuery presents itself again. Unlike when I first started web design, I have now learned a bit about it, and will share some of this information with you today.

According to jQuery.com, jQuery is a “fast, small and feature-rich Javascript library.” It is accepted across multiple browsers and helps enhance the overall look and feel of a website. It is a scripting language which means it accompanies HTML and CSS, though it is not required. It is sort of like an accessory to the webpage to make it stand out that much more. It can be written and run on any operating system as long as you have a text editor (like Notepad for PC, TextEdit for Mac) and a web browser (Chrome, Firefox, Safari, etc.)

With jQuery, you can do more than just photo galleries. Smashing Magazine lists 50 different options for incorporating jQuery on your webpage, from looping galleries to drop down menus. One of the techniques that stood out to me was creating a polaroid photo viewer. With that, your images are placed in Polaroid frames and are able to be dragged about on the screen. It creates a nice layer effect and makes the webpage interactive. At the moment, I have no use for that, but I still think it’s pretty cool.

#2: RGBA vs Opacity

At first glance, rgba and opacity seem to do the same thing. Both deal with changing the degree of transparency on the page. You can specify the values from 1 (opaque) to 0 (completely transparent).

However, they are not the same. Rgba deals strictly with colors, while opacity can be applied to anything, even whole divs!  Rgba stands for red, green, blue, alpha. Alpha denotes the transparency of the color. Any color that you specify through rgb can change in strength using the alpha property. 

Still confused? css3.info’s “A brief introduction to Opacity and RGBA” has a great example of the difference between the two declarations. When you apply opacity to a background color of a div, it makes everything within the div inherit that opacity as well. But when you use rgba to set the opacity of the background color, only the background color changes in opacity, not the contents within the div.

Because this is a CSS3 technique, unfortunately all browsers do not support it yet (*cough* Internet Explorer *cough*). Drew McLellan from 24 Ways shows us a work around for this problem. Just like we do for font-faces, we can set up back-up background color values in case CSS3 is not available. Whatever element you applied the rgba to, you can also specify within the CSS a solid color replacement. And for a last desperate attempt, if you set the opacity to the background color, you can use a PNG image with slight opacity to achieve the same effect. That way, the effect you are trying to achieve can be seen across all browsers.

 In conclusion, rgba is a better way to set opacity to colors and won’t interfere with the other elements on the page. With rgba, you can set opacity for a drop down menu, but still have the text appear clear and crisp. 

#1: Creative Commons

Creative Commons is a license that allows for some aspects of a work to be used or manipulated as long as the original source of the work is credited. According to creativecommons.org, when you CC a work, you give people the right to “share, use and build upon a work you have created,” as long as it is for non-commercial purposes. The license is free to obtain, and as soon as you upload an original work, it is already under Creative Commons, and one must receive your permission to use it.

As a design student, Creative Commons licenses are very valuable. When I need photos for a project, whether it be as a source of inspiration or for direct use, I can use photos with a CC license free of charge. All I have to do is credit the original owner.

Flickr is a great photo sharing website that allows one to search specifically for CC photos. To access Creative Commons photos in Flickr, go to www.flickr.com. In the search box, type in whatever kind of image you are looking for. After pressing “enter,” click on “Advanced Search.” Scroll to the bottom of the page and you will see a checkbox for only searching through Creative Commons-licensed content. All the images that then show up are free to be used in any way as long as you cite the original uploader/owner of the photo.

Creative Commons opens up a wide range of opportunities for the thrifty college kid like me who can’t afford to buy stock images or who isn’t always able to take pictures myself.