Categories
Ethics

ASPIRE: An Acronym for Better Web Practice

Sometimes interesting things happen on Twitter. Last week Scott Jehl proposed ASPIRE as an acronym for the practices we should follow as web designers and developers. From the resulting blog post:

Great websites should aspire to be:

  • Accessible to folks with varying cognitive and physical abilities and disabilities
  • Secure and reliable for storing, manipulating, and transferring information
  • Performant on average devices and in constrained or unreliable network conditions
  • Inclusive to diverse audiences and produced by diverse teams to create better experiences
  • Responsive in adapting the user interface contextually to any screen
  • Ethical in how users’ preferences and data are handled

I’m interested in the last one: E for Ethical.

What constitutes “ethical” web practice?

While we have pretty well established standards and practices for the first five; AccessibleSecurePerformantInclusiveResponsive; we have yet to establish what “Ethical web design and development” means, what it looks like and how it is practiced.

Part of the problem is the term “ethics” is often equated with statements like “do no harm” or practices to avoid legal issues. In reality, ethics refers to the principles and practices we agree upon as a society to judge the goodness and rightness of acts. The Markkula Center for Applied Ethics describes it like this:

“ethics refers to well-founded standards of right and wrong that prescribe what humans ought to do, usually in terms of rights, obligations, benefits to society, fairness, or specific virtues.”

In short, ethics is about practice, how we conduct ourselves and how we judge our actions.

Ethics cannot be summed up as “do no harm” because that leaves the door open to moral relativism: what is harm, to whom is this harm being done, who decides this is harmful, etc.

So what then is ethical practice in relation to web work? Here’s my rough draft to start a conversation about a definition:

Ethical web design and development practice: Work focused on human flourishing through ethical practice and methodology and centered on the rights, capabilities, and agency of the end-user.

What is “ethical practice?” Design and development practice rooted in ethical principles.

What are “ethical principles?” Principles derived from well-established moral philosophies including Consequentialism (specifically Utilitarianism), Duty EthicsVirtue Ethics, and Capability Approach. I wrote a huge article for Smashing Magazine about how to use these in web design, and also done some talks on the topic:

Bottom line, ethical practice is about the doing and being of the practitioner, whether they see their users as ends or means to an end, whether they put “ought” before “can”, and prioritize the agency of those they act upon. It’s about how we judge the goodness and rightness of our work.

I’m really excited about this conversation, and I hope we can get together as a community and figure out what ASPIRE means to us, and how we want to define Ethical web design so we can come together around shared principles and practices and carve meaningful paths into the future for other people and for ourselves.

Cross-posted to LinkedIn.

Cover photo by ?ukasz ?ada, Unsplash 

Categories
My Opinion

Where We Go From Here: 10 Thoughts on the Immediate Future of the Web

I was asked to close out WordCamp Vancouver with a short 20 minute keynote on something interesting. After some thought, I put together a list of 10 trends I see in the web community and where we are headed in the immediate future.

0. The Future Keeps Arriving

In my +15 years working on and with the web, the one major lesson I’ve learned is the future keeps arriving, sooner than you think, and often the future is already here. The web, the internet, and the technologies and communities powering them are evolving ever more rapidly, and what we consider future possibilities today often becomes practical realities the very next day. The future keeps arriving. Keep this in mind as you read on.

1. WordPress Themes are Dead. Long Live WordPress Themes.

If you’re of the WordPress persuasion, you’ll know about the Block Editor, nee “Gutenberg,” and how it’s changing everything. Even if you don’t work with WordPress, even if you don’t care about WordPress, this transition from the content blob to each piece of content being its own “block” with its own properties and attributes is changing everything about how we think of content on the web. Why? Because WordPress powers a full 34% of the web meaning what WordPress does impacts everyone, even those who don’t use it.

