Responsify.it

Posted on by KrooKedUK

No, this isn’t another post about a framework, it’s about an online tool for web designers and developers, one that I’m going to create. Responsify.it is the name for my Major Project. In this post I’ll take a look at some of the other names I came up with and the key ingredients which go into making a great name.

The list of names

  • Mediaquery.it
  • Responsify.it
  • Fluidify
  • Responsiv
  • Adapt.it
  • Scalable Grid
  • Responsiv Generator
  • TweakCSS
  • Respond Framework
  • Responsiflex
  • Gridify
  • Make it Fluid

As you can see from the list above most of the names revolve around or take part of their name from keywords relating to responsive design, grids or frameworks, since these describe the offering of my Major Project in some way. I read a great article by Marketing MO in which they make the point, that in order to be sure you have picked a solid name you should test it so that:

  • It sounds good when spoken
  • It is easy to pronounce and spell
  • It’s not confusing
  • It conveys what you need
  • It will work well as a URL

I believe Responsify.it meets all of these criteria. It’s not difficult to say, it has a very nice ring to it and most importantly it sums up what my Major project does, there is so much get right with a name. Being able to create a nice URL was an added bonus, I just hope the .it Trustee Service don’t give me any hassle since it’s an Italian domain suffix I want to use. I wonder if a temporary name change to Stuart Alfredo Batista Kennedy would help the cause?

Joking aside, I am very pleased with the name I have chosen and I hope that in the near future, it will be appearing on blog posts and in tweets.

Wireframes

Here are a couple of wireframes I created, to get a better understanding in my head of the control flow for generating a template.

Wireframes for Responsify.it

Initial Mockup

This is an initial mockup from the first wireframe, at this stage I haven’t finalised any of the customisation options. I’ve since changed my mind on my initial design choices and have decided to go with a cleaner, sharper design, but included the mockup as a record of my progress.

Responsify.it

References

Posted in Design

The Art of Writing

Posted on by KrooKedUK

Writing is something I have always struggled with, I find myself stuck in a loop thinking about things, but not putting them down on a page. I find it difficult to express myself through what I write and end up following the same structure and using the same words over and over. This is far from ideal and results in boring content.

This is something I have been aware of for a while now. It’s frustrating but I have been able to get by, mainly because I have not had to write much outside of the occasional report or some copy for a website. Don’t get me wrong I believe that I am slowly getting better, thanks to the practice I’ve been getting from writing these blog posts but I still feel that my writing lacks a sense of style, a style which helps to engage the reader and maintain their interest.

How do I improve?

Well if experience has taught me anything, it’s that the only way to improve is to practice and put in more effort. Well this is pretty much common sense, so how can I put in more effort? Well one way is to do some research and try to find ways that I can improve my writing. The other is what I am doing now, writing!

I found a great site: Writer’s Digest which has a section dedicated to improving writing. There are many great posts on this site and I would recommend it to anyone wanting to improve or brush up on their writing skills. I found one article in particular to be very helpful and I will pick out some of the points I found most useful.

I narrowed this down to five out of the twenty-five points as I felt they were more relevant to me and to writing blog posts. I have also summarised these points so you should have a look at the full article – 25 Ways to improve your writing style in 30 mins a day.

Voice

This is how you write. You may write in the same way that you think. You change the speed and rythm of what is being read and the length of sentences. All of these things come naturally to you, you usually don’t think about these things, they just happen.

Clarity

The purpose of a blog is to share information, whether it’s about yourself, ideas you have or about work you are doing you will want you get your point accross as well as you possibly can, so it’s best to keep it simple unless you can explain something better by making it more complex.

Communication

The aim of any good writer is to engage with the reader. So to do this we must identify who this is. What do I want to tell them? Do they have pre-conceived ideas about a particular topic? What do they know about the subject I am writing about? How do I want them to feel, Inspired? What do I want them to do when they finish reading, be more pro active?

Style

Similar to your voice this is something you naturally have, and it is up to you whether you want to develop it or not. You can emulate the style of others, or concentrate on creating your own style of writing. You can do this simply by reading. Reading what others have to say can have a huge influence on how you write. This is something I have found myself and it’s one reason I am now reading a wide variety of books.

Revision

We can always improve what we have written, a first draft is never enough, it could be full of grammatical errors or poorly structured sentences. For my blog I usually write out the first draft using Markdown, then read through it with the intention of restructuring it and along the way I will pick up on most grammatical errors. I then put the post online and send my brother the link, he will read it and get back to me on what could, or should be improved.

A lot of these points may seem like common sense and to a large degree they are, but when we focus on them, we can hopefully identify which areas of our writing are lacking. If we look at writing as a lot of little skills rather than one skill, we can then improve each of these little skills one at a time and become a better writer overall.

Having identified the areas I need to improve on, especially the clarity and communication of my writing, I should hopefully notice an improvement in my writing when comparing my posts in week 12 to what I have just written.

The Elements of Style

http://www.bartleby.com/141/ This is an excellent resource, covering grammar and how to structure what you are writing. It is the online version of the book written by William Strunk, Jr. It is an old book, but it is still relevant today.

References

Brian A. Klems, August 23 2011, 25 Ways to improve your writing in 30 minutes a day, Writers Digest Available here: http://www.writersdigest.com/whats-new/25-ways-to-improve-your-writing-in-30-minutes-a-day

Posted in Writing

Settled on an idea for my Major Project

Posted on by KrooKedUK

I wasn’t happy with any of the Major Project ideas I had initially thought of, so I spent a lot of time trying to think of something better. Looking back now I realise put a lot of pressure on myself to come up with an awesome idea, when really I should have been more relaxed about it. I wanted to create something that would be useful to others in the web design industry and the idea that I have decided to run with, just popped into my head one night.

I had just come in from Rick Munro’s talk over at Tibus (a very good evening thanks to both Rick and the Standardista’s) and was browsing through some random sites online. I came accross a site called Tiny Fluid Grid, which allows you to create a custom grid through a simple UI. I thought, this is great, it’s so simple and works really well. So that was that. I then stumbled accross Launchlist which I had seen before, but never paid much attention to, as I had never needed to use it.

So what has this got to do with my Major Project, you ask? Well, having seen both these online tools in such a short space of time, I thought wouldn’t it be cool if there was a tool which let you create a fully customisable web template using a UI, where you can toggle options on and off (like Launchlist) and move sliders around to select certain values (like Tiny Fluid Grid).

My idea was conceived. Of course like anyone that thinks up a new idea, I asked myself many questions. Is this big enough for my Major Project? How will I achieve this? What will the tool let you do? Is there currently anything out there like this? 

So what will this tool let you do? Well so far I have come up with the following ideas:

  • Ability to create a customised web template through a nice UI
  • It will be based off HTML5 Boilerplate – you will have the ability to add exclude certain sections that you don’t need or want (Will put together a definitive list soon)
  • Ability to include responsive options, like a Fluid grid, Media Queries (Will allow those who don’t have the time to learn this right now to create a responsive site without having to start from scratch)
  • Typography options – Ability to include a baseline grid and define certain typography options
  • Any other options that are suggested to me.

This is a very vague list and I will refine and add to it as I do more research and find out exactly what level of customisation people would like. I plan to ask plenty of Web designers (not hard when I have access to all of the IMD’ers) and some web design studios what they would like to see included.

I have thought a little bit about how I will achieve this and I know that the very basics will rely upon calling snippets of code stored in a MySQL database whenever a certain option is selected, but I haven’t had the time to look into this in more detail. I will be researching this and hassling some very talented developers who should be able to help me figure out the best solution! I will will cover what I find out in a future blog post.

I finally had an idea I liked, but I needed someone to assure me that it was a good idea. I discussed the idea with Nik the next day in the Mac Labs, so it was all fresh in my head. He had positive things to say about it and told me that I should get the project up on GitHub as soon as possible. GitHub has become so popular recently which means I have heard of it, but I do not know much about it, aside from the fact that it is some sort of repositry for version control system Git. This is something I will need to get clued up on and I will look at GitHub in a future blog post.

Is there anything similar out there?

Well, yes and no! There are many great tools out there that let you create customisable templates or grids, but none that offer the level of customisation that I want to offer. Here’s a look at some of the tools I have identified.

Initializr

Initializr

Initializr allows you to check boxes which will include certain files and generate a clean customised template based on HTML5 Boilerplate. However it is limited to only being able to include features from HTML5 Boilerplate, whereas I want to use HTML5 Boilerplate as a starting point, strip out unneccessary code and then start adding some of the features I mentioned earlier.

Tiny Fluid Grid

Tiny Fluid Grid

