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

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.

CSS layout made easy

nasarik — Wed, 05 Nov 2008 22:07:15 +0000

When creating a html or CSS document it is not only important to make sure the page meets as many of today’s web standards as possible, it is also important as a web page editor to be able to easily find your way around your documents. Here is a quick guide to help make editing your css files just a little easier.

Use shortcuts to streamline your code, for example instead of using the following -

padding-top:10px;
padding-right:15px;
padding-bottom:10px;
padding-left:15px;

Streamline it using the code below -

padding: 10px 15px 10px 15px;

This will not only save you time when writing your code, but also reduce the overall length of the page making it much easier to navigate.

Find a structure that suits you

When first learning CSS it is sometimes easier to use the stacking method, this is where each line of style inherits a new line on the page; but as you get more confident with your code it may be easier to keep each styling class on one line. This will again help to keep you pages considerably shorter.

Add comments to break up your file in to easily understandable blocks

With many websites that you create you may revisit them quite some time after the build, this can cause problems when familiarising your self with the code again, using comments to break down your code can not only help you when editing a website but could also really help another designer who needs to quickly make some changes to a template they didn’t create.

I would recommend organising your CSS in to groups such as; divs, styling and navigation, this will give you a quick reference to your page. At the head of each CSS group add a comment for example:- /*containing divs*/. You can expand this theory and break the page down even further, but this is a good start.

There is much more to CSS layout than these few tips, but if you give thought to your layout from the beginning you will save yourself time and effort in the long run.

Absolute positioning with CSS

nasarik — Mon, 29 Sep 2008 22:03:51 +0000

When learning CSS you will no doubt quickly master positioning your divs using floats, margin and padding. There is however another way!

Creating your page with floats, margins and padding creates a stacking effect to your pages with absolute positioning you can place the div element anywhere on your page as long as it is within a bounding area.

Here is a simple example of the CSS code to achieve absolute positioning-

.wrapper {
width:800px;
height:600px;
position:relative;
}
.absolute {
width:200px;
height:200px;
position:absolute;
left: 33px;
top: 39px;
}

And here is the body code -

The above CSS shows the wrapper of your webpage with standard height and width values, I have also added the position:relative value this means any absolute elements that we specify will remain relative to the boundary of your webpage. I have then created our absolute positioned element class, again with standard values but this time the position value is absolute. Now using left, top, right, bottom values you can move the element anywhere within or outside your page wrapper.

So basically placing the absolute div within your wrapper as shown in the HTML code example you can place elements wherever you want on your page.

Obviously this can have draw backs, if for example you are wanting to use multiple absolute elements you will need to create separate class’ which can be messy if you are planning on creating a large number of element. But don’t let this put you off, used carefully this can overcome some obstacles in website design, particularly for anyone who is getting started with CSS.