Why does this matter? The front-end of pretty much every WordPress site up until this moment is a template displaying content in a relatively rigid way. With the Block Editor, that paradigm is all but dead. Right now, blocks are confined to the “content area,” meaning the post or page content itself. That’s about to change. In the foreseeable future – probably within the next 12 months – the block concept will spill outside the content area to take over the whole view. This article and video from Matias Ventura gives us an early preview of this future:

Exactly what this all means is still up for debate, and the debate is happening right now: See Ben Gilbanks’ “The End of WordPress Themes Is In Sight” and Justin Tadlock’s “Rebirth of Creativity: Gutenberg and the Future of WordPress Themes” for two contrasting views.

Bottom line: What we think of as a “WordPress theme” is already an outdated concept. The future has arrived, we’re just waiting for the practical implementation.

2. Gatsbyfication of the CMS Ecosystem

If you don’t know what Gatsby is, you will soon. The emergence and popularity of static site generators like Gatsby, 11tyNuxtJekyllHugo, and more is the beginning of a communal shift from delivering server-side rendered front-ends to delivering static or faux-static front-ends, often powered by JavaScript frameworks powerful APIs, and new query languages like GraphQL (see below for more on that). Gatsby and its ilk sit adjacent to traditional CMSes pulling data from them through APIs and presenting it to the user in new and more performant ways. And they can combine data in ways those old CMSes can not. More on that later as well.

What’s driving the Gatsbyfication of the CMS ecosystem? Several things:

  1. The idea of the monolithic end-to-end CMS solution is old and outdated. We no longer consume data from single sources, and giant monolithic CMSes like WordPress, Drupal that try to do everything for everyone etc are becoming dinosaurs.
  2. Performance is the new Black, and CMS-generated just-in-time server-rendered sites just don’t cut it. Static site generators pulling data from CMSes is the natural progression from caching server-rendered content.
  3. Delivering content on the “Edge”: The web is global, yet CMS-based content delivery is most often confined to one server in one location. Content Delivery Networks (CDNs) have long been used to try to remedy this issue, with mixed results. Static site generators like Gatsby allow content to be computed and rendered on the “edge” – closer to the end-user, and in a more performant way.
  4. JavaScript is the new wine. Nobody likes PHP any more. Love it or hate it, JavaScript is the place to be, and static site generators are soaking in it.

Bottom line: I call this trend the “Gatsbyfication” because right now Gatsby has more wind in its sails than any competitor and money is pouring into the project. Does that mean Gatsby will reign supreme? I have no idea, but I think a Gastby-type solution will reign supreme in our immediate future.

3. With the APIfication of the Web, REST is ceding to GraphQL

REST APIs have been around since forever. I remember going to a web conference in 2009 where almost every talk was about RESTful APIs. REST gave us the tools and infrastructure to evolve the web beyond single-source-of-content solutions and paved the cowpaths leading to the client-side content rendering which is now the default for content rich sites including LinkedIn, YouTube, Facebook, and sites powered by static site generators like Gatsby (see above).

The problem is the REST concept is old, and it doesn’t provide the necessary tooling to do the things we want to do today.

Enter GraphQL, a new query language which approaches the same problem REST tried to solve in a new and more modern way. I won’t bore you with the details of how GraphQL works (we have courses for that at LinkedIn Learning if you’re interested!). Suffice it to say GraphQL allows developers to combine data from different API sources and make it available in ways that benefit them and make previously impossible or very hard things practically possible.

If you don’t believe me, look no further than the WordPress project: After an enormous undertaking of creating a proper REST API for WordPress, tools like Gatsby choose instead to use the custom WPGraphQL to query and consume data from the source.

Bottom line: The APIfication of the web has been happening for a while, and future web services will need to serve up comprehensive APIs to stay relevant. GraphQL-type query languages will replace REST as the standard interface, and as a result consuming content from single sources will become an anti-pattern (see below).

4. Content Streams and the Content Mesh

Back in 2013, David Gelernter published an opinion piece in Wired Magazine titled “The End of the Web, Search, and Computer as We Know It” where he talks about the concept of a “lifestream”:

“a heterogeneous, content-searchable, real-time messaging stream.”

David Gelernter

Sound familiar? If you have one of those talking thermos cans at home and asked it “Hey Corporate Surveillance Device, tell me about my day” you know that’s pretty much were we live today. Except the web hasn’t quite caught up to the trend yet.

Enter the “Content Mesh” — the infrastructure layer for a decoupled website — introduced by the Gatsby team and pretty much the manifestation of what Gelernter talked about all those years ago.

The Content Mesh, if we choose to adopt this language, is the idea of building a front-end that consumes and interacts with data from multiple sources. So instead of having one monolithic WordPress site trying to do blogging and ecommerce and forums and forms and everything else, you have one unified front end that brings in blogging from WordPress, ecommerce from Shopify, pages from Contentful, forms from Google Forms, etc. Literally meshing together content.

Bottom line: The current idea of the content mesh is an evolution of the single-source website concept. That’s where we’re headed right this moment. In the slightly more distant future, the content mesh will be served by our personal assistants, configured by the individual user, and the website as we know it will be a quaint anachronistic thing some people choose to spend their time on.

5. The Rectangular Screen as Main Content Delivery Modality is Already Dead

Here’s the new trailer for the dystopian near-future sci-fi show Black Mirror:

Just kidding. This is an ad for Facebook Horizon – a virtual world reminiscent of the OASIS predicted in the book Ready Player One, except it’s run by IOI (you don’t need to read the book or see the movie btw. If you haven’t, just read on).

AR/MR/XR/VR/CR whatever we end up calling it, the idea of computers in some way augmenting our reality by introducing virtual layers in the form of visuals, audio, or other sensory inputs, is now a reality. All the major tech firms are fighting to be the first to inject their own ad-fuelled reality as a layer on top of our own. If you have one of those aforementioned talking orporate surveillance thermos cans, or a modern phone or computer or TV with a voice assistant, you are already living in this future.

The world in which our main tool for accessing information over the internet is a rectangular glass screen is already in the past. We are merely experiencing the late-stage residuals. The second the Fruit Company rolls out their first set of iGlass AR-powered glasses, and the Search Company follows suit with AR-powered contacts, the focus for web content delivery will shift from “how do we cram as many ads into the viewport of a mobile browser” to “how do we cram as many ads into the field of view and range of hearing of the human experience?”

Don’t believe me? Watch Marley Rafson’s talk “The Case for Augmented Reality on the Web” from JSConfEU 2019 and draw your own conclusions:

Bottom line: The APIfication of the web, and the Content Mesh, will become more important than ever because we’ll need to design and deliver our content to new interfaces which don’t even exist yet in the immediate future. Also, unless we actively resist the urge to AR everything and put ads everywhere, our AR world will be an insufferable hellscape reminiscent of Keiichi Matsuda’s “HYPER-REALITY” for the next decade.

6. CSS Changes Everything

On a positive note, CSS is evolving and changing in extraordinary ways, and the future of CSS is even more extraordinary. In our modern web dev world already have magical tools like flexgridcustom propertiesanimations, and filters. Soon our CSS toolkit will expand exponentially thanks to CSS Houdini. Look no further than Una Kravets‘ JSConfEU talk “CSS Houdini & the Future of Styling” to see where we’re headed next:

As if that wasn’t enough, the canvas in which we do our work is about to change as well. Right now, Adam Argyle is working on his VisBug Chrome extension:

Adam made this GIF just for this article!

Sold as a visual browser development tool that makes your browser viewport work more like a design tool, I think this thing is a peek at what the future will bring in terms of web design: The browser itself being the design canvas, and server-powered tools like WordPress’ Gutenberg editor being old hat.

7. Open Source Ideology is D/Evolving

Open source rules the web world. Open source is also experiencing some long-overdue internal strife. Without going into too much detail, Richard Stallman, considered the originator of open source ideology, has stepped down from his various leadership roles in the open source and free software communities due to accusations of decades of problematic behavior. You can read more about this in various news outlets and opinion pieces (and you should, this stuff is important).