This is a good example to show what I want to create for the UI on the front-end, using sliders and toggles to customise the template. Using this tool you can create a CSS grid and change the Number of Columns, Cutter Percentage and the Minimum and Maximum widths. It is fun to use because of the stylish UI and creates a perfectly customised grid with very little effort from the user.

ZURB CSS Grid Builder

ZURB CSS Grid Builder

This achieves the same goal as the Tiny Fluid Grid and outputs a CSS Grid for the user. However instead of using sliders this relies on the user entering data into input fields which requires more effort and is nowhere near as enjoyable.

HTML5 Boilerplate

HTML5 Boilerplate

I have found out recently that they now offer some level of customisation to allow users to to choose what is included in their template. However this doesn’t go as far as editing too much within the files themselves, it will allow you to include or exclude certain files though.

These tools all offer a certain level of customisation, but they are specific to a certain task. This is where my project differs, it aims to offer customisation of what is included in an HTML or CSS file and will allow the user to define certain settings relating to responsive design, typography and other areas.

So what’s next? Well I need to come up with a name and start thiking about branding. I will also need to consider how the front-end UI will look and feel, and the level of customisation offered. I will cover these areas in future posts.

Posted in Major Project

A Responsive Web

Posted on by KrooKedUK

Responsive Web Design - Ethan Marcotte

Responsive Web Design – Ethan Marcotte

So what are the key elements in creating a responsive website? Well fortunately there are many great resources out there that cover the subject, from blog posts to books, but I want to concentrate on what Ethan Marcotte writes in his book; Responsive Web Design.

The three main areas Ethan identifies are:

  1. A flexible, grid-based layout,
  2. Flexible images and media, and
  3. Media queries, a module from the CSS3 specification.

I will take a brief look at these areas.

A Flexible Grid

The basics of the Flexible Grid boils down to using percentages instead of fixed units like pixels. This enables the content to be resized as the viewport resizes.

This is how we would normally style a container element of our web page using pixels.

#page {
    margin: 0.8em 48px;
    width: 960px;
}

Looks familiar, right? So how do we make this fluid. Well it’s easier than you think, have a look at the CSS below.

#page {
    margin: 0.8em 5.33333333%;
    width: 90%;
}

Now if we resize the broswer window any content inside our #page element will scale down to be 90% of whatever size the window is.

Ethan introduces us to a nice formula in his book, target ÷ context = result. This may sound confusing but it is actually very simple. If we have a container which is 900px wide and want to create a column inside which is 600px wide but express that as a percentage, we will need to find our new percentage in relation to its container. So we find our target width by dividing by its context (containing element).

600 ÷ 900 = .66666667 (66.666667%)

Ethan emphasizes the importance of adding these percentages to our CSS as they are and not to round them down. They may look ugly but they are completely accurate and browsers have no problem working with these figures.

Flexible Images

Well this section couldn’t be simpler. If we want flexible images instead of adding a set width to images, we just add the following.

img {
    max-width: 100%;
}

So how does this work, well basically the image will always scale to fill the space of it’s containing element. This will work for other types of content too.

img,
embed,
object,
video {
        max-width: 100%;
}

You’ll be surprised to know IE6 doesn’t play ball with max-width, who would’ve thought it? Well Ethan covers a little workaround which mostly fixes this issue, but he does warn us that if we are using images with a smaller width than the element they are contained within we could run into problems.

img,
embed,
object,
video {
    width: 100%;
}

Media Queries

Right so we now move onto the magic of media queries. Media queries allow us to test for many different device features like width, height, aspect-ratio and a fair few others, but we will concentrate on width.

@media screen and (max-width: 768px) {

    #main{
        width: 50%
    }
}

Media queries are basically a container for styles that will be applied when a certain feature is detected, in this case anything with a width of 768px or less will get these styles. You could also use min-width to serve styles if a browsers width is over say 1200px.

@media screen and (min-width: 1200px) {

    #main{
        width: 80%
    }
}

So this would then change the width of #main to 80%, if the browser width is over 1200px.

I have looked at the basics of Reponsive design and Ethan covers everything in much more detail in his book, which is best resource to learn this stuff. If you haven’t got a copy, I would urge you to buy it now, as it is worthwhile getting to grips with responsive design today, it’s the future of the web!

Other Resources

