Aug 06
Breaking the silence: What I’ve been doing over the summer
If you follow this site and my Tweets you will surely have noticed my relative silence over the summer. Well, there is a reason… more precicely 3 reasons. I’ve been colossally busy dealing with three major projects that as of now are either nearing completion or at a point where I can start focusing on other stuff (like long neglected clients) again. So, to stave off the criticism for my falling off the face of the internet here’s a taste of what I’ve been working on:
Sams Teach Yourself Microsoft Expression 4 in 24 Hours
Earlier this summer Microsoft released version 4 of Expression Studio. The new version brough major upgrades to Expression Web and as a result my hugely popular book Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours
The new book, scheduled to be released end of October
Expression Studio 4 and Expression Web 4 comes as a free upgrade if you already own version 3. That means if you have version 3 you should upgrade right away. And if you alredy have my version 3 book you should get the new version once it comes out. I’m not saying this because I want to sell more books but because there are some new features in there that are important to understand and get the full use out of.
Microsoft Expression Web 4 LiveLessons (Video Training)
In addition to the book I’ve also created a colossal 27 lesson video series clocking in at around 5 hourscalled Microsoft Expression Web 4 LiveLessons (Video Training) for those of you who either don’t want to read a book or who want more hands-on training using Expression Web. The LiveLessons series features an entirely new example project based on the 12×12 Vancouver Photo Marathon website and provides a best-practice model for how to create professional, rock solid and stylish websites using standards-based HTML and CSS. The LiveLessons series is complementary to the Sams book so there are things that are covered in the videos that are not covered in the book and vice versa. Thus even though you’ll get a lot out of each item alone you’ll get a much better and more in-depth understanding by getting them both. Again, this is not a sales pitch – I’m being honest here. The combo really is the better deal.
The video series will be available on DVD early October and I believe it will also be available for download or online viewing on InformIT’s website (tba).
12×12 Vancouver Photo Marathon 2010
Because I don’t already have way too much on my plate I decided to start a huge photography event/contest last year called the 12×12 Vancouver Photo Marathon. In a nutshell it’s a contest where 60 photographers show up on a set date, pick up a 12 exposure 35mm film and then at the top of every hour for 12 hours are given one theme to interpret in one photo. At the end of 12 hours the films are returned, developed, judged and finally put up in a huge exhibit. In the end we end up with 720 photos divided into 60 sequences of 12 consecutive themes. The 2009 event was a massive success with over 300 people showing up for the gallery exhibit and we expect this year’s event to get even bigger.
In the runup to the even (and to kill two birds with one stone) I developed a new site for the marathon and used this site as the demo project for the Expression Web 4 LiveLessons series. As a result the site features some pretty fancy elements like a transparent CSS-only drop-down menu with multiple in-button styles, CSS3 drop-shadows and rounded corners and tons of other fancy schmancy style elements.
The 2010 12×12 Vancouver Photo Marathon takes place on Sunday September 12 from 8am to 8pm in downtown Vancouver with a home base at Blenz Coffee in Yaletown. Tickets for participation (60 in all) are $24 per person and cover all expenses. Tickets go for sale Thursday, August 12 at 8pm and are expected to sell out fast. The following art exhibit will be held at Vancouver Photo Workshops on the 16th of October.
Jun 07
Introducing Expression Studio 4 Web Professional
.png "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
Apr 23
Build a fancy author or profile box with Expression Web
A profile box is a great way of quikcly giving your visitors information about a person featured on your site. These boxes normally feature a quote or short biography followed by the person’s name, affiliation and maybe a photo and usually are just straight up blockquotes or something similar. In other words they are a bit boring. But there really is no reason why they should be: Text and images on the web can pretty much be displayed in any layout you want. All you need is the creativity to come up with a better way of displaying it and either the knowledge of CSS and HTML to get it done or a tool to help you along the way.
In this tutorial I’ll show you how to build the fancy profile box pictured above and featured on the testimonial page on the Pink & Yellow Media website using Expression Web. If you don’t use Expression Web you can still follow along and use the code so don’t worry. Click here to see a working demo (opens in new tab or window).
Start with a design
The image above is actually the real Photoshop mockup I did for the project (if you look closely you’ll see that Tracy’s photo is blurry because I kept scaling it up and down to get the size right). I mock up all my projects, even if they are just small ones like this, in either Photoshop or Expression Design to have a quick way of altering the layout and design until I find something I like.
The completed design also serves another equally important purpose: With the layout done it’s easier to map out how the HTML and CSS needs to be organized to get the dynamic web content to match the static image. In it’s most basic form HTML works by wrapping content in boxes and CSS styles those boxes. Therefore mapping out what boxes are needed right on the design like below makes it a lot easier to figure out the next several steps.
Building the HTML markup
The boxed out image above gives us a clear indication of how the markup needs to be organized:
- There’s a box that contains everything that has a grey border
- The quote itself has to be contained within it’s own box
- The profile info (name, affiliation, image) needs to be wrapped in its own box
- The name is separate from the affiliation and needs its own box
- The image needs to float on top of other content, namely the blue background banner
From this we can start building the markup. I usually start working with actual content right away but I’ve been told most people get confused by this method so I’m going to recommend building the HTML framework first and then inputting the content. The next steps take place in Code view.
As step zero create a container to simulate the width of your website. This is just to make sure that the box expands and contracts properly when it’s done. To do this go into Code view and create a new line directly under the <body> tag. Type <div id=”container”> and Expression Web creates the end </div> tag for you. Hit Return several times to create space between the beginning and end tag.
A smart tip: To keep track of what tag closes what div insert a comment after each of the closing divs expalining what that is, for example </div> <!– END #container –>
Create a new line under the div you just created and create a new div, this time with the class profile like this <div class=”profile”>. This div is the outer wrap for the actual box. Again hit Return several times to make space between the beginning and end tag and identify the end tag with the comment <!– END .profile –>.
Create a box for the profile text by creating a new div inside the profile div with the class profileText.
Underneath the profileText div (not inside it) create a new box to contain the name, image and affiliation. Give this div the class profileStats.
Inside the profileStats div create two new separate divs with the classes profileName and profileJob respectively.
The framework is now complete and should look like the code example below. Notice how I use tab indents to visually show how elements are nested within eachother:
<body> <div id="container"> <div class="profile"> <div class="profileText"> </div> <!-- END .profileText --> <div class="profileStats"> <div class="profileName"> </div> <!-- END .profileName --> <div class="profileJob"> </div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> </div> <!-- END #container --> </body>
Insert the content
With the framework all mapped out it’s time to insert some content. In Expression Web go to Split view. You’ll notice that in the Design view portion there are now three boxes with dotted outlines. Clicking on each of these will show you what box you have selected. At the same time you’ll see where you are in the framework structure in the Code view portion so you always know you are typing out content in the right place. Now you can insert your content in the different boxes. The bio, profile, quote or testimonial goes in the profileText box, the name of the person goes in the profileName box and the affiliation stats (position, company, website etc) goes in the profileJob box.
The image in this tutorial is 88px by 88px. To personalize this tutorial you should make your own image to use.
When it comes to the image it doesn’t really matter exactly where you insert it (you’ll see why later). But for structural purposes it should be within the profileStats box. To insert it place your cursor directly after the opening tag of the profileStats div and hit Return to create a new line. Click Insert on the main menu, select Picture and From File to open the Picture dialog. From here select the image you want to display and click Open. This will insert the image into your code. The image to the right shows the markup in Code view and what the cntent currently looks like in Design view (click for full size version). Below is the markup at this point:
<body> <div id="container"> <div class="profile"> <div class="profileText"> If there was a need for a Word Press Superhero [and there is] Morten would be your guy.<br /> Pink & Yellow Media took on the Design Schooled Kids website project because it would push Word Press to its very limits in both look and functionality. We presented them with a design and it they made it a reality – BIG TIME!<br /> Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText --> <div class="profileStats"> <img src="tracyPic.jpg" /> <div class="profileName"> Tracy Sullivan</div> <!-- END .profileName --> <div class="profileJob"> Principal & Creative Director <br /> <a href="http://www.designschooledkids.com" title="Design Schooled Kids"> Design Schooled Kids</a></div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> </div> <!-- END #container --> </body>
Styling the content
You now have the complete markup for the page. The next step is to create the styles that will make the box look the way you want it to.
Again step zero is to simulate the width of an actual site: On the right hand side of Expression Web you should have a series of panels, probably Toolbox, Apply Stles and Manage Styles. Close Toolbox and Apply Styles (you can always open them again from Panels on the main menu). I do 99% of my work from the Manage Styles panel. In the Manage Styles panel click New Style to open the New Style dialog. For the Selector type #container (the # sign means ID while a punctuation mark means Class). Go to Position and set the width to whatever width you are going to work with. In my case it is 506px. Click OK to apply the style. You should now see that the box is narrower than it was before.
.profile
The .profile class is the outer box that wraps the content. From the image at the top of the article we see it is supposed to have a grey border. If you want to, Expression Web will help you assign selector names to your styles. Click on any of the content in Design view and use the Tag Selector up at the top to highlight the <div.profile> tag. Now click on New Style in the Manage Styles panel and Expression Web will automatically set the Selector name to .profile. All you have to do here is go to Border and set all four sides to solid, 1px and #CCCCCC. Click OK to apply the style and you’ll see the content now has a grey border around it.
.profileText
You may have noticed you didn’t add padding to the .profile box to give the text some breathing space. This is because that padding would have affected the blue bar at the bottom of the box. You’ll see later. To create some breathing space for the profile text and set the font family create a new style with the selector .profileText. Under Box set Padding for all four sides to 10px. Under Font set the font-family to Arial, Helvetica, sans-serif and font-size to o.8em. Click OK and the text will indent and change font family.
.profileStats
The name and position in the design is a serif font and aligned to the right. This can be done in the respective styles for the individual elements or as we do it here in the overall style: Create a new style with the selector .profileStats, set the font-family to Georgia, Times New Roman, Times, serif and font-style to italic. To change the text alignment go to Block and set text-align to right.
.profileStats img
Right now the image appears above the rest of the profile stats. The design calls for it to appear in the bottom right corner. To do this we’re going to use absolute positioning. Create a new style with the selector .profileStats img. This style will only target the image. Go to Position and set Position to absolute, right to 0px and bottom to 0px. The absolute positioning ‘lifts’ the affected content out of the regular stream and positions it based on XY coordinates within the page, in this case 0px from the right and 0px from the bottom so the bottom right corner. But when you click on OK you’ll see that the image places itself in the bottom right coner of the page, not the box. This is because an absolutely positioned element will relate itself to the first containing element that has a position value set to something other than static which is the default value. Since there are no such elements it relates itself to the window itself. To fix this we need to change the Position value of the .profile box. To do this go to the Manage Styles panel, right click the .profile style and select Modify Style from the pop up menu. In the Modify Style dialog go to Position and set position to relative. Click OK and the image now appears in the bottom right hand corner of the box. But now it overpals the name and affiliation text. So that’s what we’ll fix next.
.profileName
To shift the profile name out from under the image create a new style with the selctor name .profileName, go to Box and set padding-right to 98px (88px for the image widht plus 10px for some breathing space). At the same time set padding-bottom to 5px. Under Font set font-size to 1.2em, font-weight to bold and color to #2e4672. Click OK to apply the new style.
.profileJob
This is where that blue stripe in the design comes in. The blue is actually a tiny .gif image tiled to the right and used as a background. Create a new style with the selector .profileJob. Let’s fix the text first: Set font-size to 0.8em, color to #FFFFFF and under Box set padding-right to 98px and padding-top to 5px. To add the blue background go to Background, set background-image to testimonialBlue.gif (image file) and set background-repeat to repeat-x. Finally because the design calls for the blue banner to be 50px tall go to Position and set height to 45px. It’s set to 45 rather than 50 because the padding is added on to the height and you already added 5px earlier. Setting height to 50px would mean the box is actually 55px tall.
.profileJob a
Finally to style the link create a new style with the selector name .profileJob a. Set font-weight to bold, color to #FFFFFF and check none under text-decoration.
Final thoughts
This box is fairly easy to implement in both static and dynamic sites. I have it running under WordPress on our company website though I had to create a special style for the paragraph tag to get that to work properly. The box is stested against all major browsers and works properly. The only divergence is a 1px shift of the image in Internet Exprlorer 6 which I think is acceptable.
Final HTML Markup
<body> <div id="container"> <div class="profile"> <div class="profileText"> If there was a need for a Word Press Superhero [and there is] Morten would be your guy.<br /> Pink & Yellow Media took on the Design Schooled Kids website project because it would push Word Press to its very limits in both look and functionality. We presented them with a design and it they made it a reality – BIG TIME!<br /> Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText --> <div class="profileStats"> <img src="tracyPic.jpg" /> <div class="profileName"> Tracy Sullivan</div> <!-- END .profileName --> <div class="profileJob"> Principal & Creative Director <br /> <a href="http://www.designschooledkids.com" title="Design Schooled Kids"> Design Schooled Kids</a></div> <!-- END .profileJob --> </div> <!-- END .profileStats --> </div> <!-- END .profile --> </div> <!-- END #container --> </body>
Final CSS markup
<style type="text/css"> #container { width: 506px; } .profile { border: 1px solid #CCCCCC; position: relative; } .profileText { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 10px; } .profileStats { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; text-align: right; } .profileStats img { position: absolute; right: 0px; bottom: 0px; } .profileName { padding-bottom: 5px; padding-right: 98px; font-size: 1.2em; font-weight: bold; color: #2e4672; } .profileJob { font-size: 0.8em; padding-right: 98px; padding-top: 5px; background-image: url('testimonialBlue.gif'); background-repeat: repeat-x; height: 45px; color: #FFFFFF; } .profileJob a { color: #FFFFFF; font-weight: bold; text-decoration: none; } </style>
Mar 23
Webcast: An Intimate and Enlightening View into Microsoft Expression Web 3
I’m doing a 1 hour live webcast with Microsoft Canada demonstrating advanced WordPress customization with Expression Web 3 on April 6th, and you are welcome to join. It will be an extended version of my MIX10 session with more demos and more time for questions. All you have to do to participate is register. Full writeup below:
REGISTER
Invitation Code: 0781DA
Tuesday, April 6th, 2010
Start Time: 11:00AM PST (02:00 PM EST)
Webcast Duration: 60 min
Questions about these events?
Call us at 1-888-789-7770
A follow up to Paul Laberge’s “101” webcast, Expression Web MVP and WordPress hacker Morten Rand-Hendriksen takes you through an intimate and enlightening look into his day-to-day work process. He specializes in building solid standards-based websites on the WordPress platform using Microsoft web technologies and Expression Web. The session takes you through real-life examples of customer projects and pulls back the curtain on a work process that employs what Morten jokingly refers to as the “Unholy Quatern” – Microsoft’s Expression Web 3, Web Platform Installer and Mesh combined with the open-source publishing platform WordPress. Combining these four technologies Morten has developed a process in which rapid site debugging, prototyping and implementation becomes a reality.
Learn the inner workings of WordPress and how to use its theme engine to build pretty much any website you can think of using Expression Web 3 and see how using simple web technologies like WPI and Mesh can make your life as a CMS dev/igner much easier.
Jan 06
MIX10 Proposal: I Reject Your Stylesheet and Substitute My Own
Ever since I was invited to attend Microsoft’s web design and development conference MIX in 2008 I’ve been itching to submit my own session proposal and get on the podium to share with other developers and designers my experiences working with Expression Web and WordPress. The plan was to submit a proposal for MIX09 but life and work intervened and made it impossible for me to even attend (truth be told I was going to a wedding in Hawaii the same week so I really shouldn’t complain). But this year March is wide open and I’ve jumped in head first and submitted a talk with the modest title “I Reject Your Stylesheet And Substitute My Own – Rapid site design and prototyping with Expression Web 3 and WordPress” to the OpenCall portion of MIX10. And now I need your help to get my proposal accepted so I can get in and do my thing.
OpenCall is literally a popularity contest: The ten most voted on proposals get a slot at the conference and the rest are left by the wayside. As far as I can tell my proposal is the only one focusing on Expression Web (at least it’s the only one that shows up on a search) and also the only one talking about WordPress so my hope is that both those interested in the web authoring application and those interested in WordPress specifically or open-source or CMS design in general will find it compelling and want to vote for it. Only time will tell.
To vote for I Reject Your Stylesheet and Substitute My Own visit the OpenCall ballot page found here and click the Add session to ballot button. You can vote for a total of 5 sessions with one ballot. The rest of the sessions can be found here. Once you’re done voting, spread the word and get all your friends to vote for me as well. Voting ends on the 15th of January so there’s little time but I am certain with your help my name will appear on the roster alongside the many other fantastic speakers at MIX10.
Oh, and if you’re interested the extremely limited edition I Reject Your Stylesheet and Substitute My Own T-shirts are available in green, blue, tan and black sizes S, M and L (Fruit of the Loom, heavy cotton) for $20. Contact me with your name and mailing address and I’ll wrap one up and send it to you.