Here’s my abbreviated take: It’s high time problematic characters like Stallman are removed from their positions of power in the open source community because their influence has been detrimental to the participation in these communities for many marginalized groups. Moreover, it opens the door to a deeper conversation about the core ethos of open source ideology and whether the radical understandings of terms like “freedom” by a group of entitled white men is a sound foundation to build equitable and inclusive communities moving forward.

I’m going to write more about this in a separate post, but my long-held opinion on open source ideology (and I say this as an open source creator, contributor, and proponent) is open source in its present iteration is exclusionary and privileged. Why? Because it’s based on the assumption that those who have something worthwhile to contribute also have the time, money, and necessary tools and access to be able to contribute. From there follows that anyone who is not contributing, for whatever reason, does not have anything valuable to contribute (which is utter nonsense) and that those who contribute the most (usually because they are paid by corporations to do so – see below) are the best people to lead the project. “Decisions are made by those who show up” really means “decisions are made by those with enough privilege to show up” which is not an equitable nor inclusive base to rest an entire ideology on. Follow Christie Koehler for more on that story.

Then there’s the whole “open source is value neutral” and “open source licenses can’t have morality clauses” thin which deserves an entire article its own. Follow and support Coraline Ada Ehmke in their efforts to debunk that nonsense.

Bottom line: Open Source ideology is being redefined right now. Your participation in that conversation decides whether it’ll be an evolution or a devolution. Your voice matters, so use it! Forward the equitable and inclusive open source revolution!

8. Corporate Control of Open Source is the New Black

Guess what: Open Source is super valuable. No wonder large corporations want their piece of the pie. Actually, they want all the pieces of the pie and they want you to bake it, for free! Yes, yes, I work for LinkedIn which is part of Microsoft etc. But I’m believe in open source, and I’m deeply concerned about the corporatization of the open source space.

Here’s the gist: The core idea of free libre open source software was to effectively flood the commons with free (as in you don’t pay) open source software so the large corporations who sold expensive licenses for proprietary software went out of business. Don’t believe me? Go read the GNU Manifesto (and keep in mind everything I said above). The idea was we would use open source software in the capitalist world to earn money, thereby keeping the software itself without value and only putting value to the services rendered with the software.

So what happened? Corporations figured since all the open source contributors didn’t derive value from their software, the corporations could do it instead! And without paying a dime for it. Literally get people to work for free and then make money from that work.

Sure, that’s an oversimplification, but it is also the reality on the ground. The corporatization of open source, in particular large projects like WordPress and Drupal and NPM, is a reality, and it’s only going to get bigger. If there is value in a project, a big corporation will be made to turn some of that value into cold hard cash. See the aforementioned Gatsby.

Some say this is a good thing. Some say it’s not. I think we need to start thinking more about where we want to go than how we can turn free contributors into cash cows.

Bottom line: The open source community has failed in its mission to change the status quo, choosing instead to double down on good old capitalism. If you don’t like it, do something about it. Also, go read Cory Doctorow’s “Walkaway“.

9. The Tech Ethics Reckoning

The Pope felt it necessary to invite Silicon Valley to the Vatican to talk to the tech industry about morals, ethics, and the common good:

Unless you’ve been living under a rock, you know #techethics is hot shit, and for good reason: Turns out moving fast and breaking things breaks people, communities, even our democracy.

Here’s the problem: The tech and design communities are largely autodidact. There is no board of ethics for tech or design, and everyone is allowed and encouraged to do whatever they want in the name of disruption, innovation, and creation. Put bluntly, we are working in a non-ethical industry.

Why does this matter? Because in lieu of the tech and design industries regulating themselves, or at the very least adopting and enforcing some basic form of ethics, governments will regulate us without our input. Which is what’s happening right now.

This is especially bad for open source because unlike large corporations and their walled gardens, who spend millions on lobbyists to sway politicians to lock everything down and hand the keys to the highest bidder, open source developers live in some reality dysfunction where they think politics and political involvement are irrelevant.

Trust me when I say they are not. They are the life blood of modern civil society, and choosing to stand aside and let things happen without your input is the same as letting other people carve out the path you need to follow into your future.

Bottom line: Unless we figure out the whole ethics thing for tech and design right now, we are going to be regulated into a walled garden of corporate surveillance of our own making.

10. The Next Generation

Looking around at my industry I see two things:

  1. Old white men like myself wringing our hands and saying “man, we really messed this up, I wish we could roll back the clock and do some things differently.”
  2. Young diverse community members trying to make make a living out of an industry emerging from its adolescence and realizing it now runs the world and needs to do a better job at it.

This gives me hope.

I believe in the next generation of creators on the web, and I believe they have what it takes to turn this chaotic mess we call “tech” into what it can be: A new path forward for a more equitable and diverse society with values rooted in the idea of common goods distributed through free and open commons.

Bottom line: The future keeps arriving. The future is already here. It is our job to ensure the next generation gets to experience the same freedom of creation and discovery on a free an open internet so they can build a robust and inclusive society for all of us.

Postscript: Your turn

This is what I see. I’m just one person, and I have strong opinions about things. To move forward, a discourse is required. We need to share our thoughts, ideas, hopes, and concerns, and figure out how to move forward together.

What do you think about all this? What trends are you seeing? Where are we headed next, and where do you think we should be headed?

Add your thoughts in the comments, or in your own posts, and let’s find paths into the future we design together!

Cross-posted to LinkedIn.

Categories
CIRA

2012 CIRA Board of Directors Election Nominations Open

Got a .ca domain? If so, you should register as a member of the CIRA (Canadian Internet Registration Authority). You can do so by following this link. Membership is free and zero obligation and gives you access to resources and the power to nominate people for and vote in the CIRA Board of Directors elections which happen to be happening right now.

Over the years I have held several positions on boards, committees and in political organizations, and I am well versed with committee process, financial management and political strategy. This combined with my broad experience in web design, development and education as well as my strong connection to the Canadian web community makes me an ideal candidate for the CIRA Board of Directors. How’s that for a political pitch! All jokes aside though, I do want you to nominate me for this position, and vote for me in the upcoming elections.

Having a user voice on the Board of Directors of the CIRA is vitally important as the future of the internet in Canada and in the world is currently being laid out by our often misguided political representatives. The internet has changed the world by giving every man, woman, and child a voice and allowing anyone to share their thoughts, ideas, and content freely and without restriction. This has lead to everything from media shifts to social change and even political and national groundswells, and it must be allowed to continue. We live in a digital age, and the internet is at its core.

From the CIRA press release:

Ottawa, July 31, 2012 — The Canadian Internet Registration Authority (CIRA) is asking its Members to take part in the exclusive Member-only Nomination period by nominating themselves or someone they know for the 2012 CIRA Board of Directors Election.

.CA Members play a valuable role in contributing to CIRA’s corporate strategic direction by directly participating in governance activities such as Board of Director Elections. This is an opportunity for our Members to take a leadership role in the development of the Internet of the future to ensure it continues to be an open and accessible public resource.

We are looking for Canadians with board experience and/or an interest in technology and the Internet. Expertise in one of the following areas would be an asset: accounting, law, marketing and communications or technology.

Nominations may be submitted by Members until to 6 p.m. (ET) on August 13th, 2012 at: elections.cira.ca/2012/en/member_nominees.html.

Thereafter nominees require a minimum of 20 members to “show their support” to be included in the final vote. More on that to come.

The full calendar for the elections is as follows:

  • July 31 — Members, submit your nominations
  • August 23 — Show your support for Member Nominees
  • September 11 — Ask Candidates your questions in the Campaign Forum
  • September 19 — Make your voice heard, VOTE!

And like I said at the top, the first step is to become a member, so get on it now and help get me a seat!

Categories
Expression Web My Book

