Frank Waive

Webdesigner in Warri Nigeria

  • Frank Waive
  • About me
  • What i’ve done
  • Blog
  • Contact Me
  • Request Quote

How to Use CSS Gradients

June 19, 2013 by frankwaive Leave a Comment

CSS Gradients provide alternatives to image/graphic gradients, You could easily use a CSS gradient instead of using a large image as you site background. In this video, I explain how to generate and use CSS gradients.

Important Links
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
http://davidwalsh.name/css-gradients

Filed Under: Nigerian Website Designer, Tutorials Tagged With: css, css gradients, css tricks, Frank Waive, Nigerian Web Designer, Nigerian Website Designer, Responsive Web Design, video tutorial, Warri Website Designer, Web Designer

Responsive Web Design

April 16, 2013 by frankwaive Leave a Comment

A simple responsive web design video tutorial from Frank Waive a Nigerian Web Designer/ Developer

Filed Under: Nigerian Website Designer, Tutorials Tagged With: Nigerian Web Designer, Nigerian Website Designer, Responsive Web Design, Responsive Web Design Video Tutorial Pt1, Web Design Tutorial Video, Web Design Tutorials, Web Designer

Web Design Mathematics

January 22, 2013 by frankwaive 1 Comment

Mathematics is the most important subject/course taught in schools, don’t get me wrong, I am one of those people who don’t like mathematics, this probably is a transferred dislike I had for my first mathematics teachers. Some people just don’t like numbers, formulas and equations but Math is everywhere, even where you wouldn’t expect it, graphic design, web design, programming etc you’ll need some math, you can’t avoid it, so live with it!

For this article, I’ll be concentrating on web design, the mathematics involved in web design, we’ll be using layout calculations (Responsive Layout) as an example.

Lets talk width calculations, in ordinary fixed width design, design measurements especially widths are done in pixels (px), in responsive web design, they are done in percentages (%). I’ll assume you already know how to design websites and you’re conversant with divs and css.

When using divs for your site site structure, a simple rule applies, rows before columns, the rows are then split into columns, This principle applies to most designs such as the this one for example
Web Design Math

How Percentage (%) Measurements Work
These days, desktops and laptops are no longer the only media through which people access the internet, we now have a variety of devices ranging from mobile phones, to tablets, to TVs, apps etc. As good as this sounds for the end user, this development present a challenge for web designers/developers who now have to make websites look good and usable in all of these devices regardless of their screen size and OS.
To beat this, Responsive Web Design was coined.

“Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing 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).” – Wikipedia

Percentage based measurements would simply render the width of the page/element based on the size of the container element/browser for example, if the #wrapper of a site is set to be 80% in width, the wrapper would be 80% of the browser size, if an element placed immediately inside the wrapper is given the size of 50%, such an element’s size would be 50% of the #wrapper’s width not 50% of the browser width.

Let’s use this design as an example
web design maths

 

The Solution

*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

The above code would adjust the border-box model affecting every element in you design such that your assigned width will be the actually width regardless of padding and border you may have attributed to the element, that is, if you assign 500px as width to an element, 50px as padding and 5px as border, the actual width you’ll get would be 500px which would not be the case without the above code. Using the same figures, without the above code, your displayed width would be equals assigned width 500px + padding 50px + border 5px = 555px.

To make the code work for a specific element rather than all elements, replace the * with the selector ID(#) or class name as the case may be, for example, say we have a div with the ID(#) #asia, to fix the border-box model

For #asia, replace the * with #asia just like this

#asia{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

“Your designs don’t need to look exactly the same in every browser, they just need to look good in every browser.”

Filed Under: Nigerian Website Designer, Tutorials Tagged With: border box, border box model, how to get a web designer in Nigeria, Nigerian Web Designer, Nigerian Website Designer, Responsive Web Design, RWD, Warri Website Designer, Web Designer

Responsive Web Design Pt2

December 17, 2012 by frankwaive Leave a Comment

Responsive Web Design Video Tutorial: A simple responsive web design video tutorial from Frank Waive a Nigerian Web Designer/ Developer

Filed Under: Nigerian Website Designer, Tutorials Tagged With: Responsive Web Design, Responsive Web Design Video Example, Responsive Web Design Video Tutorial Pt2, RWD, rwd tutorials videos, RWD video

Archives

  • May 2020
  • September 2015
  • August 2015
  • July 2015
  • January 2015
  • December 2013
  • October 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Web Designer in Nigeria. Copyright ©    Frank Waive    Webdesigner in Warri Nigeria.

Copyright © 2021 · Frank Waive 4.1 on Genesis Framework · WordPress · Log in