Recap

In Redesigning My Portfolio Website pt 1, I mentioned that I wanted to learn responsive web design and identified a project to complete in order to do so. At the time of writing I am already some way into the redesign and redevelopment so I am documenting in retrospect until I catch up. In this part I mention the sites that I was inspired by and any online resources that I used before starting.

Inspiration and Resources

I’ve been interested in RWD for a while and have kept a few bookmarks over the years when I have come across articles, blogposts and designs that I find interesting. The first thing that I did then was to re-read the articles and explore the designs.

Some examples of blogs and articles that I read:

Some examples of designs that I like:

I also visited Google’s Web Fundamentals and Getting Started sites. At this point, as you could imagine, I was eager to get going.

Requirements

Like many sites, I knew that I wanted at least the following content:

  1. Logo and Site name
  2. Hamburger Menu (i.e. a navigation menu that is collapsed and hidden on small devices and expanded and visible on larger devices with an icon consiting three vertical lines, resembling a hamburger, is displayed in its place when collapsed)
  3. Content about myself and my abilities that would be divided into multiple sections
  4. A footer that contains links to social media and other parts of my web presence

In order to decide on the content and which sections the content would belong to I looked at what was already available on my LinkedIn profile, my old portfolio site and also my Facebook and Google+ accounts.

Having considered those, I concluded that I would need the following sections:

  • About
  • Skills
  • Qualifications
  • Examples
  • Contact

Once written, the content is not likely to change much and each section is unlikely to contain enough info to warrant its own page, so I opted for a single page site. The aim of the project was primarily to learn RWD techniques so I thought that it would be acceptable to use static HTML content for now.

A future project (or combinination projects) will be to supply content from a data source such as a JSON file or multiple JSON files. I could then deliver this source via different technologies such as server-side PHP or Ruby, or client side JavaScript (jQuery AJAX, AngularJS and/or ReactJS). Obviously I wouldn’t mix them on the on the same implementation, each time I try a new technology, I could place it on a separate subdomain such as, for example, angular.rickymanning.co.uk or react.rickymanning.co.uk. But anyway, I digress.

From what I read, it was apparent that the best apprach to RWD was to design for mobile devices (or any small screens/viewports) first and then to progressively enhance the design on larger screens at points where the design starts to break or when more information can be shown. Designing for specific devices or screen resolutions seemed to be frowned upon and justifiably so.

Source minification and image optimisation for different viewport sizes are both techniques that ideally should be used in real world, real-client websites. At the moment I am mainly concerned with producing an initial design that will scale well and adapt to different screen sizes. These are things that I will return to when I feel that I have done so and, of course, I will blog it here when I do.

My IDE of choice was Brackets and file uploads to the production server were going to be done with FTP via Filezilla (FTP is not optimal, I know, but I just like with minification and optimisation, I was tring to do one thing at a time for this excercise).

Step 1 – Creating the basic structure

I have created a GitHub repository for this project and Step 1 can be viewed on the Step 1 tag. The only file worth looking at at this point is index.html. As well as the basic content, I have added the default values and links to placeholder files that I tend start every project with such as:

  • standard <meta> tags in the <head>
  • a placeholder link to a favicon (favicon will come once i’ve settled on a logo)
  • a link to normalise.css  (a set of styles which creates standard defaults across all browsers)
  • a link to an empty CSS file named styles.css (where I will put all of my custom CSS)
  • a link to jQuery (a JavaScript library commonly used for easy DOM manipulation, animation and AJAX requests)
  • a link to Modernizr (a JavaScript library used for HTML5/CSS3 feature detection)
  • a link to an empty JavaScript file named application.js (where I will put my custom JavaScript)
  • a placeholder SVG file for the logo
  • all links href attributes pointing to “#”

I have included a screenshot of each the top and bottom of the page as seen on an iPhone4 through Chrome’s Device Emulation Tool.

A screenshot of the page after Step 01
The top of the page as seen on an iPhone4 through Chrome’s Device Emulation Tool.
The bottom of the page after Step 01
The bottom of the page as seen on an iPhone4 through Chrome’s Device Emulation Tool.