In rewrite mode: New version of my book on the way!

Since Amazon.com was kind enough to list my book months before it’s done and I’ve been Tweeting about it for weeks there really is no reason to pretend it’s a secret any more: I am currently in the process of revising my book Sams Teach Yourself Microsoft Expression Web in 24 Hours 3 for the upcoming release of Expression Web 3 which is slated for some time later this summer.

Needless to say writing a book about software that not only is not out yet but is not even finished yet is a bit of a challenge. And like last year (when I wrote the first version of the book) I will probably spend the next couple of months in constant revision mode making new screen grabs, changing tutorials to fit a not-yet-completed user interface and so on. But hey, I’m not complaining: Writing these books means I have to learn and understand every minute detail about the software. And knowing your tools inside out makes for a faster and more productive work routine.

The new book is more than just an update to fit the new user interface: Over the past year I’ve received countless emails from readers with questions and comments about everything from how to save files in Expression Web to how I got a book deal and I’ve taken all these comments, suggestions and criticisms along with my own experiences and thoughts to rewrite many of the chapters and add new and exciting content. And yes, my sentences are just as long in the book!

New features in the book

The new version of the book will, amongst other things, include:

  • a completely new project that the reader will build from the ground up. The new project has a better design, more flexibility and new choices for the designer to make the site her own. The idea behind the new project is that once the site is completed by the end of Hour 24, the reader can simply replace the content from the book with her own content and launch the site.
  • New menu tutorials showcasing vertical and horizontal CSS based menus as well as a CSS based drop-down menu.
  • A CSS layout tutorial explaining how you can use CSS to create multiple different layouts within one site without having to make separate style sheets.
  • An entire chapter on cross-browser testing using SuperPreview and the other accessibility and reporting tools built into Expression Web 3.

I am currently rewriting Hour 18 and, having skipped some chapters, still have about 10 to go (plus a couple of apendixes and a bonus chapter) so if you have comments, questions, concerns or anything else you want to say before I wrap this baby up, please feel free to put it in the comments below or send me an email. The book is written to help you so if you need help, speak up!

That said, go to Amazon.com and buy the book now. That way you know you’ll have it the minute it comes out!

Categories
CSS Expression Web News Tutorials

Read my article in the Microsoft Expression November Newsletter

A month or so ago Microsoft contacted me and asked if I would write an article on Expression Web for their Expression Newsletter. How could I say no to such an opportunity? After some back and forth about the topic I landed on an article on how to create a Pure CSS Drop-Down menu. Over time I’ve encountered numerous solutions, most of which were clunky and didn’t work properly. So the tutorial demonstrates how to create a fully functional CSS-only drop-down menu utilizing the excellent CSS features in Expression Web.

That’s not to say you have to use Expression Web to get something out of the article though. You can follow the tutorial and get the same results even if you’re using Notepad to build your sites. It’s just that Expression Web makes it a hell of a lot easier to manage.

This article comes hot on the heels of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which contains an expanded tutorial on the same topic that also covers a layers-based drop-down menu. If you are an Expression Web 2 user of if you are considering buying or switching over to this excellent web authoring and publishing platform I humbly suggest you pick up a copy for yourself. It’s a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with the application. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do.

If you’re interested in a preview of the kind of content you’ll find in the book or you just want to know how to make a Pure CSS Drop-Down menu, you can read the full article, The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web, here or subscribe to the Expression Web Newsletter.

Categories
Expression Web

Expression Web 2 Beta Bug Report

I’ve been working with Expression Web 2 Beta for two weeks now and I’ve found it to be a vast improvement from the first release. I’ll get back to that in a later post but right now I want to share with you some interesting and annoying bugs that have gotten in the way of my work.

File tree updates and image file recognition

