Category: Web Design

HTML5, Responsive Design, CSS, Frameworks and all matters related to building a website.


Screen Watching With Class

Staring At A Screen

My advice when a site is stacked (visually vertical layout) rather than horizontal :

Steep some tea leaves and ask if you have the right class.

This is very true when looking at a site from a desktop, laptop, tablet, phone or fonblet (yuck) screen and using a framework that is mobile first.

The CSS holds the key for a website that’s going to look good on any screen size. As often as I mark up text with HTML5, when creating a website, it’s the Cascading Style Sheet (CSS) that I stare at the most. It is here where we designers and tinkerers make a site pop.

Getting Our Classes Straight

Today’s website benefits from a responsive design approach. Mobile first frameworks such as Bootstrap and Foundation allow me to steep a site that’s going to work visually from a phone, tablet or laptop/desktop screen.

Using the right class (geeky pun?) simply means that some predefined style rules are written and used which allow the various sections of your website to visually deliver the proper brand message and experience required. This ranges from colors, fonts, headers, and menus to stacked vs horizontal layouts depending upon the device from which the site is viewed. There’s quite a bit more, but the mumbo jumbo simply boils down to :

I spend some time sipping through cups of tea while tweaking the layout and feel of your site.

Delivery of a responsive site means that I’m staring at different screens because your brand message and story is not just confined to a desktop view – not in today’s very mobile world.

It’s art as much as function – and quite fun for me.

So if you’re thinking about refreshing your site or starting from scratch, why not give me another reason to stare at more screens? TeazMedia plays with pixels all day long. I also tweet a lot about it to add to the fun. (Means I’m quite reachable and saner since I’m not talking out loud to myself in public – as much).

Okay, it’s also a good reason for me to steep more tea – there, you have the big picture now. Thank you for stopping by.

It would be an honor to have more screen time with your brand story.

Saturday Class

Classy Weekend

What does a geek do on a Saturday night? Be a nerd.

I was supposed to go to a Karaoke (Would that have been the nerdy part?), but instead was head deep in a site refresh. It wasn’t even that much of a design change. But the back-end … or I guess the front-end in my world, involved a complete framework and mindset change. Ohhh boy.

Flat or Skeu?

Flat Design

A design reemergence that removes things such as shadows, bevels and other details in order to achieve a 2-dimensional look. Not a new approach, but it’s one that many designers are enbracing these days.

 

Skeuomorphism

Skeuomorphic, skeu, is an approach that uses design metaphors such as icons and buttons which mimic real life things. These designs offer greater context and detail over flat designs.

 

The OR

Is one better than the other?
Although I personally tend to favor skeu over flat, with a nod to overall user experience, fans of flat cite these pros :

  • Minimalistic
  • Aesthetically pleasing
  • Usability
  • Resource friendly

I would love for someone to explain this to me. I just don’t buy into all of the flat hoopla.
Here are a couple of excellent statements from a post I recently read :

I don’t believe that flat design inherently equates minimalism.

Removing details does not necessarily imply that something is easier to understand. Pixel Resort

Usability

I would really like to see the data that supports flat design as a step forward in usability. In my experience, the direction of modern flat design forces users to relearn a UI (not necessarily a bad thing but one should ask why?) and focus more intently on icons (not always standard) and their exact shape to figure out what they might do or represent. In other words, it takes more than a quick glance now to decipher things in a purely flat design.
Even icons that many consider flat are really skeuomorphic because they still borrow from real life items, painted 2-dimensionally, but still skeuomorphic nonetheless.
For me, skeumorphism can still achieve a minimilist’s aesthetic too. I tend to believe that it contributes to the whole user experience rather than simply one small aspect of it though. Nostalgic feelings go a long way in making something “I want to use”. I’ve seen this time and again in product releases of various types. Skeu does this kind of well. A good skeu item can still be skeuomorphic but light in feel. It can make an item familiar and comfortable without being kitschy.
I believe that flat design is just today’s craze. I’m eager to see how mainstream adopts to Apple’s new iOS7 design – a flat design hybrid.
Sometimes I think that we who are deeply involved in designing from day to day, find it easier to jump on what some call the next “new” thing. We get quickly bored with things that are several hours old.
In the process though we can begin to make assumptions about our users who are still working out designs that are 24 hours old.

Flat or Skeu?

I’m still on the fence, but my legs hang over on the side of skeu right now – skeu done right. There are also cases where flat design is done just right – Microsoft didn’t get it right and iOS7 is a mixed bag right now. Tumblr is right.
Maybe I’m a bit of a Frankenskeu in today’s design world though, but I’m still asking questions.
And perhaps, skeuominimalism is more my speed – almost flat.