nasarik.com - A Lancashire designer's journey through life, print and web design » content

Don’t be afraid of responsive design

nasarik — Sat, 03 Sep 2011 20:56:19 +0000

If you use Twitter, read Smashing Magazine or any of the other leading design blogs on the web, then no doubt you will be aware of responsive design and the impact that the industry knows it will have on all web developers and designers. If you don’t, then here is an overview of what it is and why I decided now was the time to get on-board.

So what is response design

Responsive design is basically adapting a website to appear appropriately dependant on the device being used by the user. This has existed in web design for some time, particularly when a designer has needed to ensure that a site appeared correctly in all web browsers, and more notably IE6. Usual this was achieved by using media queries which detected the browser version and delivered the appropriate style sheet, eliminating the need for crude hacks or work-arounds to create a consistent experience for all.

Today with the introduction of CSS3, we are not simply limited to browser specific queries, we have much more control and can detect a browser screen size and deliver a set of specific styles to that as well. This new ability means that we can choose to build our projects with a set of structured options or alternatively with a fluid response meaning that one site can potentially work comfortably on many devices without a huge amount of work.

A simple responsive experience, and why?

With all the hype I simply couldn’t ignore the seemingly inevitable future for our industry, so I finally bit the bullet and gave it a go. Now, as I have only every really created fixed width designs my first job was to update all my values to percentages so that the design would scale effectively, however, I still wanted to keep a maximum site width, so in addition to the width:100%; value I added the max-width: value as well, specifying my desired pixel dimension (sorry, I know pixel!). So this would give me a desired maximum site look while still giving the overall flexibility of the percentages.

Once the scaling was complete (feel free to test this by resizing the browser window), I then did my research which took me to a great article on Smashing Magazine. Articles like this give invaluable information on all aspects of the responsive design process and I would recommend taking your time to find the most appropriate option before really trying to get to grips with responsive designs. For me however, I explored the '@media screen' function, this gave me the control to adapt my design when hitting certain screen dimensions, for example the first thing I tried was to remove content when the screen dimension was that of an iPhone, which looked like this:-

@media screen and (max-width:400px) {
#primary {display:none;}
}

You will see that if you reduce the browser window to below this dimension the sidebar of my site disappears, and the same happens on the iPhone, and that is how the responsive journey of nasarik.com began.

Stumbling blocks

I hit a few novice snags along the way which nearly caused me to give up, one of which was the iPhone still scaling my site even though I had included queries. Don’t panic a simple meta value in your ensures that the iPhone behaves as you would expect and here it is –

Finally, testing can be an issue particularly if you don’t have an iPhone, so try using http://iphone4simulator.com/ it seems to render perfectly and is free.

Conclusion

Responsive design isn’t to be feared, play with it, try and break your site and see what happens.

The internet is free and people will fight for it, or at least take it back

nasarik — Sat, 05 Feb 2011 00:00:47 +0000

Just a quick post to mention the new iPad app ‘The Daily’ has been launched this week by News Corp; with its reasonably cheap price and two weeks free offer Murdoch is looking to secure one million subscribers to make the project viable. However, the day after it was launched the premium content offered by ‘The Daily’ was out there for free!

A programmer named Andy Biao spent a remarkably short amount of time creating a simple website displaying the newly indexed content for the app. According to Biao, a friend had noticed the content was visible to search engines and so decided to create the site; he feels that these are public articles and should be available freely on the web.

I think that this truly demonstrates that no matter how well large corporations try to control, funnel and sell their online wares there will always be somebody smarter trying to keep it open and free. I personally am a great believer in a free world wide web, in a time of increasing red tape and bureaucracy this is potentially the last place where we can still be able to express our opinions and read about the world for free.

Interestingly the site is still live two days since its launch, let’s hope this is a win for the free web. You can visit Andy Biao’s great work here

I can create a website for you!

nasarik — Mon, 07 Sep 2009 21:38:40 +0000

Are you a new business that is looking to create a web presence, an existing business who wants to step out into the Internet or even just someone who feels the need to express themselves online – I can help you create the ideal platform for you!

The Internet is an ever changing system, and at the speed technology moves it can feel really daunting taking either your first step into the web or to commission an online solution that suits you.

When I create websites I try to cut through the techno babble and deal with each specific need using the best solutions. Whether it is a website that simply offers a window into your world or something more complex that allows you to update parts of the site yourself, I am sure I will be able to help.

If you want to see what I can do…then feel free to contact me – info@nasarik.com