I don’t know why, but it seems Expression Web works with some form of paging file or log that keeps track of the files in your site. That’s all fine and dandy except it doesn’t correspond with the folder you are working in. Let me explain: When I design sites I regularly ad new folders and files outside of the program by simply copying and pasting them in explorer view. Unfortunately these changes are not reflected in Expression Web unless you hit F5 or click “Refresh”. And even then, whether the tree gets updated or not seems rather random. Especially if it’s a sub-folder you currently have exploded in the tree view. Every time I ad a new file or folder within a sub folder of the site, I have to unexplode the tree to see the update. And that’s a couple of extra mouse clicks I could do without.

But that’s just the half of it. For some reason the program has serious trouble recognizing simple image files. This problem is heavily debated in the Expression Web forum and I’ve encountered it several times. Basically if you ad an image file into an existing folder outside of Expression Web, it’s hit and miss whether that file will actually be recognized by the program. Chances are all you get is a little red X instead of the image. The only way to remedy this issue is to go to File -> Import Image and import it into the program. This seems highly unneccessary as these are standard issue files (jpg, png, gif etc) that don’t require special rendering of any sort. And it gets really annoying when you are making minute changes to an image file to make it fit your layout because every time you overwrite your old file, you have to re-import it to see that update.

To be fair, I’m not sure this last issue is a real bug or if it’s an intended feature from the Dev team. Ideally I’d like to see both of the above issues resolved so that the updating/importing of new files are done automatically. If not, my secondary option would be that both full file-tree updates and image importing is included in the F5 Update function.

The PHP destroyer

Expression Web 2 Beta does have extensive support for PHP, but it’s not quite there yet. I’ve been designing some new WordPress themes with the software and I’ve come across something really weird: On the second upload of the same file, the PHP is garbled (at least parts of it). Here’s exactly what happens:

I have a file called header.php. Right at the top of the <head> there is this line of code:

<title><?php bloginfo(‘name’); if ( is_404() ) : _e(‘ » ‘, ‘box’); _e(‘Not Found’, ‘box’); elseif ( is_home() ) : _e(‘ » ‘, ‘box’); bloginfo(‘description’); else : wp_title(); endif; ?></title>

After editing and saving the php file, I uploaded it to the server and ran a test. Everything was fine but there were some minor issues further down in the file that needed tweaking. I made the necessary changes, saved and re-uploaded the file. This time, once it reached the server, the line above read like this:

