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:
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:
- 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
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-widthpart 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.0part 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:
- 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
- Image in the middle of screen, name on the middle of image,navigation bar on top of image.
- plenty of negative space around image
- Name as header on left corner
- navigation bar at top
- scroll down for images
- header and navigation bar together
- cubes of images
Tutorial on how to make a responsive website/cv:
- 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.
- Logo as main text with nav bar at bottom. Minimal!
About page: Image and play with typography
Looking at websites with creative typography:
About page sample: Looking at Spacing between paragraphs. Highlighted points/links
Wanted a navigation bar with a circular background. Found code info on this website:
- 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:
- 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:
- Nav bar on the right, logo on left and one colour with one image
- Block colour and minimal content
- Image in the center, black background
Sketches drawn in notebook:
After looking at different websites available online here is what I came up with:
Screengrabs of web pages:
Home Page 1:
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.
Still think the image on the left is too small or does not compliment the gallery.
Art & Dolls page: need to centralize the carousel container, & add text to describe artworks.
C.V page: need to get computer skills container to be in line with work experience.
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.
Need to downsize the text, bold for headings and light for descriptions.
Website for popular website fonts:
Looking at different fonts:
Need to highlight/change the colour of links- an indication of a link. Resize the text.
The animation moves the images and shows turquoise blank background and edge of images. Need to come up with a better solution to display images
Home page: Links highlighted red when mouse hovers over text.
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.
Art & Dolls Gallery, carousel style.
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.
Styled the Art and Dolls Gallery to match the home & C.V page. Black background with logo and nav bar.
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.
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: