RWSmith Designs.

Extraordinary Web Design

jQuery media queries how to do it, and why they are useful

First, let’s start with why we would want a media query to be executed in jQuery. Media queries are mostly used in responsive design to shift html elements. An example would be to break down all columns in a single column for the smallest screen sizes. They can also be used to test many other conditions but we won’t be going into those here.

Below is an example of some common CSS media queries, used typically in mobile first design:

One thing which is quite common is to display additional content on larger screen sizes. Obviously we cannot completely exclude our guests on smaller screens from this content, but due to their small screen it might be best to leave them a link to navigate to this content instead. Continue reading →

Why you should never use all caps in your HTML source code

In this post I will explain why it is dumb and you should never use all capitals for text such as heading in your HTML.

Firstly it’s kinda mixing style with substance, any kind of visual style should, in almost all cases be done in CSS.

Secondly what happens if you write. all of your H2 headings across your 50 page website in capitals. It looks great right now, however when you come to revamp your website with a new look and the the capitalized H2′s no longer fit in..
You now have a lot of work to do and you’ll be kicking yourself that you didn’t just apply a text transform in your stylesheet.

The little CSS snippet below will make all the characters nested between any H2 tags capitalized. Easy

As an aside you can also target the first letter of every word and the fist line with pseudo selectors for further styling options.

How to create a CSS only drop down navigation

Drop down navigation systems have been around for a long time, most of these relying upon Javascript.  Here I demonstrate how to create one with only CSS.

Firstly we need to create an un-ordered list in the HTML. The sub navigation menus will be nested inside the corresponding parent ‘li’ element. This keeps things semantically correct and readable by screen readers.

Continue reading →

Code smells in CSS

I’ve just finished reading an excellent article by Harry Roberts at CSS Wizardry.

The article focuses on bad coding habits that cause major issues in scaleability, lifespan and reusability of code and should be avoided if at all possible.
Harry gives examples of problem code along with improvements that could be made to eradicate it.
I thought I’d share as I see these issues cropping up on many designs and I’ve been guilty myself, this article helped me clear up a few misconceptions.

The article:
Code Smells in CSS

How to style a permalink in a nav that is currently open

A great method to let our visitors know what section of the website they are visiting is to style the currently open link in the navigation.
Let’s start by looking at the CSS link and it’s pseudo selectors:

It can be easy to assume the active pseudo selector will target the current page but it doesn’t, it in fact is activated when the link is pressed / clicked.
So there is no direct way or targeting the link through CSS.

Well that is true and leads many designers to look to Javascript or server side solutions.

Here I will show you an easy method that can be done directly through HTML and CSS.

Continue reading →

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process