I have embedded a gist containing the whole HTML file, below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home | Ricky Manning</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!– favicon –>
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<!– css –>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!– jQuery –>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!– modernizr –>
<script type="text/javascript" src="js/modernizr.js"></script>
<!– our JavaScript –>
<script src="js/application.js"></script>
</head>
<body>
<!– header –>
<header>
<object type="image/svg+xml" data="img/logo.svg">Ricky Manning – Software Developer</object>
<h1>Ricky Manning – Software Developer</h1>
</header>
<!– navigation –>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Qualifications</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!– about –>
<h2>About Me</h2>
<p>Hey! My name is Ricky. I am a software developer based in Biggin Hill, Kent. I am enthusiastic about software development (of course) as well as sports, music and various other things that normal human beings like.</p>
<!– skills –>
<h2>My Skills</h2>
<p>My day-to-day mostly involves getting stuck into VB.NET Windows Forms applications, but I like to keep my eye on developments within a wide range of platforms and my technical skillset is always evolving. The very existence of website (and the techniques used to create it) are evidence of that.</p>
<h3>Skills I use Everyday</h3>
<ul>
<li>VB.NET</li>
<li>Windows Forms</li>
<li>MSSQL Server</li>
<li>XML</li>
</ul>
<h3>Skills I Dabble In</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>PHP</li>
<li>MySQL</li>
<li>AJAX</li>
<li>C#</li>
<li>Git</li>
<li>JSON</li>
</ul>
<h3>Skills I use Infrequently</h3>
<ul>
<li>ASP.NET</li>
<li>C++</li>
<li>Java</li>
<li>Adobe Flash</li>
<li>Windows Services</li>
<li>Microsoft Reporting Services</li>
</ul>
<!– qualifications –>
<h2>My Qualifications</h2>
<h3><a href="#">The University of Kent</a></h3>
<p>1st Class Honours, Bsc Multimedia Technology and Design</p>
<p>2007 – 2010</p>
<h4>Selected Areas of Study</h4>
<ul>
<li>Software Development</li>
<li>Graphic Design</li>
<li>Web Design and Development</li>
<li>3D Modelling</li>
<li>Animation</li>
<li>Film Making</li>
</ul>
<!– employment –>
<h2>My Employment History</h2>
<h3>Software Developer</h3>
<p>BTS Holdings PLC</p>
<p>June 2010 – Present (5+ years) | Wallington, Surrey</p>
<h4>Typical skills and technologies:</h4>
<ul>
<li>VB.NET</li>
<li>Windows Forms</li>
<li>MSSQL</li>
<li>XML</li>
</ul>
<!– examples –>
<h2>Some Examples</h2>
<h3>BTS Sport</h3>
<a href="#"><img src="img/bts-sport.png" alt="A screen shot of the BTS Sport website"></a>
<p>BTS Sport is a simple website built using HTML, CSS, Javascript, PHP and MySQL as a learning exercise. It is used by some members of BTS staff to keep track of various sporting activities.</p>
<p>I intend to continue to use it as I investigate new technologies and techniques in the future. For example, I am in the process of a re-write using Responsive Web Design principles and PHP MVC design patterns.</p>
<p>I also want to write my first Android and/or Windows 10 apps for it and I will no doubt use it as I explore other modern web techniques such as SASS, Node.js and react.js.</p>
<p><a href="#">View the BTS Sport site</a></p>
<!– contact –>
<h2>Contact Me</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" required />
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" required />
<label for="msg">Message:</label>
<textarea id="msg" name="user_message" required></textarea>
<button type="submit" name="submit">Send</button>
</form>
<!– footer –>
<footer>
<h3>Follow</h3>
<ul>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Blog</a></li>
</ul>
<p>Copyright © 2015 Ricky Manning. All rights reserved.</p>
</footer>
</body>
</html>

view raw
index.html
hosted with ❤ by GitHub

What’s Next?

I’m my next post, I will start to look at styles and then start adding some.