Categories
Expression Web News

Introducing Expression Studio 4 Web Professional

As I’m packing up for a rush trip to Norway to see my dad defending his doctor’s dissertation the Microsoft Expression team is hard at work in New York City presenting the new version of my favourite web development application Expression Web 4. Now packaged as Expression Studio 4 Web Professional and bundled with Expression Design and Expression Encoder version 4 is a programmatical improvement on the already hugely successful Expression Web 3 that introduces some new and nifty features that will make your web development process even simpler.

New in Expression Web 4

There is a long list of new features in Expression Web 4 but here I’m only going to mention three – because they are the most important ones.

In-app SEO reporting

Like the name suggests Expression Web 4 provides a full SEO report for selected pages or the entire site. Gone are the days of trying to remember all the SEO rules or using 3rd party apps to make sure your site gets listed on Google and Bing. With the click of a button Expression Web 4 will give you a list of everything you forgot to add to your site, like a title tag, proper description, keywords or broken links. But more interestingly it also gives you tips, in the form of warnings, that are not so obvious. During beta testing I ran the SEO reports on some of my existing sites and got feedback like “title is too general” and “description is too general”. This might seem like weird error reporting but it’s actually vitally important if you want your site to be noticed in the search environment: To be noticed your pages need proper titles that tell the visitor what’s on them. And the descriptions have to be specific enough to stand out. There are tons of other such warnings that, if heeded, will not only increase your SEO but will also teach you to write your code in an SEO friendly way the first time around. Which is exactly why I like Expression Web so much – it teaches you through its use to do things the right way.

More SuperPreview

I’ve raved about SuperPreview – the in-app or stand-alone cross-browser compatability tester that was introduced with Expression Web 3 – before. With Expression Web 4 SuperPreview has been enhanced and improved to include more browsers (IE 6, IE 7, IE 8 Compatibility Mode, IE 8 etc), more file inputs and most importantly an online component that lets you test your pages against the Mac version of Safari. It’s the same application with onion skinning, active areas, DOM view and all that great stuff, only improved for broader functionality.

I’ve said it before and I’ll say it again: SuperPreview by itself is reason enough to buy Expression Web.

Publish Current Page

For people like me who tend to work on multiple disjointed pages and do live updates to sites all the time the process of saving a page, going to the publishing panel and then uploading the pages to the external server is extremely cumbersome. The obvious solution to this problem would be to have a button or function that lets you publish the current or all open pages to the server right away. I requested this feature at some point in the pre-beta process of Expression Web 4 and I’m happy to say it’s now included in the app making publishing of your latest and greatest errors updates a one-click process. It may seem like a small and insignifficant upgrade but it really isn’t: After working with an early beta and going back to Expression Web 3 I kept swearing at my computer because I couldn’t just push my files straight to the server but had to go through the publishing panel. That quick one-click or shortcut process is a huge timesaver and a hugely important addition to an already excellent application.

If you have version 3, version 4 is a free upgrade

Yes, that’s right: If you already purchased Expression Web 3 or Expression Studio 3, Expression Studio 4 is a free upgrade. That means you get all the cool new stuff at no cost. Very cool.

More to come

I’m hard at work writing tutorials and other stuff (TBA) about Expression Web 4 so stay tuned to this blog for all the updates and other useful tips!

Further reading

I’ll try to compile a list of all the news on this exciting new app as they get in. If you have a link, dump it in the comments below and I’ll post it:

Microsoft Press Release
Official Microsoft Expression site
Paul Laberge’s post
Tim Heuer
Yahoo! News

Categories
News

PinkAndYellow.com resurfaces with a new design

About a year ago I decided that our company website PinkAndYellow.com was way past due for an upgrade. At that time we had not posted anything on it for more than 2 years and the work presented on the site as well as the design in no way represented the kind of work we do today. Unfortunately we were way too busy to actually get around to redesigning the site so the work took a lot longer than expected. In January I decided this could no longer do and I redirected the domain to Design Is Philosophy temporarily while we put in some extra hours to get the new site up and running again. And I’m happy to announce the investment paid off. As of 5pm yesterday the new and improved PinkAndYellow.com is up and running featuring not only one of our more interesting renditions of a WordPress theme but also a full list of our most recent WordPress client projects, services offered, customer testimonials and other goodies. In time we’ll fill the site with all our projects and since it’s now running WordPress it’ll be easy to keep the site up to date.

In conjunction with the launch of the new site we’ve also launched a Facebook page on which we’ll post updates on our work and keep our fans informed about what’s happening and what we’re working on. The combination of the new site, Design is Philosophy and the Facebook page will also be a great marketing tool for our many customers as we will be featuring each and every one of them on all platforms. And as always you can continue receiving Morten’s rants and raves by following him on Twitter @Mor10.

The site is done, the Facebook page is up, Pink & Yellow Media is open for business!

Categories
News WordPress as CMS

Frugalbits.com – WordPress as a Magazine CMS

Last year I was contacted by two veterans of the publishing business with an idea for a new online magazine called “Frugalbits“. It would be a daily publication in which readers would find deals and ideas on how to be more frugal – a virtue I think we all wish we had more of. They were looking for a highly customizeable web solution for the site and had realized that the answer might be WordPress. Smart ladies.

Several months and many hours of nit picking code later and Frugalbits is now finally live to the world. It’s a labour of love for me as well as the crew behind the site and it is a project I am exceedingly proud to have been a part of. So, without further ado, let me walk you through some of the interesting elements of the site:

A Carousel of Stories

Early on in the process the request came in to have a featured story carousel at the top of the front page. Unlike many other such sites the Frugalbits team didn’t want to have multiple text stories on the front page but requested instead one main story, named The Daily Deal, to be featured and then have a carousel with the latest 8 stories displayed at the top. Over the years I’ve worked with many different featured story plugins and carousels and as with pretty much every other plugin I come into contact with I’ve hated them all. For this one I decided I’d go out and find something that could be customized down to the last pixel and that ran independently of the whole WordPress plugin regime. And after a lot of searching I finally found a JavaScript based carousel I could take apart and put together exactly the way I wanted it.

The carousel requested would feature 8 stories (4 and 4) and would have a square story picture, a tagline on a translucent banner and the story title itself. In addition the coloured banner the story title would go on should change depending on the category the story belonged to. This meant I needed to create a loop in which 4 fields were queried for each story: thumbnail, tagline, category and title. It quickly became apparent that apart from the title the rest of the fields had to be customized for each story. To solve this I created 3 custom fields; thumbnail, cat and tagline, and the story editor filled out each of these taglines with the appropriate content. It worked quite well and I was satisfied that this solution would work

But. After a beta launch one of the editors brought up a point I never considered: The first entry of the carousel would always be the same as the story on the front page. And since the front page only had one story this was to put it midly somewhat redundant. Fortunately WordPress has an answer for this type of situation: offset.


An explanation: The carousel is populated using the standard query_posts() function. By using the offset variable in conjuction with posts_per_page I can define how many posts the query should “skip” before starting the list. And since I just wanted to skip the first (front page) post, that value should be 1. Problem solved.

Adding an Author Box

Because Frugalbits is a magazine it has both “normal” articles and also columns written by a select group of columnists. The request was that for these columns there be a box at the top right under the title with a photo, name and a short bio for that columnist. WordPress doesn’t have a standard function to add such an author box and though there are plugins that do it they are clunky, full of garbage code and not easy to style. I chose to go hard core on this one and just write it right into the single template using a conditional custom field. The result was the nice chunk of code below which produces a nice CSS styled box with the author Gravatar, category name, author name and WordPress user bio when activated with a custom field with the name “author” and the value “true”:

ID, 'author', true))) { ?>
	

is by

Custom templates

One of the most important features of the Frugalbits site is actually something you hardly notice: The custom templates. Depending on where you are in the site the layout changes subtly. The front page features the carousel, the single post pages have the optional author box, the category pages have only the right sidebar and show thumbnails for each story and the legal pages have an entirely different sidebar from the rest. To top it off the F Spot category has an entirely separate tempalte that looks nothing like the other ones. All this is done by using conditional statements and creating custom theme files for individual pages and categories.

Now that it’s launched I’m looking forward to hearing what people have to say about Frugalbits and it’s functions. Feel free to leave your questions and comments below and please visit the site and learn how to be frugal yourself!

Categories
News twitter

This you??? Anatomy of a Twitter Phishing Attack

Over the last couple of days I’ve gotten at least 10 Direct Messages from Twitter friends – most of which are pretty well versed in modern web technologies and even one that calls herself a “social media expert”. The messages are all the same, the text “This you???” followed by a shortened link. The link takes you to a web page that looks a lot like the Twitter.com login page but when you log in your password is stored and passed on to evil people with eviler intentions yet to be unveiled.

Targeting (and hooking in) the pros

Twitter phishing attacks are nothing new but this one is a bit different – and all the more disturbing for it: It targets and manages to hook in Twitter power users more than any other exploit before it. This is done by taking advantage of the fact that most heavy Twitter users don’t actually use the regular Twitter.com page but rather a Twitter manager like TweetDeck or HootSuite. And whereas a person just using Twitter.com would immediately know something was up when they were redirected to the login page even though they were already logged in, a TweetDeck or HootSuite user would probably not be logged in and could potentially enter their information in a momentary lapse of reason.

Unknown agenda

Another thing that is disturbing about this particular attack is that unlike most other attacks which immediately start spamming people with badly disguised ads for teeth whitening, weight loss or other affilliate marketing junk, this one – at least for no – is only out to perpetuate itself sending out the same message over and over. This means there is probably some larger plan in progress, and so far we don’t know what that plan is.

Even more disturbing a lot of people use the same password for many things including their social media networks like Twitter, Facebook, YouTube, MySpace and whatever other timewaster fits their fancy. That means if someone gets a hold of their Twitter password they are likely to also have access to their other accounts, not to mention Gmail or Hotmail accounts!

How to aviod being phished (and what to do if you are a victim)

Twitter.com’s help has a comprehensive breakdown of how to reset your password, sever connections and get your account back if you are the victim of a phishing attack or your account has been hacked. If you think your account has been compromised it is paramount that you follow these steps immediately to protect your online identity. That link again is here.

Here are a few simple steps to avoid becoming a victim of a Twitter hijacking:

  • Have a complicated password. If you can’t think of one, here are a few ideas: Do like Mulder from The X-Files and swap out words with numbers. His password was “trustno1” where the word “one” was exchanged for the number 1. Do like my friend Craig and show your support for a sports team. He’s a big fan of the Vancouver Canucks and hates the Toronto Maple Leafs. His password is “canucks>leafs” i.e. Canucks bigger than Leafs.
  • Change your password regularly. By “regularly” I mean every 6 months or so.
  • If anything unusual happens, change your password immediately.
  • Don’t use the same password for everything. That may sound like a lot of work but I use an algorithm based on the site name that changes the first and last character of my password so it’s not that hard.
  • Don’t give your password away.
  • Check the URL in the address bar before you enter your password. If it doesn’t say Twitter.com but something else, it’s not Twitter.com.
Categories
News services WordPress as CMS

Design Schooled Kids – Pushing WordPress to the edge

dsk1A couple of months ago I got a tweet from Tracy Sullivan of Design Schooled Kids about creating a web site for her line of stationery for kids. It was an interesting project both because of the products themselves – stationery that teaches kids to read and write – and because it posed some unique challenges where design and development was concerned.

Well, actually the design portion was already handled by Tracy herself. The challenge in that regard lay in taking Tracy’s clean and exact designs and making them appear on the web as they did on paper. As for development the main challenge was that although this was to be an online store she wanted it to look nothing like an online store. So basically the project consisted of taking a new site concept from a paper mock-up to a fully working website. Exactly the kind of stuff I like to do.

Taking WordPress right to the edge

dsk3The result of a lot of hard work is a website that in my view takes WordPress right to the edge of what it is capable of. Every element of the site is custom built from my basic WaveFront theme to create a look, feel and operation that in no way resembles or even hints at WordPress or a regular e-commerce CMS. That said there is no real reason why any site, WordPress blog or otherwise, should look a certain way. A CMS is after all just a HTML generator that spits out whatever you want it to, and once you have the HTML you can use CSS to display it any way you want. The true challenge here was centered around getting the e-commerce portion to look, work and feel less like a boxed e-commerce solution and more like something classy and custom even though it was built on top of the WP eCommerce plugin. So while on the back end this is a fairly standard WordPress installation with pages, a blog (upcoming) and an e-commerce component, on the outside it looks like a custom site with all the bells and whistles built from scratch. Which is exactly what both Tracy and I wanted.

Ultra-clean designs pose unique challenges

dsk2Tracy is a designer of my heart: Obsessively detailed and extremely picky. (To be honest I don’t think you can call yourself a designer if you don’t fall into these categories, but that’s just me.) Her designs looked easy enough, but the true challenge lay in matching her static pages created in InDesign to live dynamic pages on the web. With such a rigid frame to work inside all the regular cross-browser problems like padding- and margin widths, positioning, font sizes etc that we normally choose to ignore or just tweak till they fit within acceptible buffer zones were all of a sudden make-it-or-break-it points that had to be done exactly right. The most notable example was that when each page loaded, whatever page content was in the “content” section of the layout had to line up perfectly with the topmost menu item. Sure, that’s easy enough if all the content is the same, but in this case we were working with four fundamentally different types of pages: Plain text pages for general info (home, about etc), dynamic index pages for each product line consisting of a header image plus a series of thumbnails for each product, single product pages with a larger image off the top with product stats and purchase buttons on the right and info underneath and finally shopping cart pages.

dsk4This meant the site demanded entirely separate style codes for the different elements depending on the type of page (or more specifically page template) was being displayed. And all these styles had to be flexible enough to be applied to the same item in different ways depending on the current template. Normally this would be easy enough to solve by using custom page templates, but in this case we were using the WP eCommerce plugin which generated all the product indexes, single product pages and shopping carts. As a result I had to dissect the eCommerce plugin pretty much line by line to find where all these elements were generated and how to go about repositioning them. What I found was a plugin that although it looks amazing on the outside was actually quite messy behind the curtain. I won’t write any further on this topic here – suffice it to say if you want WP eCommerce to do something that’s not just basic implementation you better prepare yourself for hours of decrypting bizarre code layouts and counter intuitive solutions. More on that in a different post.

In the end I created multiple theme files for the theme itself as well as the WP eCommerce plugin that allowed for micromanaged control of all the different pages. Not an easy task, but more than doable given enough time and some good background music.

Overall I’d say DesignSchooledKids.com has been my most challenging project to date, not because of the design or development elements of the baisc site but because the WP eCommerce plugin falls short in way too many places. In the end I made it all work the way it should but that was only because I spent an enormous ammount of time fixing or all together rewriting the code in the plugin so it would behave properly. It’s a bit of a disappointment really but now that I know how all the pieces fit together I should be able to reproduce it in the future.

Visit Design Schooled Kids and check out both what WordPress can do and what Tracy has to offer.

Categories
CSS My Book News WordPress

By Land, Sea or Air – A travel blog based on the MyKipple project

By Land, Sea or AirWe’ve been talking about taking a road trip through the USA for a long time, so when my TV job ended in October we decided now was the time. And in true blogger fashion, a road trip required a dedicated blog just for that and nothing else. This also presented an opportunity for me to show people how far you can push the MyKipple.com design I created for my new book Sams Teach Yourself Micrsoft Expression Web 3 in 24 Hours.

The result was ByLandSeaOrAir.com – a WordPress based site with a theme that utilizes all the tips and techniques showcased in the book. Fact is if you go in and lift out all the code and graphics from the new site you’ll see that it matches the final project in the book almost line by line.

So the site serves two purposes: To tell the world of our travels and to show that there really is no limit to what you can do once you understand the principles behind HTML and CSS. Enjoy.

Categories
Expression Web News

The Big Expression Web 3 Giveaway – Winners Announced

Expression Web 3 Giveaway

UPDATE: WINNERS ANNOUNCED!

The draw for the Expression Web 3 giveaway were performed this evening by @AnnyChih and @dabblerDOTca. Congratulations to @paladyn as the grand prize winner. The two runners up are @tommyflynn and @mxj1009. A big thanks to the 80-some Tweeters who participated in the contest.

To celebrate the release of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours Design Is Philosophy is holding a contest with some excellent prizes:

1st prize:

2nd and 3rd prize:

The winners will be selected by random draw of the twitter accounts that have tweeted the above comment and will take place on Wednesday October 7th at which point I will contact the winners. You’ll have 2 days to get your contact info back to me so check back here and keep an eye on your inbox on Wednesday to ensure that you get the prize if you win.

How to enter

Putting your name in to win the big prize is incredibly simple:

  1. Follow me on Twitter
  2. Tweet the following message:

Win an Expression Web 3 package incl software, Teach Yourself xWeb 3 book + Tshirt from @mor10. Details here: http://bit.ly/VEG6R

If you’re not already on Twitter it is easy to join: Just go to Twitter.com, enter your credentials and start tweeting. Twitter is an excellent social networking tool where you can find and connect with people from all walks of life including other Expression Web users and experts. Chances are if you have a problem, suggestion, question or concern you’ll find someone on Twitter who has an answer or a tip to get you on your way. While you’re there make sure to follow these other Expression Web tweeters: @MSExpression, @expressionweb, @tinaclarke, @patgeary, @XStudio, @cdwise.

Categories
My Opinion News

A Code of Ethics for Bloggers and Social Media

As an Online Content Creator – whether it be as a blogger, a video blogger, a podcaster, a microblogger or a general social media participant – you are an important part of the wider public knowledge creation and discussion. This role carries with it a responsibility to be fair, honest and respectful not only toward your fellow members of society but also toward fact. The content you create today will more than likely outlast both the content’s relevance and your own lifetime and it is of vital importance that it be a truthful representation of the topic at hand not only for those who access it today but for those who access it in the distant future. Above all else your job as a Content Creator is to present fact as fact and opinion as opinion. To this end I have created a Blogger and Content Creator’s Code of Ethics that outlines the ethical guidelines any and all Content Creators should go by when publishing material of any sort for public consumption. The Blogger and Content Creator’s Code of Ethics is closely based on the Code of Ethics for the Norwegian Press published by the Norwegian Press Association and adhered to by all members of the Norwegian press.

This is a work in progress. Please submit your comments, questions, suggestions and edits in the comments below and I will apply them as time allows.

For the full version of the Code of Ethics please visit the page dedicated to this topic found here.

Short Version

1. It is your right to voice your opinion. Freedom of Speech, Information, Publication and Expression are basic elements of a democracy. As a Content Creator it is your obligation to use and protect these rights at all times.

2. Be critical of everything, even your self. As a Content Creator you are part of the creation of free knowledge creation and discussion. It is your obligation to shed critical light on what goes on in society as well as how Content Creators, including your self, are presenting these events.

3. Use your power to protect. As a Content Creator you can shine a light on injustices and neglect perpetrated on individuals and groups. Use this power wisely.

4. Tell the truth at all times. With great power comes great responsibility. Words and images are powerful weapons that should be used with the utmost care. When publishing content, present the facts as they are, even if you disagree with them.

5. Present your opinion as your opinion. Your opinion and interpretation of events is important and should be shared but must never be confused with hard facts or data. When voicing your own or someone else’s opinion or interpretation, always state it as such. Never present opinion, interpretation or conjecture as fact.

6. State your allegiances to stay independent. To preserve your own trustworthiness and integrity as a Content Creator, always state any relation, financial, personal, political or otherwise, to the subject or topic you are presenting. Bias, even if it is only perceived as such, immediately discredits your account unless you warn of it first. In simple terms; if you have a political affiliation that colours your judgment, say so; if you are employed by or received money from the subject you are covering, say so; if you were given gifts or preferential treatment in return for a positive review or commentary, say so. By stating these facts of allegiance your opinions gain informational value that would otherwise be lost in suspicion of bias.

7. Reveal your sources unless doing so can harm your sources. Always reveal your sources to ensure transparency unless doing so may put the source in harms way. In ensuring transparency you lend credibility to your own content as well as provide others to further pursue the facts of the matter.

8. Be critical of your sources and seek independent verification. Even if you are ethical and unbiased there is no guarantee your sources are. Before presenting information as fact, always check your source’s credibility and seek independent verification of these facts. If none can be found, state so clearly.

9. Always give credit where credit is due. Give proper attribution when using, quoting or basing your content on the work of others. In other words present quotes as quotes, link to original articles, give photo and illustration credit to the original creator etc.

10. Always preserve the intended meaning of a given statement. When quoting or paraphrasing a statement always ensure that the intended meaning is communicated. Never edit or change a statement in such a way that the intended meaning is changed.

11. Give your opponent a chance to respond. The very foundation of an open discussion is to give either side an opportunity to voice their opinion. Always provide an opportunity for your opponent to present the case of the opposing side.

12. Admit and correct your mistakes immediately. When an inaccuracy or error in your content is discovered by you or someone else, correct it immediately and announce that you have done so to ensure that those who base their opinions and other content creation on the incorrect information have a chance to make corrections as well. It is your duty to uphold the truth and present fact even if that means admitting you were wrong.

Categories
Browsers News

YouTube joins the movement to phase out Internet Explorer 6

YouTube IE6 warning

One of the cool things about SuperPreview (the browser testing application that comes packaged with the new Microsoft Expression Web 3) is that it lets you check any site against older browsers. So when I have a couple of minutes to spare I test out well known sites to see if they comply with web standards and if they still support Internet Explorer 6.

Big was my surprise this morning when I ran YouTube in IE6 mode: At the top of the page they’ve now added a big blue box warning visitors using Internet Explorer 6:

We will be phasing out support for your browser soon. Please upgrade to one of these more modern browsers.

The warning is followed with direct links to download Firefox 3.5, Internet Explorer 8 and (of course) Google Chrome. (On a related note, as a designer you should have all these browsers installed as well as Opera and Safari.)

I’m glad to see that big American players are now getting on board with the movement to phase out Internet Explorer 6 which so far has had most of its success in Europe. And with the support of a player as big as YouTube I can see a time in the not-t00-distant future when we can stop caring about IE6 and get on with our lives.

Categories
Expression Web Microsoft Expression My Book News

This is Expression Web 3

Expression Web3

Expression Web 3 is now available for trial download directly from Microsoft. Click here to join in on the fun!

It’s no secret that I’ve been playing around with various pre-beta and beta versions of version three of Microsoft Expression Web for the last few months, all in preparation for the release of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours which is available for pre-order from Amazon.com right now (even though it’s not finished yet!) So for all this time I’ve had to keep my mouth shut about my new toy and what it can do. Well, no more. I just got the all clear from the development team to talk about the application publicly and share some screenshots of what you can expect when it goes public in the next couple of months.

So, without further ado, here is a quick rundown of the new features, the new appearance and my innitial thoughts on the new member of the Expression Web family.

New Flat-tastic User Interface

The first thing you’ll notice (apart from the new logo in the splash page of course) when opening Expression Web 3 is the new UI skin. The application looks very different from its two prior iterations in that the team has moved away from the classic fake 3D/embossed look to a 2D/3D inspired look with flat surfaces and drop-shadows. The interface is also a lot darker than the prior ones with a dark gray being the predominant colour. The new look makes me think of new media applications like TweetDeck and DestroyTwitter and there is little doubt in my mind that much of the inspiration was taken from what I want to refer to as the post-web2.0 look.

As you can see in the graphic at the top of this article the new look is very clean and sharp and makes icons, toolbars and panels pop out. This dark flat-tastic look has already been used in Expression Design and Expression Blend and I think it is a welcome change that not only links Expression Web to it’s application siblings. It also visually separates the new application from those of the past and signals a new beginning of sorts. Not to mention that to me at least it is much easier on the eye (I tend to do a lot of design work in the dark).

AutoHide Panels

AutoHide PanelsOne of the things that really irks me with design applications in general is all these toolbars and task panes that take up valuable screen space. To curb my frustrations I prefer to work on a dual-monitor setup where I can stash all the tools and task panes on one monitor and leave the application on the other. But this doesn’t work when I’m on my laptop (which is where I’m at most of the time these days). And in Expression Web 1 and 2 even with a widescreen monitor the task panes ate up a lot of real estate. As a result I kept turning the task panes on and off all the time – a process that was a real time waster. In response to complaints and suggestions to do something about the task panes, the dev team introduced a simple AutoHide feature that lets you collapse the panels (they’re not called “task panes” anymore) to the sides from where you can open them by hovering over their names. In practical terms that means you can leave all your favourite panels on the workspace without having them take up tons of room in the process.

The AutoHide feature is easily toggled on and off with a pin logo (seen in the upper right-hand corner of the grab to the right). When the pin is lying sideways as in the grab, the panel is pinned to the wall (AutoHide on). When it’s in the upright position, the panel is a permanent part of the workspace. It’s a simple feature but it makes a world of difference, especially because you can pin individual and rarely used panels to the sides for easy access if you were to need them.

New and improved publishing options

It’s no secret that the publishing options, and especially the FTP publishing option, in Expression Web 1 and 2 were less than stellar. It was so bad in fact that I urged the readers of my book to not use them. Well, without breaking any deals with my publisher I can tell you that my recommendation in the new book is quite different. Not only has the troll that was messing with the FTP been slaughtered but two all new publishing methods have been added to the list providing more secure transfers and options. The list of publishing options now features SFTP (Secure Shell File Transfer Protocol), FTPS/SSL (File Transfer Protocol over Secure Socket Layer) as well as the original FTP, FrontPage Server Extensions, WebDAV and File System.
publishingBut that’s not all. Expression Web 3’s publishing option has been rebuilt from scratch and features a whole new range of functions including the ability to define multiple publishing locations for one site so you can push your files to a backup storage as well as publish them online, or publish them to multiple servers, or set up a testing server and a main server within the same project. This again is a seeminly minor but actual major improvement that makes life a lot easier for people like myself who do a lot of server testing and cross-publishing.

In-application Browser Previews with Snapshot

Expression Web 3 Snapshot panelIn addition to alterations and improvements to the old versions of the application, Expression Web 3 introduces some new features that are going to make your life as a designer/developer a hell of a lot easier. They are connected at the hip but I’d rather deal with them independently. The first one is the Snapshot panel. Like the name suggests, Snapshot takes a real-time browser shot of your current page and displays it in a panel inside your workspace. This means you now have a quick and easy way to see what your recent changes will look like in different browsers, including Internet Explorer 6 and 7 and Firefox, without having to actually run the page in a real browser.

Snapshot’s output is just that – a snapshot – and does not provide functional links and the like. But it does generate JavaScript, CSS, HTML, PHP and whatever else you want to throw at it and gives you a true representation of what your page looks like in the different browsers.Like the other panels you can undock the Snapshot panel and place it somewhere else, for instance on your second monitor.

SuperPreview – Browser Testing Made SuperSimple

Expression Web SuperPreviewI’ve written about SuperPreview before both here on DesignIsPhilosophy.com and in the official Microsoft Expression Newsletter but it can’t be repeated enough: Expression Web SuperPreview could one of the most important innovations in web development of the last several years. SuperPreview is the powerful big brother of Snapshot – a stand-alone application that lets you perform cross-browser testing that lets you compare true output from multiple different browsers with onion skinning and side-by-side preview. To identify incompatibilities, problems and even tiny shifts the application also features simultaneous box highlighting of individual elements and even provides full FireBug-like DOM trees to give you as much info as possible about what’s going on when things go wrong.

I’m not going to go into too much detail here – the application will be better served with a tutorial video that shows how it actually works in real-time – but I will say one thing: Even if I was still a DreamWeaver user, I would buy Expression Web 3 just to get the full version of SuperPreview. And that says a lot cuz’ I’m a cheap guy. With alligator arms.

For more info on Expression Web 3 microsoft just published Expression Web 3: An Overview on the official Microsoft Expression website.

For another take on the new version check out fellow Microsoft MVP Cheryl D. Wise’s blog.

Categories
Expression Web News

Just announced: Speaking at Make Web Not War 09 in Vancouver

Make Web Not WarJust announced (though it’s not on the site yet) I’ll be speaking at the Make Web Not War 09 conference in Vancouver on June 2nd. The topic of my session will (not surprisingly) be how to harnes the power of WordPress through the use of Expression Web 2. It’s a 1 hour session and right now I’m working in overdrive to create compelling, provoking and replicatable examples for those attending.

As per usual nothing of my session will be set in stone until a couple of minutes before the session starts (because I’m just that organized) so if you’re attending and you have a request or a suggestion or a question that you’d like me to talk about, drop a line in the comments of this post or send me an email and I’ll take it under consideration.

I was going to bring some of my new and insanely cool limited edition shirts to the event but sadly the printer decided they need two full weeks to do the job so they won’t be ready in time. Instead I might be bringing some other cool nicknacks to remember me by. And who knows, it might be something you actually want!

Categories
Expression Web News

Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips

Microsoft Expression Web SuperPreview BetaAbout a year ago I got an email from my friend Anna Ullrich from the Microsoft Expression team. She wanted to know if I’d be interested in providing some feedback on a new, exciting and super secret application they were developing for the next release of Expression Web. Being obsessively curious I couldn’t turn that offer down and a few weeks later Anna and Boris Feldman drove up from Redmond to meet me at the Microsoft office in downtown Vancouver.

What they presented to me – after the signing of numerous Non-Disclosure Agreements – was a pile of sketches of a future browser preview application with the working title “SuperPreview”. The premise was simple: During the authoring of a website the developer or designer can test the current output and get feedback in the form of warnings, graphic overlays and onion skinning showing how the page will appear and change depending on what browser is being used.

Now browser previews is not a new idea by any means – there are tons of free and paid online services that do the job and most if not all web design applications offer multi-browser previews – but all the existing services operate on a browser-by-browser basis. What was novel about SuperPreview was the idea of viewing all the browser outputs simultaneously and on top of each other so you can really see what the difference is.

As a designer/developer cross browser testing is a daily routine that often leads to my computer getting some multi-lingual verbal abuse. Because even with perfect, standards based and properly validating code there is no guarantee the site you design will look the same across all browsers and all platforms. What makes cross-browser testing truly tedious is that for every page you have to open multiple browsers and look a them individually. And if you want to find minute positional shifts or other differences you often have to flip back and forth between browsers or use screen grabs or worse (I sometimes use whiteboard marker on my screen!). Any application that simplifies this process would be a huge help.

So for two hours Anna and Boris listened to my rambling feedback and lofty suggestions and at the end we parted ways, they with a pile of notes, me with a deep and profound desire to build a time machine so I wouldn’t have to wait for the damn thing to be developed.

And today, finally, the wait is over. In conjunction with the MIX09 conference in Las Vegas Microsoft Expression Web SuperPreview is now available for download in public beta.