Posts Tagged ‘Web Development’

May 4th, 2010

CSS Arrows and Diamonds

Quick example of pure CSS power

Not that this is of much use it shows just how powerful CSS is!
There are a few spots that code like this can be applied as an alternative to using an image.

Did you know you can make an arrow out of pure CSS!

As seen in the post thumbnail, you can create arrows, diamonds and endless other shapes.
[clear]

Now this is not production code here, just an example.
Here is the rough CSS

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.arrow-block {
	float:	left;
	display: block;
	position: relative;
	width: 220px;
	height: auto;
	margin: 20px;
}
.horizontal {
	float: left;
	display: block;
	width: 200px;
	height: 15px;
	background: #333;
}
.arrow-left {
	float:	left;
	border-right: 20px solid #333;
	border-top:	20px solid transparent;
	border-bottom: 20px solid transparent;
	width: 0px;
	margin: -12px 0 0 0;
}

And this is the HTML

Select All
1
2
3

<div class="arrow-block">
	<div class="arrow-left"></div><div class="horizontal"></div>
</div>

The transparent borders are the key border-top: 20px solid transparent;.
They overwrite the colored part of the border.

You can see the code in action here in this demo.
Check out the source code for that page!

Tags:


Posted in:

CSS

Comments:

No Comments »

April 22nd, 2010

Behind the design

The point behind the current design on Valid Webs is not the aesthetic aw that most WordPress designs focus on using large graphics or fancy images.
My key focus in this design is a common layout to work with for my future VW Pro Theme releases.
The key points of interest being

  • Speed (Load Speed)
  • SEO optimized
  • Plenty of bells and whistles with caching
  • Overall very heavily featured theme without side affects!

The list goes on, look around and you’ll see all of the extra features added and there is only one required plug-in.
The rest is built in and cached.

At the same time having graphic that are minimal and optimized and also places as sprites.
My biggest goal is to cram as much feature rich functionality in as I can without dragging the page or site down.

I see a lot of premium themes loaded up with great features, but then the page load speed drops out.
My goal is to avoid this by highly optimizing the theme as a frame to work from in the future of my designs.

Keep in mind that Google’s newest item added to their page ranking algorithm is page speed!

Tags:


Posted in:

General

Comments:

No Comments »

January 19th, 2010

Valid Code & SEO

I am not a marketing guru or an SEO expert, but I am a developer and part of my job as a developer is to code semantically with SEO in mind.

Does valid code improve SEO?
No it doesn’t improver your rank status.

BUT
If your code is not valid,

  • It can hurt your SEO rank because of semantic issues.
  • It simply looks unprofessional.
  • It will slow down page loading because the browser switches to Quirks mode to evaluate your code and decide how to display it.
  • It can cause display issues with in various browsers.
  • The list goes on…………….

Fact is, if your code can not be followed because of being invalid, it will most likely cause issues displaying in browsers, being read by bots /spiders and most likely will have accessibility issues.

Use the tools available, they are there for a reason.
For the employers, do this also, validate the work you payed for, you will not regret it and it will save you money in the long haul.

Validation Tools

Tags:


Posted in:

SEO

Comments:

No Comments »