There are many blog articles on responsive design, most of which are easy to find via Google. I did find one particular article – Responsive layouts using CSS Media Queries by Kyle Schaeffer which is easy to understand and provides a nice intro to Responsive design without getting too advanced.

Screenfly by Quirktools is a handy tool for testing responsive designs, saving you from having to constantly resize your browser window!

Some great sites using media queries

Let’s have a look at some responsive websites and how they adapt for use at smaller screen resolutions.

Simplebits - Dan Cederholm

Simplebits

Dan is a master with CSS and handcrafting websites, so it is no surprise that his site is sporting a nice responsive layout. I will take a look at Dan’s About page and how the content scales for smaller resolutions. Ok, so Dan’s site layout consists of two columns, one for the main content like blog articles, information about himself, samples of his work and the second column for supplemental information.

When I resize the window to below 800px most of the site switches to a one column layout, with the exception of the footer which switches from three columns to two. This is a good approach for the main body of text and the footer content is re-arranged in a neat logical way too. I love how Dan has used a generous line height for the spacing between the links in the footer as it means they are perfectly usable on any touch device.

Five Simple Steps

Five Simple Steps

Headed by Mark Boulton it’s no surprise that the site adheres to a well defined grid and features stunning typography, which makes viewing the content on the site a pleasure. Oh yeah I’m supposed to be looking at responsive design.

This is another simple layout which switches to a one column layout when the resolution is below 768px and maintains most of this layout when responding to lower resolution devices like the iPhone. One cool feature that I have not seen before is the transformation of the navigation links into a dropdown box, for the one column layouts. This is a very clever approach to provide navigation to smaller devices and a decent alternative to stacking links on top of each other like other responsive designs (nothing wrong with that)!

Ryan O'Rourke - Homepage

Ryan O’Rourke

Ryan O’Rourke’s site is a very good example of a slightly more complex layout which has a fantastic fluid grid. The widescreen layout consists of three columns of content, a mix of text and images. The site maintains a 3 column layout right down to 600px, personally I like this implementation with the text and images reducing in size. Once we go below 600px we then get a one column layout where everything is very readable and tappable.

My views on responsive design

To say Responsive Design is without its problems would be a lie, like any new technology in its infancy, there will always be hurdles to overcome. There have been many articles stating that it’s better to create a standalone mobile site etc, but I believe if Responsive Design is used appropriately, with proper planning for all devices, then it will be suitable in most cases.

Responsive Design isn’t rocket science, so there is no excuse for not experimenting and playing around with it.

Posted in Design

The Fluid Web

Posted on by KrooKedUK

This week the Standardistas were speaking at the Frontend Conference in Oslo. We were lucky enough to be given a preview of their talk ‘Designing the Fluid Web’ in the previous lecture, which was awesome! Basically it covered how flexible and fluid content is and how as designers we have tried to constrain the content by imposing our own restrictions such as fixed width designs.

One point they made really stuck with me, the fact that many people consume the same content on different devices. So they could be browsing your site on a laptop before they head out to work, then browse this same content on their mobile phone during their journey, so we should be providing a seamless experience on all platforms.

They also made the connection between the differences in how the content is consumed on these devices. Phone users tend to graze content, whereas Desktop users spend longer looking for and consuming content. This could be for a number of reasons; when you’re out and about you don’t want to be reading vast amounts of information, chances are you want to find something quickly, whereas when you are at home you have more time to spend searching for what you want. The other reason could be, that there is a limit to how much content people want to view on a tiny phone screen, preferring clear, concise bite size pieces of information.

In my next blog post I will take a look at Responsive Design and how it can be achieved.

Posted in Design

Major Project – Initial Ideas

Posted on by KrooKedUK

Below are a few of my initial ideas for my Major Project. These are by no means what I will end up working on as I’m not entirely happy with any them and there is no way I will be spending the time working on something I don’t enjoy, the quality of the project would definitely suffer. I will blog about my other ideas in the coming weeks.

IMD Student Placement Directory

Finding the time to apply for placement while keeping ahead of Assignments can be overwhelming task. For me it meant that I was applying for my placement a little late, ideally I should have made the time to do so a month before, oh the wonders of hindsight. It worked out well for me but I could have made my life a little less stressful by being more pro active.

The most frustrating thing about the whole process was sending a lot of emails and waiting patiently for a response, which often I did not get. I would guess that about ten percent of companies were kind enough to reply and of that only a handful offering me placement. I did appreciate the response of those companies who did get back to me and explain that they weren’t taking placement students, but pointed me towards some studios that were. At least they could spare five minutes to draft up an email which helped me out.