<title>&lt;?php bloginfo(&#39;name&#39;); if ( is_404() ) : _e(&#39; » &#39;, &#39;sandbox&#39;); _e(&#39;Not Found&#39;, &#39;sandbox&#39;); elseif ( is_home() ) : _e(&#39; » &#39;, &#39;sandbox&#39;); bloginfo(&#39;description&#39;); else : wp_title(); endif; ?&gt;</title>

It’s pretty evident what happened here but why it happened is beyond me and I think it’s pretty clear why I find this “mildly” frustrating. It does look a lot like the old PHP problem EW had, but what’s new is that it only appears to effect small parts of the file rather than the whole. There is plenty of PHP code further down in the same file that remains unaffected even though the <title> tag is completely garbled. Ghost in the Shell anyone?

Categories
CSS Expression Web News

Eric Meyer’s CSS Sculptor for Expression Web – Start things right

I always say that unless you start things right, you’re going to run into problems somewhere down the line. Nowhere is that more true than in building websites, especially if you venture into the realm of standards based scripting. Fortunately there are people out there who know how to do things the right way, and they are more than willing to share their knowledge with us layfolk. One such person is Eric Meyer and with his new CSS Sculptor for Expression Web he sets out to make the deceptively complicated task of making web sites look the same across all browsers easier for one and all.

If you’re one of those people who like to write all your CSS in Visual Studio and you know absolutely everything about standards-based coding, you need read no further. If on the other hand you are like me and CSS is like a second language you still have trouble with, this is vital information.

I’m not saying that CSS Scupltor will generate all the code for you or even solve all your problems. What it does is start you off on the right foot, with proper high-end runners and a good night’s sleep.

Why do I need this?

There are two answers to this question: The first one is that for some reason different browsers interpret CSS differently so unless you really know what you are doing, chances are the sites you build end up looking slightly different depending on whether the visitor uses Internet Explorer 5, 6, 7 or 8, FireFox, Opera, Safari or any number of other browsers. There is no good reason for this other than that in spite of many years of work, the “standards” that govern CSS and other web code are so vague and flexible that there is no joint agreement on exact interpretation. It’s worth noting that Internet Explorer has always been the big culprit here and that with the release of IE 8, Microsoft is finally joining the fold and matching the rest of the world. But I digress. What Eric Meyer and other CSS gurus have been telling anyone willing to listen is that with some strategic coding, you can still make the all browsers act the same way. But this requires work. CSS Sculptor sets out to do the brunt of this work for you.

The second answer is that even though Expression Web has many CSS templates, they are mostly empty and they require you to insert all the little pieces that make the code compliant. And that’s a lot of hard work on your part.

To give you an idea of exactly what CSS Sculptor does that EW doesnt, I’ve built two examples. They are both out-of-the-box layouts with standard text inserted. They were both created with about 5 mouse clicks and I only made minor adjustments to get this demo up and running – specifically I separated the CSS from the CSS Sculptor project and put it in a separate file and I inserted the dummy text from the CSS Scupltor project in the EW project to have some filler. Both these pages were made using Expression Web 2 Beta and they have no alterations of any kind from me. You can see the Expression Web example here and it’s CSS code here. The CSS Sculptor example is here with it’s CSS code here.

Anyone can see that the two examples are miles apart in both layout and functionality and you’ll also notice that the CSS part of the generated pages are hugely different. And while none of the pages will apper exactly the same across all browsers (mostly due to lack of defined elements like a background colour), the CSS Sculptor page is by and large fully working while the Expression Web page is unuseable garbage (notice where the footer is located).

OK. So what exactly does it do?

As is obvious from the examples above, CSS Sculptor spits out a lot more code than the native CSS generator in Expression Web. The code generated by CSS Sculptor also contains parts of Eric Meyer’s CSS Reset code which goes a long way in ensuring browser interoperability. In addition, the program gives you a ton of plug-and-play options like menu bars, colour schemes and so on to get you started quickly and easily. To top it off, it even inserts both dummy text and plenty of commented out instructions and explanations to make it easier to understand exactly what’s going on. To an avid coder this might seem excessive or even unnecessary, but to a designer who dabbles in code it will be a life saver.

So should I buy CSS Sculptor or not?

Whether this application is for you depends on what you do and how you do it. Like I said before, if you know what you’re doing and you usually type out your CSS in Visual Studio for a perfect result with no testing, you’re not likely going to use this app even if you should. If on the other hand you are constantly creating new CSS layouts and you find yourself sifting through the web again and again to figure out why your margins keep shifting or why your header is hiding under the main body, this is a good tool to get your on your way.

I’m not saying that CSS Scupltor will generate all the code for you or even solve all your problems. What it does is start you off on the right foot, with proper high-end runners and a good night’s sleep. That way you spend less time fiddling with the framework which means you have more time to tackle the intricate details. And time saved means more time for the important stuff.

Personally I can see a hundred uses for this application and I’m not going to think twice about shelling out the dough to get it. Eric Meyer’s CSS Sculptor for Expression Web will sell for $99.99, retail but for the first couple of weeks after it is released, WebAssist will be offering a discount on it. For my purpose, the many colour schemes and other nifty editing options included are superfluous, but that’s because I like to see what I’m doing when I’m doing it and I tend to change my mind a lot during the designing process. Even so, having a quick and easy way to get the framework up and running properly means a lot less wasted time and increased productivity, and for that alone it’s worth it.

Eric Meyer’s CSS Sculptor for Expression Web is a simple one-click install that snaps into Expression Web automatically and requires no work on your part. Once installed, it shows up on in the program and works flawlessly. And although it doesn’t build stunning websites for you all by itself, it gives you a solid foundation to start from.