CSS3 Design Guru

This site is to showcase the full beauty and power of CSS3.

Modern Philosophy

CSS3 is a powerful styling language, utilize its full power to perfect your design!

An Ode to Mathematics

When I am working on various unique projects, I often come to a problem that requires mathematics to solve, like a calculator for loan interest and payments, or my most recent project involving optimizing profits earned from various items used to make different goods. When I was in university, I did not care much for applied maths, something I am now kicking myself for not studying more. If anyone believes studying math is not important, then they never cared about making or saving money.

It takes years of study to begin to appreciate mathematics. True mathematics, unlike accounting or statistics, is about finding solutions to a problem, not plugging numbers into an equation. This is why I have always enjoyed mathematics and why every organization needs a mathematician.

Building for Mobile, Discovering the Joys of Responsive Design

With today's proliferation of mobile devices, people are no longer connecting to your website on their desktops. They're using small screens that cannot provide an easy reading experience with many traditional websites designed for large screens. Websites, then, need to cater content for these users.

TL;DR

When you dictate a screen's size, you are not using the user's system to your advantage.

  • Build one site for all devices
  • Avoid user-agent detection
  • Use <meta name="viewport"/> to tell browsers how to behave
  • Use CSS @media to fit your content onto different displays

The Hazards of Separate Sites

Many websites will duplicate their content into a special "mobile-friendly" website accessable at a separate URL. The idea seems straight forward:

  1. User goes to example.com
  2. Site detects mobile user-agent string.
  3. Site redirects to m.example.com.

Depending on how you've set up your web server, you could also be tasked with building, developing, and maintaining two completely separate sites with separate content and disconnected features. This is a big no-go, not only because of the extra time you must invest, but because you will likely end up with a feature missing from your mobile site! A number of such sites try to appease their users by providing a link to their "full" website for desktop users. Here you run the risk of running into a couple huge user experience problems:

So for the sake of your customers and your development team, just scrap the whole idea of a mobile-only website

Problems with User-Agent Detection

I don't think I can write better than Google on these points:

User-agent detection depends on having a list of user-agent strings (or substrings) to match against. Such lists need constant maintenance and updating and will not match new user-agents. In reality, many such lists are not maintained appropriately and are stale, giving your users a bad experience.
When matching user-agents, it’s common to mismatch, sometimes detecting a desktop user-agent as a mobile one or detecting a mobile user-agent as a desktop. Likewise, a common mistake for sites is to inadvertently treat tablet devices as smartphones.
Be very careful of cloaking when detecting user-agents.

Browsers lie, so avoid user-agent detection

Setting the Screen Width

Now that we have covered what isn't responsive design, let's look at how you can use responsive design in your website.

First, you need to notify browsers how to display the viewport that will contain your website. Each page needs to include the following line within <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

As Google puts it:

[M]obile browsers default to rendering the page at a desktop screen width. Mobile browsers then try to make the content look better by increasing font sizes and either scaling the content to fit the screen or showing only the part of the content that fits within the screen.

For users, this means that font sizes may have an inconsistent appearance, and users may have to double-tap or pinch-to-zoom in order to be able to see and interact with the content.

What these meta tag settings actually do is simple: forces the browser to set the page width equal to the device's screen width and sets the initial page zoom level. Other options include setting the window height, minimum-scale, maximum-scale, and whether the user can zoom using user-scalable, though you should not normally find a need for these.

Modifying Content Layout

CSS @media FTW

The main work of responsive design is getting your page to show a different layout based upon the medium used to view your page. Thus CSS3 gives us the @media at-rule!

@media screen { section { width: 100%; } }

This is a start, but you need to build based on physical dimensions more than supposed medium. (especially when mobile phones will often lie about being a "screen")

@media (min-width: 1024px) { section { width: 75%; float: none; } aside { width: 25%; float: none; } } @media (min-width: 700px) and (max-width: 1024px) { section, aside { width: 50%; float: none; } } @media (max-width: 700px) { section, aside { width: 100%; float: none; } }

About Me

Sam Grundman

I am a freelance web developer. With years of experience in web development, I provide excellent PSD to HTML/CSS service.

My rates are competitive, so Contact me now!

Primary Skills

  • HTML5, CSS3, JavaScript, XML
  • Ajax, JSON, HTTP, RESTful APIs
  • PHP, jQuery, and MySQL

Personal Projects

Education

The University of North Carolina at Greensboro, December 2008
Earned Two Concurrent Bachelor of Science Degrees
in Physics and Pure Mathematics