This whole process got me thinking. What if it was the other way around, how would the company feel if no students got back to them about a placement position they were advertising. This then led on to the idea that a system where companies could look for students could be a very useful tool. Students wouldn’t have to worry as much about Placement, as companies would be doing the searching and contacting, although students could still use their own iniative and apply for placements if they wish.

The service would allow students to sign up and create a profile, including samples of their work and have the ability to tag their account with their skills or areas of interest, for example UI design, Illustration, Web development, PHP, Ruby on Rails, etc. Companies could then browse through this directory of students and be able to quickly find a student that meets their criteria by searching the tags. They would have the option to contact the student, or hire them.

Pros

  • Students could create a profile and concentrate on doing Assignments.
  • Companies would have a single point of access to quickly find and contact students who meet their criteria.
  • Idea could be adapted for Graduates instead.

Cons

  • Students may have already started applying and received placements before I would launch the service (thanks David!).
  • The project may end up a lot bigger than anticipated and be impossible to launch within the timeframe.

Responsive Web Design Gallery

Reponsive web design is still very much in it’s infancy with only a small percentage of the web community actively using the techniques for production websites. I would like to showcase how beneficial responsive design is by showing off great example sites which use responsive design to maximise the usability of their websites.

Pros

  • There are few Responsive only design galleries out there.
  • I would be forced into using media queries for the site (it would be wrong not to). A great opportunity to learn.

Cons

  • Some CSS gallery websites already have responsive sections.
  • Not a very original idea, but then what is these days.

HTML5 Game

This is something I thought about when deciding to choose the Advanced Interactive Programming instead the Games development module. I didn’t want put the time and effort into learning Actionscript, which I know I will never use again outside of the module, whereas Jvascript would be very useful.

I then wondered how long it would be before the games module would take advantage of newer technologies like Canvas or SVG. I had a look into this and came accross an HTML5 game engine called MelonJS which looked very polished considering it’s beta status. I would concentrate on making a 2D platform game as I believe the overall level of polish would be much better.

Pros

  • Pre-existing game engines like MelonJS would cut down a lot of development work.
  • Creating game characters and environments would be a completely new experience.

Cons

  • No experience with game design.
  • May not be as easy to achieve the same level of polish as a flash game.
  • Game engine is still in beta, could be very buggy.
  • May be hard to come up with a solid plot for the game.
Posted in Design

A little dose of inspiration

Posted on by KrooKedUK

Forrst Homepage

Forrst

I was torn between Forrst and Dribbble, but chose Forrst because it does alienate Developers. It is great to be able to look at what other designers and developers are creating and sharing and to see how they tackle certain problems or work to certain design constraints. I love how the users of the site are genuinely interested in helping others, through design critique or fixing a snippet of code someone has been struggling with, it helps create a good impression of the industry.

6Wunderkinder Blog

6Wunderkinder Blog

I’d love to thank these guys in person for making Wunderlist, an awesome task management app, however I’m not going to take a flight out to Berlin just to do so! The reason I find the Wunderlist blog inspiring is that the blog posts they create are of very high quality, including custom images and solid content. They post frequently about their company but do not sacrifice quality over quantity. They have also styled the posts to mimic reading a book which is awesome and was achieved so simply. It has inspired me to post quality content on my blog, not just putting content out there for the sake of it.

Forefathers Group Homepage

Forefathers Group

I love the design of this site, especially what they have achieved with the responsive layout. I love all of the subtle details on the site especially the textures. I could spend all day looking at illustrations and the examples on this site are no exception, they are quirky and very entertaining. Overall the site has a really good feel, combining amusing illustrations and ornate design into a great package.

Kickstarter Homepage

Kickstarter

I soon realised the power that this platform has to bring new ideas to life. I’m sure it will be used to fund many web projects in the future and probably has been already. When I am lacking inspiration I fire up this site and just browse through the projects, looking at what has been successful and trying to figure out why.

Eighthourday Blog

Eighthourday Blog

This is a blog that I have come accross recently and rather by accident. I was getting my usual design fix, browsing through some CSS gallery websites and came accross this blog. It covers many areas of design from print to product design. This range of different influences is something I feel is vital to grow as a designer and this is a great resource for me to do so.

Posted in Design
Newer posts →