Responsive Web Design

We are to redesign our portfolio website and come up with a responsive website that can be viewed on different viewports from desktop to tablets to mobile phones.

 

Here is a brief info on RWD:

Taken from:https://en.wikipedia.org/wiki/Responsive_web_design

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. This trend is so prevalent that Google has begun to boost the ratings of sites that are mobile friendly if the search was made from a mobile device.

Grid use in web design

Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts. Some grid systems specify fixed-width elements with pixels, and some are ‘fluid’, meaning that they call for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.

Link to a responsive grid system website:

http://www.responsivegridsystem.com/

  • The viewport is the user’s visible area of a web page
  • Setting The Viewport

    HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

    You should include the following <meta> viewport element in all your web pages:

  • <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
  • A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window

Looking at existing illustrators websites for inspiration

Here are the  screen grabs & links:

  1. http://www.shauntan.net/

2) http://www.gabrieladellosso.com/

gabriela

  • Gallery using carousel style
  • Name in bold letters
  • Full-screen image of work/illustration and navigation bar on the side
  • my idea is to use negative space in black to frame the image

3) http://www.alessandrobotto.com/

alessandro

  • Image in the middle of screen, name on the middle of image,navigation bar on top of image.
  • plenty of negative space around image

4) http://kentaylor.com.au/

ken

 

  • Name as header on left corner
  • navigation bar at top
  • scroll down for images

5)http://www.wayneandersonart.com/Wayne_Anderson_Art/Wayne_Anderson_Art.html

wayne

6) http://seanandrewmurray.com/

sean

 

  • header and navigation bar together
  • cubes of images

Tutorial on how to make a responsive website/cv:

http://www.hongkiat.com/blog/responsive-resume/

More Samples:

  • One image, black background, fonts in white and grey, nav bar on the left. Plenty of negative space.
  • Different sizes of text, bold and light.

Screenshot

  • Logo as main text with nav bar at bottom. Minimal!

Screen Shot 2015-12-15 at 10.12.00

About page: Image and play with typographyScreen Shot 2015-12-15 at 10.13.09

Looking at websites with creative typography:

16 Websites with Gorgeous Typography

http://www.mediocore.cz/

Screen Shot 2015-12-15 at 10.24.01

About page sample: Looking at Spacing between paragraphs. Highlighted points/linksScreen Shot 2015-12-15 at 10.36.56

Screen Shot 2015-12-15 at 10.33.43

Wanted a navigation bar with a circular background. Found code info on this website:

How to Create Circles with CSS

  • Need to make gaps between the circles and background colour changes when cursor hovers on it.
  • Art and dolls gallery: Wanted to make circular images. Got the  code from this site:

http://designshack.net/articles/css/circlegallery/

  • The code allows the image to be circular and animated.
  • Have to figure out how to link thumbnail images to bigger images along with information about the artworks.

More websites for inspiration:

http://www.mixd.co.uk/

  • Nav bar on the right, logo on left and one colour with one image

Design Screenshot

http://onedesigncompany.com/

  • Block colour and minimal content

Design Screenshot

http://rsq.com/

  • Image in the center, black background

Design Screenshot

Sketches drawn in notebook:

Scan_20160111 (4)Scan_20160111 (5)Scan_20160111 (6)Scan_20160111 (7)Scan_20160111 (8)Scan_20160111 (2)Scan_20160111 (3)

After looking at different websites available online here is what I came up with:

Screengrabs of web pages:

Home Page 1:

Screen Shot 2016-01-07 at 10.31.07

Index page, need to maximize the main image, Email link and navigation bar needs to be styled when minimized (mobile view).

Think it’s too plain, not evenly placed, too much white space. Used colors to draw the eye. Picked candy colors like pink and turquoise to show playfulness.

Gallery page:

Still think the image on the left is too small or does not compliment the gallery.

Screen Shot 2016-01-07 at 10.32.50

Art & Dolls page: need to centralize the carousel container, & add text to describe artworks.Screen Shot 2016-01-07 at 10.34.11

C.V page: need to get computer skills container to be in line with work experience.

Screen Shot 2016-01-07 at 10.34.47

 

Another option:

Index page 2:

Picked the color black to compliment illustrations. Black is associated with power, elegance, formality, and mystery.

Turquoise: The color turquoise is associated with meanings of refreshing, feminine, calming, sophisticated, energy, wisdom, serenity, wholeness, creativity, good luck,  friendship, love, joy, tranquility, patience, intuition, and loyalty. Pretty much everything.

Red: strong colour, to draw the eye.

Screen Shot 2016-01-07 at 10.40.14

Need to downsize the text, bold for headings and light for descriptions.

Website for popular website fonts:

https://www.typewolf.com/blog/most-popular-fonts-of-the-year

Looking at different fonts:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

C.V Page:Screen Shot 2016-01-07 at 10.41.42

Need to highlight/change the colour of links- an indication of a link. Resize the text.

Gallery Page:

Screen Shot 2016-01-07 at 10.42.19

The animation moves the images and shows turquoise blank background and edge of images. Need to come up with a better solution to display imagesScreen Shot 2016-01-07 at 10.42.59

 

Final outcome

Home page: Links highlighted red when mouse hovers over text.

final

C.V page: Links highlighted red when cursor hovers over text. Added an image of a doll on the right side to balance the page. Also to show the end product of my sewing skills.

final1

Art & Dolls Gallery, carousel style.

final3final4

I was not happy with the art and dolls gallery. After uncrossing my eyes and greyer hair I did a few more tweaks and here is the final final outcome:

Made the image smaller on the right.

1

Styled the Art and Dolls Gallery to match the home & C.V page. Black background with logo and nav bar.

23

Feedback from lecturer 12/1/16:

To remove text and just use icons for links at the bottom of  the paragraph as users are familiar with the icons. Do not need text to explain them.

1

Also to make navigation bar responsive, nav bar too long draws the eye downwards.  I need a horizontal drop down menu:

Tried with tutorials from these websites, but when codes are added on the rest of the paragraph disappears. Looked at these websites for responsive dropdown menus:

http://stackoverflow.com/questions/22760948/converting-an-existing-menu-into-responsive-menu

http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

2

 

 

 

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