Menu

Responsive Web Design

Responsive Web Design is a technique/technology that involves using fluid, proportional grids and CSS3 media queries. It is relatively easy to implement if you are starting from scratch. It’s a little more difficult to add to existing sites because of it’s use of containers. If you want to get started with a Responsive Web Design here are a few simple steps you can follow:

1) Add a viewport meta tag in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

2) Add a “breakpoint” in your CSS:

@media screen and (max-width: 767px) {
  /* smaller than 1024x768 for example */
  CSS { ... }
}

3) Define your custom CSS.

4) Repeat steps 2 & 3.


Here is an example that uses two elements with widths of 50% (a maximum of 390px each due to the containing element and padding) which stack on top of each other when the screen width is smaller than 768px:

<!DOCTYPE html><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    body { 
      margin:0;
      padding:0;
    }
    .container {
      margin:auto;
      max-width:800px;
    }
    .grey { 
      background-color:#ccc;
      color:#fff;
      padding:20px;
    }
    .section { 
      box-sizing:border-box; 
      float:left;
      padding:5px;
      width:50%;
    }
    @media screen and (max-width: 767px) {
      .section { width:100%; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 1: Some content.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section">
      <div class="grey">
        Section 2: Some more content.
      </div>
    </div>
  </div>
</body>
</html>

mousemove event (jQuery)

Here is a little script that allows an element with the id “follow” to follow the mouse cursor:

$(document).mousemove(function(){
  // Displays the mouse x and y coordinates inside #mouseposition.
  $("#mouseposition").html("x:"+event.pageX+", y:"+event.pageY+"."); 
  // #follow must have absolute positioning.
  $("#follow").css("left", event.pageX);
  $("#follow").css("top", event.pageY);
});

Othello Book Cover Design

Othello Book Cover Design

Othello Book Cover Design

This is a book cover concept I did for the William Shakespeare play Othello. It features a silhouette of Othello revealed in blood. I broke some conventions when creating the spine, but I think it works well as a graphic piece.

Email form processing via PHP

Here is a PHP script that sends an email from an HTML form (submitted via POST):

<?php
/*
 *
 * email form processor
 * form contains: email, subject, message.
 * email is sent from php@php.net.
 *
 */
  $email=$_POST["email"];
  $subject=$_POST["subject"];
  $message="email sent from ip address: "
  . $_SERVER["REMOTE_ADDR"]
  . "\nmessage: " 
  . $_POST["message"];
  $from="php@php.net";

  mail($email, $subject, $message, "From:".$from);
?>

(α)lpha (6) (c)arbon

(α)lpha (6) (c)arbon cover for The Mars Volta RAMROD tapes.

(α)lpha (6) (c)arbon cover for The Mars Volta RAMROD tapes.

This is a cover concept I did called αlpha 6(atomic number) carbon for The Mars Volta RAMROD tapes. I took this project on myself, seeing an opportunity to use design ideas I had after listening to the tapes. I was reviewing organic chemistry at the time. The alpha carbon is the first carbon atom attached to a functional group. Each track was a different functional group. The symbols are reminiscent of organic molecules, but modified to be obfuscated.

Hello world!

I have set up this WordPress site while learning Web Development. I have a PHP redirect in the root (/) folder of my site. It looks like this:

<?php
  header("Location: http://www.poneet.com/wordpress");
?>