Kieran Chapman Design » CSS http://kieranchapmandesign.com Web and user experience design by Kieran Chapman Mon, 25 Feb 2013 21:51:32 +0000 en-US hourly 1 Fun with Responsive Web Design http://kieranchapmandesign.com/2013/01/fun-with-responsive-web-design/ http://kieranchapmandesign.com/2013/01/fun-with-responsive-web-design/#comments Fri, 11 Jan 2013 20:34:15 +0000 admin http://kieranchapmandesign.com/?p=641 One of the most useful and eye-opening books I read last year was “Responsive Web Design” by Ethan Marcotte. It “explore[s] CSS techniques and design principles” and “demonstrat[es] how you can deliver a quality experience to your users no matter how large (or small) their display” (quoted from the  ABA website).

In short, he tells you how you can use CSS to optimize a single website for various screen sizes — large monitors, smaller tablets, tiny phones — using CSS. I think this is great for everyone involved on the web:

  • Users won’t end up seeing the “wrong” version of a site, like when someone sends you a link to “m.website.com” from their mobile device, which in turn looks ridiculous on your computer screen.
  • IT people no longer have to manage two versions of the same site (regular and mobile).
  • Designers and developers only deal with a single site and code, with CSS making the layout decisions based on the screen it’s on.

Of course, responsive web design has its own challenges, but personally I find it fun and exciting (which leads me to believe that I’m in the correct profession).

As a quick learning experience, I optimized my personal site (kieranchapman.net) for mobile devices using only CSS. The home page normally has a large photo with the latest blog posts overlaid in the top right. This layout works fine on monitors and tablets, but the text was far too small on my iPhone. So now on smaller screens the home page rearranges itself using CSS, displaying a smaller main photo with the blog posts below it.

The navigation links also have been moved below the logo, and on subpages the sidebar has been moved below the main page content. All of this makes for a much easier reading experience on mobile devices, all easily handled using CSS.

]]> http://kieranchapmandesign.com/2013/01/fun-with-responsive-web-design/feed/ 0 Display Your Logo with CSS http://kieranchapmandesign.com/2009/10/display-your-logo-with-css/ http://kieranchapmandesign.com/2009/10/display-your-logo-with-css/#comments Sat, 17 Oct 2009 14:42:53 +0000 admin http://kieranchapmandesign.com/?p=261 Here’s a simple tip to use CSS for displaying your website’s logo (and any image in general). The HTML is about as basic as you can get:

<h1><a href=”/”>My Great Website</a<>/h1>

The CSS to “hide” the text and display the logo image instead is pretty simple as well:

h1 {
width: 400px;
height: 100px;
background: url(/images/logo.gif) top left no-repeat;
}

h1 a {
text-indent: -300em;
overflow: hidden;
float: left;
width: 400px;
height: 100px;
}

This styles the text and sets the height and width of the h1 tag to the size of the logo, and displays the logo as a background image. The h1 a style hides the text from the user (but not from search engines) by negative indenting the text and basically hiding it off-screen.

The result:

  • very simple HTML code that’s easily read by search engines (better for SEO)
  • text that provides a correct representation of the logo (no ALT tag needed)
  • design elements are kept separate from the code, making future updates easier (the image can be changed simply by modifying the CSS)
]]> http://kieranchapmandesign.com/2009/10/display-your-logo-with-css/feed/ 0