Graphic Design services covering Lancashire the Fylde coast and beyond - nasarik.com » 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

Make the most of your RSS feeds

nasarik — Sat, 31 Jan 2009 00:21:36 +0000

Sharing content across the web is not easy, particularly when you start to look into the many and varied ways in which you can broadcast yourself. However, RSS is a really simple way to feed your content to others, and here are a couple of simple options that wont take over your life.

FeedBurner.com allows users to subscribe to your content in many different ways, and gives them more freedom in how they receive your content. From simple subscription using a desktop reader to receiving your content to their email inbox FeedBurner.com helps keep the whole process simple, all you need to do is register and submit your RSS feed. As well as written content FeedBurner.com can take the audio from your RSS feed and automatically create a podcast subscription page with added iTunes functionality. In a nut-shell FeedBurner.com helps you build new relationships with you users.

If you are already using Twitter as a social networking tool then using it to promote your website or blog should be the natural next step. Twitterfeed.com tweets your new blog posts or articles via your RSS feed, all you need is an active twitter account, and an RSS feed twitterfeed.com will do the rest. I am currently trialing this system through my own blog and am yet to see any real increase in my own traffic, but as with any web content aggregator it will take time to build momentum.

Now this may not seem like the most obvious place to feed RSS to, but facebook can be a really clever way to drive traffic back to your blog. Particularly as your friends are more likely to take a look at your posts and in turn are then potentially more likely to recommend your content to others that aren’t in your network. There seem to be a few of these facebook apps and each of them has its own issues, however blog RSS reader seems to be the best way of posting your feeds to your facebook profile.

If you are going to try any of these methods, or even if you have already tried these or others I would be interested to hear your feedback. Equally, as I keep twittering I will update with any interesting results that I find.