1200 Pixels

Twelve Hundred Pixels - The New Size in Websites

by KV5R • © 2012 • Rev. 9/10/12

Are you sick of seeing 760 and 980-pixel sites on your 1920×1080 display? Well, I am! They look like a little ribbon of tiny clutter down the middle (or worse, the far left) of the screen.

Many webmasters still do this because they fear some users are still running low-resolution screens—and 12 years ago designing for the Windows default 800-pixel screen was appropriate, but now it has become just another web tradition with no merit.

According to w3schools survey, the number of browsers now reporting 800 resolution is down to 1 percent, and even 1024 has dropped to 13 percent. That means over 86 percent are running 1280 or higher. Most new laptops are now 1366 and, thanks to the interest in HD videos on computers, most new monitors are 1920.

I switched from designing sites for 800 in 2007 when the percentage of 800-pixel users dropped below 15 percent. Now (2012), the percentage of 1024-pixel users has dropped to 14 percent, and it’s time to start designing for the 1280 and higher monitors.

I built the WordPress theme for this site from the Twenty Eleven theme, and one of the many changes I made was bumping the max-width up from 1000 to 1200. This leaves room for a little background, scroll-bar, and window borders on a 1280 display, and it still looks great on a 1920 display (I’m running both here).

“But what about all those little phones and tablets?” We’ve got that covered! Thanks to new capabilities in CSS-3, there′s a new layout called “responsive” that allows web designers to make sites that re-format their layouts, and even shrink images, when it detects the user is using a phone or tablet display. Shrink your browser down real small on this site, and you’ll get the idea.

Web-Safe is Now Web Stupid

I wrote about the so-called web-safe colors and web-safe fonts a few years ago. I can hardly believe my eyes when I still see web “gurus” promoting them.

Web Safe Colors

This nonsense started about fifteen years ago when a lot of people were still using 256-color displays, and then it became a religion. W3Schools reports that 0% are now using 256 colors, and under 2% are still using 65,536 colors. Over 98% are now using 16.777-million-color displays. I wonder what percentage of web devs are still using only 256 colors?

Web Safe Fonts

This one is really wacky. The “safe” list includes things like Helvetica, which is now installed on 100% of Macs but less than 7% of all Windows machines. Thus, it is a Mac font, yet it is probably the most often one seen first in css font stacks. Why? Tradition! Fortunately, CSS-3 provides the mechanism for browsers to use web-based fonts, so we can start thinking about abandoning the whole idea of users’ installed fonts.

For better font choices, see my New Font Family article, in which I built better (modern) font stacks based on researching the stats at CodeStyle.org.

Coding for Internet Explorer

Speaking of browsers, Firefox passed Internet Explorer in January of 2009 — and get this! — Google Chrome passed Firefox in March of 2012! IE’s share has dropped to 16%! Finally—after web devs spent millions of hours and billions of dollars writing hacks into their code so that web pages would work in both IE and the standards-compliant browsers. And only with the recent version 9 has IE finally started following standards.

I wonder how many more years web coders will keep up the tradition of including IE hacks, in fear of some imagined percentage of users (clients?) still running IE6?

Coding for W3C′s Little Detour

Perhaps the most powerful mojo in the web-dev religion is the Holy XHTML. A few years ago, it was the way to go, and quickly became synonymous with semantic markup and the table-hating Cult of Div. But then, the Consortium turned its attention to HTML-5 and sort of abandoned XHTML, even stating that putting compliant HTML in an XML wrapper served no useful purpose. Furthermore, nearly all public web servers ignore the XML wrapper and serve XHTML as plain HTML text.

Yet we still see a development community pushing XHTML and all that <br /> crapola, even as they move to HTML-5, which doesn′t require a slash on self-closing tags. They wouldn′t be caught dead writing a web page without the deprecated XHTML doctype and DTD declaration, yet they are now peppering their code with HTML-5′s bevvy of new tags, the same degree that they were wrapping everything in hundreds of nested DIVs last year, and hundreds of nested tables before that.

As for me, I′ll just keep on hand-coding (well, except for this blog), and the only thing I′ll do different is use the HTML-5 doctype and learn a few new tags.

Bypassing the fads and traditions sure is fun!

—KV5R

CSS Improvements

Formatting Tests

This has a drop-cap. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat: this is in some code tags. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia, sunt in culpa qui ex-officia.The Citer

An external link (opens a new windows or tab) An internal link (this page) Not indented.

MCE’s style padding-left:30px indent. Yuk.

Indented s’more.

  1. An ordered list
  2. The second item
    1. 2.1
    2. 2.2
      1. 2.2.1
      2. 2.2.2 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    3. 2.3
    4. 2.4 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  3. A tertiary item in the primary level
  • Beans
  • Bullets
  • Guns
  • Hills

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit - there was way too much space after paragraphs… Looked disjointed.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. This is how they're supposed to look! You set h1-h6 margin-top:.75em; margin-bottom:.25em and that scoots the heading in a little closer to the following paragraph—a subtle hint of association.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. p and li are always set size 1.0em, line-height 1.5em, with another .5 after the para.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. That with the .75 on top of the next heading, puts a nice 1.0 between a para and the next header.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. It’s fun. 🙂

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit

This is some <pre> text.
10 for a = 1 to 1000000
20 print a
30 next a
And that, kids, is how we benchmarked CoCos and Commodores back in 1980... Oooo, and lookie! It wraps in a pre! There's a little css trick called overflow:auto; white-space:pre-wrap; so you don’t have to do overflow:hidden to keep people from reading what's sticking out the right side of a block element.
And you’s guy’s need’s to stop AbUzInG them apostrofy’s allot. No fragments, neither, to!

