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:
- BBC Internet Blogs, specifically
Some examples of designs that I like:
Like many sites, I knew that I wanted at least the following content:
- Logo and Site name
- 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)
- Content about myself and my abilities that would be divided into multiple sections
- 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:
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.
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 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.
I have embedded a gist containing the whole HTML file, below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|<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 –>|
|<!– modernizr –>|
|<!– header –>|
|<object type="image/svg+xml" data="img/logo.svg">Ricky Manning – Software Developer</object>|
|<h1>Ricky Manning – Software Developer</h1>|
|<!– navigation –>|
|<!– about –>|
|<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 –>|
|<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>|
|<h3>Skills I Dabble In</h3>|
|<h3>Skills I use Infrequently</h3>|
|<li>Microsoft Reporting Services</li>|
|<!– qualifications –>|
|<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>|
|<li>Web Design and Development</li>|
|<!– employment –>|
|<h2>My Employment History</h2>|
|<p>BTS Holdings PLC</p>|
|<p>June 2010 – Present (5+ years) | Wallington, Surrey</p>|
|<h4>Typical skills and technologies:</h4>|
|<!– examples –>|
|<a href="#"><img src="img/bts-sport.png" alt="A screen shot of the BTS Sport website"></a>|
|<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 –>|
|<form action="#" method="post">|
|<input type="text" id="name" name="user_name" required />|
|<input type="email" id="mail" name="user_email" required />|
|<textarea id="msg" name="user_message" required></textarea>|
|<button type="submit" name="submit">Send</button>|
|<!– footer –>|
|<p>Copyright © 2015 Ricky Manning. All rights reserved.</p>|
I’m my next post, I will start to look at styles and then start adding some.