DannyBrown.net – Restyled and Rewritten

Danny Brown.net Logo

As some of you may have noticed over the past few weeks dannybrown.net has been updated — not only has the style changed, but so has  much of the content. Previously my old domain, dantonybrown.com, showcased a portfolio, contact information and linked to this blog, but did so over a number of pages. Then when I bought dannybrown.net I got rid of the old site and simply redirected the domain to this blog. This new website showcases everything you need to know about me at a glance in one, simple to navigate page.

Planning

When I was in the planning stage of the project I decided very early on that I wanted the site to work just as well on mobile devices as it would on desktops. This is partly because an ever increasing number of people use their smartphone as their primary web browser and partly because I envisage many of the sites users to visit it after I give them one of my business cards, presumably whilst on the move or sat in a conference on their mobile device.

Whilst planning I also contacted my friend Harry Galuszka to get some professional graphic design done for my logo and some of the images I use. I’d like to thank him for his help 🙂

DannyBrown.net Tablet View

DannyBrown.net Tablet View

Development

The website is written in HTML 5 with CSS 3 providing the responsive styles and JavaScript providing some of the interactivity. Whilst developing the website I tried to keep everything really simple, and human readable, without producing really bloated code. I feel I achieved this aim because the entire website is only 120 lines of HTML, 270 lines of CSS and a few libraries.

I used Notepad++ as the source editor for this project, due to its fantastic syntax highlighting, and a Custom-built Linux Virtual Machine on Windows Azure as the host, which I FTP’d my files to, to test them in action.

DannyBrown.net Desktop View

DannyBrown.net Desktop View

Testing

As part of a campaign to get developers writing code that is well optimized for internet explorer Microsoft have started giving away 3 month subscriptions to a fantastic service called BrowserStack. BrowserStack allow you to test your code in Virtual Machines hosted online, allowing you access to devices and operating systems you might not normally have access to. Below is a screenshot of me testing my website on an iPhone 5, a device to which I would normally have no access:

DannyBrown.net iPhone Emulator

DannyBrown.net in an iPhone Emulator

Using this service I was able to test my website against, and make changes to fix layout issues in the following Browsers:

  • Internet Explorer 6/7/8/9/10/11
  • Firefox 3.5 onwards
  • Safari on Mac
  • Safari on iOS
  • Opera Mini
  • Opera Mobile
  • The Android Browser
  • Chrome for Android
  • Google Chrome

On the following OS’s

  • GNU/Linux
  • Windows XP/Vista/ 7 / 8 / 8.1
  • Mac OSX
  • Android (tablets and mobile versions)
  • iOS (iPads and iPhones)

Therefore ensuring I had tested my website on a wide variety of hardware. Its a shame to see that Windows Phone and Windows RT is not currently supported, but this was not too much of an issue as I own devices which run those operating systems myself.

The Future

The website is now installed on a shared Website instance on Windows Azure, in future I will be restyling this blog to fit in more with my website, however I think I will keep it hosted in WordPress.com as I like the fact that they automate backups and installation of new features and bug fixes to the WordPress platform, saving me a few jobs.

On the site itself I think I will be adding more information about my projects, and my education — e.g. module grades and links to download or view software made as part of coursework — soon.

Thanks for reading,

Danny

Advertisements

Tags: , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.