Responsive Web Design

The brief for this project is to carry out a re-design of our portfolio website in a manor that would address the shortcomings of the previous website while also ensuring the design is responsive & suitable for use on a number of devices such as PC, Tablet & Mobile Phone.

I chose to do a complete ascetic redesign in that I wanted to bring the colourful & hectic looking site back to a much more professional looking site with clean muted pages.

Feedback given on my previous site included issues such as the following:

  • Attention to the treatment of fonts.
  • Too many elements constrained by boxes.
  • Page titles.
  • Better research on other websites re: page layouts & fonts.

I will be making the above points my focus with this site.

So my first concern was with the layout. For the most part I kept the design similar but introduced the grid system as laid out on W3Schools & Bootstrap.

I used a 12 column grid for the entire site, although a lot of websites are not using the entirety of the standard screen size, choosing instead to design a main body of aprox 700px in width. The magazine  http://uxmag.com/ has chosen such a layout size though strangely the elements on the page don’t seem to arrange themselves in a visually pleasing manor when you reduce the size of the page.

Some of the websites that I have found where I like the layouts are listed here. https://www.internations.org/ is a lovely site though it is using something a little more advanced then we are at the moment. I do really like the different scrolling speed of the elements over the background. However, its layout when you reduce the screen to the size of a mobile device is not as intuitive to navigate as I would like.

The TIME website I feel is just a jumble of content. However, it utilizes a grid system that allows it to break the site down to very manageable elements that read very well on a mobile device.

Time
A lot of information crammed on one page.
Time 2
Breaks down to an easily digestible set of single chunks.

 

 

 

 

 

 

 

Likewise the http://alt-web.com/ site for the dynamic scrolling, however, the layout works perfectly well at the smaller size. One downside to this site unfortunately is the number of different fonts used. I counted about 5 before I gave up.

Text Breakup
Smaller Paragraph Sizes

After feedback I broke my copy down to much more manageable chunks of text to make it easier to read on all screens but specially smaller devices.

 

 

 

 

 

When it came to choosing fonts to use, I had a look at a number of sites to see which ones I liked in terms of readability, size and continuity through the site.

Most of the websites I looked at had a similar size font for the body text, with a few having larger more decorative type for some headings.

The Font on this website has a very welcoming feel to it. It’s a large size at about 20 pixles, (or 15pt), but not too large. It also resizes to about 8pt when you reduce the size of the screen.

The website here is a nice clean looking site at first. However, as you reduce the screen size the size of the font reduces also, leaving you with a font that must be between 8pt & 6pt. It’s really hard to read.

This site here is a very professional looking site helped by the font which is very Helvetica looking. It’s at a very legible size which stays a nice size even when you reduce the size of your screen.

Layout.

I designed my layout to be as pleasing to view no matter what size screen you were using. The site was built with a 12 column grid which allowed me to have a lot of control over the elements. I sometimes only used 3 columns however, and this was enough to cover most pages.

My gallery was set up with a grid of 4 x 3 columns each. But when the screen size goes below 991px this changes to 2×6 columns, then down to the single 1×12 column for the smallest screen size.

All of the images are placed within their own placeholder with text so that they all adjust to the changing media size in a pleasing manor.

Some of the sites I visited to get ideas on how to design my store layout are here.

Cafe Press online Store http://www.cafepress.co.uk/+all+gifts
Mozilla – Verrrryy Simple https://donate.mozilla.org/en-US/
Bambino – Busy but responsive https://www.direct2mum.co.uk/

I also found a very useful snippet of code for placing a horizontal line at the bottom of a div here. Horizontal Line Devider http://stackoverflow.com/questions/26570946/bootstrap-3-horizontal-divider-not-in-a-dropdown

Navigation.

My Navigation bar is styled to have the majority of the links on the left hand side, however, this left quite an empty space on the right side. I styled the link to my blog so that it would place on the right to lend a little balance to the navbar.

As soon as the screen size goes below 768px the navbar changes to a hamburger style menu. This saves a lot of limited space on the smaller screens. I did however have a problem in getting this to work. It would change to a hamburger but would not then expand to show me any of the links.

After a lot of searching for a solution, I finally posted the issue on a forum & discovered the solution was in 2 lines of code pointing to some Java script that I was somehow without. The post is here.

I also discovered an ongoing discussion regarding the Hamburger menu. The argument is being made that it hides the information out of site so that first time visitors have no way of knowing what the site contains without first pushing the menu button.

It seems like the argument will be raging for a while as no one seems to be able to provide a better solution other than the tabs that people like Facebook seem to have adopted lately. I myself think that they may be arguing about angels & pin heads, I think the majority of people know that if they push the button, they’ll get more options. Let the user do some work. 🙂

I found some really good articles written on designing responsive websites at the links below.

http://alistapart.com/article/responsive-web-design

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

www.smashingmagazine.com/2011/07/responsive-web-design-techniques-tools-and-design-strategies/

http://www.targetlocal.co.uk/responsive-web-design-resources/

 

 

Research.

Responsive Sites

http://getbootstrap.com/css/

https://www.internations.org/

Love this. http://alt-web.com/

Don’t like this one. Too cluttered
http://time.com/

Shopping Cart. This one didn’t work well for me but did give me the idea of just creating the panel with the button inside. http://bootsnipp.com/snippets/featured/responsive-shopping-cart

Typography research.

http://www.awwwards.com/websites/typography/ Exciting But elegant

http://www.oursroux.com/project/trippeo A little hard to read
http://kekselias.com/ Very Helvetica
http://nerval.ch/ Karla, Ariel, Aktiv-grotesk A little messed up & no identity.

ONLINE STORE EXAMPLES
Cafe Press online Store http://www.cafepress.co.uk/+all+gifts
Mozilla – Verrrryy Simple https://donate.mozilla.org/en-US/
Bambino – Busy but responsive https://www.direct2mum.co.uk/

Blogs or webpages visited.

Good articles on responsiveness.

http://alistapart.com/article/responsive-web-design

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

http://www.smashingmagazine.com/2011/07/responsive-web-design-techniques-tools-and-design-strategies/

http://www.targetlocal.co.uk/responsive-web-design-resources/

Snippets.

Horizontal Line Devider http://stackoverflow.com/questions/26570946/bootstrap-3-horizontal-divider-not-in-a-dropdown

Resources.

Icon Finder. https://www.iconfinder.com/

Google Web Form. Google form http://goo.gl/forms/D95nszbHTi

Font refrence Page. http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp

Websites with good font http://www.awwwards.com/websites/typography/ Exciting But elegant
http://www.oursroux.com/project/trippeo A little hard to read
http://kekselias.com/ Very Helvetica
http://nerval.ch/ Karla, Ariel, Aktiv-grotesk A little messed up & no identity.

Fonts used on website. Acumin Pro Extra Light, Acumin Pro Light, Verdana, Arial, sans-serif

Anti Hamburger Arguement. http://deep.design/the-hamburger-menu/

Hamburger Issue. http://stackoverflow.com/questions/32406277/burger-menu-does-not-work-in-bootstrap

Solution found. https://forums.adobe.com/message/8375459#8375459

 

Advertisements

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