WordPress on Ms-Sql

WordPress Database Abstraction Plug-in

As more web hosts migrate to Server 2008 R2, more users are putting WordPress on existing Windows Server hosting accounts. While the web hosts could easily install a MySql server to fully support the many excellent PHP applications that use it, many if not most of them are just leaving their MS-SQL server infrastructure as-is and installing PHP to use it instead. This presents users and developers with a major problem, because MySql and MS-SQL query dialects are very different. The solution, for now, seems to be to write a rather complex database abstraction layer that allows native PHP/MySql code to connect and query MS-SQL. One such example (well, the only one) is the WordPress Database Abstraction plug-in. While it works quite well overall, it is frustrating users (like me) with several bugs, and the author has not updated the plug-in over 7 months (I know, people do get busy and have a life beyond making free software!).  Meanwhile, a few bug reports have piled up, as well as several fixes, some good and some that gin-up new bugs.

Bugs and Fixes

I’ll relate what I have found by much research and testing. This applies to installs using the sqlsrv driver. I don’t know anything about installs using mssql or azure drivers. I can’t take any credit for these fixes, just for researching the issues and testing them, on this very blog.

1. Posts don’t show, for any query that should return a range of posts

  • posts don’t show in admin posts table
  • posts don’t show in blog, where posts n to n selected: home, category, archive, etc.
  • Recent Posts widget doesn’t show because it retrieves no posts
  • but they do show if you use the permalink to each one.

The reason for this is a bug in wp-db-abstraction\translations\sqlsrv\translations.php, line 728 (in v.1.1.4), where the regular expression matches 6 items, but tests for 5. Several people offered a fix by either changing ==5 to >=5 or ==6, but this causes pagination (and other things) to break. The proper fix is to simply remove the last set of parens from the regexp: At or about line 728,

// $pattern = '/LIMIT\s*(\d+)((\s*,?\s*)(\d+)*)(;{0,1})$/is';
$pattern = '/LIMIT\s*(\d+)((\s*,?\s*)(\d+)*);{0,1}$/is';

That way it finds 5 items, not 6, and the rest of the function works as-written. Ref:  http://sourceforge.net/tracker/?func=detail&aid=3485384&group_id=315685&atid=1328061

2. Putting backslash \ in a post breaks query translation

At line 246,

// Remove backslash in order to avoid problems with rewriting
$query = str_replace('\\', '&#92;', $query);

And at line 327,

// Restore backslash earlier removed
$query = str_replace('&#92;', '\\', $query);
// debug code

As you can see from this page, the backslash bug-fix works! Ref: http://wordpress.org/support/topic/plugin-wp-db-abstraction-fix-problems-with-backslash-usage

3. Back-ticks ` leaking into queries

Note that the tick remover at line 513 works fine unless something else (like the previous backslash problem) causes the query translation to break before it’s fully translated, so this mod might not be necessary (but it can’t hurt). At line 283,

// $query = vsprintf($query, $this->preg_data);
$query = vsprintf($query, str_replace('`', '', $this->preg_data));

Ref: http://wordpress.org/support/topic/plugin-wp-db-abstraction-changes-to-114-to-run-with-332-on-mssql

4. Doubled single-quote marks in queries

There’s a post (see Ref below) that "fixes" doubled single-quotes in query translation (see line 391):

if($param[0] !== "'") {
// $param = "'$param'";
$param = "$param";
}

However, this fix doesn’t make sense, because the IF checks to see if the first character of the parameter is NOT a single-quote, and if it isn’t, it adds them to the param. Besides, making $param = "$param" does nothing. I don’t know much about PHP, but shouldn’t it be $param = "'" . $param . "'" ? Ref: http://sourceforge.net/projects/wp-sqlsrv/forums/forum/1125734/topic/5008814 Anyway, I did a full text search on all WordPress 3.4.1 files, and all 6 of them that contain SHOW TABLES LIKE have their parameters properly enclosed in single-quotes, so the whole block below // quoted with double quotes instead of single? is unnecessary, no?

5. Several posts relate to errors on upgrades and imports

I have not done either, so don’t know about that.  Maybe no one does, because the posts were not answered.

Related Sites

The plug-in download: http://wordpress.org/extend/plugins/wordpress-database-abstraction/ -- be sure to read everything in the several tabs. The author’s WordPress on Microsoft site: http://wordpress.visitmix.com/ The Sourceforge wp-sqlsrv page: http://sourceforge.net/projects/wp-sqlsrv/ Lots of background info: http://blogs.msdn.com/b/brian_swan/archive/2010/05/12/running-wordpress-on-sql-server.aspx -- use this article if you are setting up mssql server and php on iis from scratch. —kv5r PS: If you know more about this than I do, please comment! If you don’t, don’t ask me because all that I know about it is on this page.

WordPress on IIS

WordPress on Windows Server!

Imagine that! My web host just upgraded to Server 2008R2, and with it, PHP support. It's so new that they have no instructions about how to use it, but after a few hours of searching and reading, I decided to just try it and see if it would work. I made an MS-SQL database on the server, then uploaded WordPress and the Database Abstraction plug-in, and voilà! it installed and worked on the first try! URL rewrite even works, with no fiddling!

So, why didn't I just move to a Linux/Apache server? Well, because I've been on a Windows server for years and have around 450 pages that end in .asp—and they get around 5,000 hits a day…

Er, Make that WordPress on a Linux VPS!

The migration that I should have done years ago has started… Once I get caught up with all this server admin stuff, I’ll start posting about the fun of being your own web-server admin.