Welcome to the PixelMill Blog. Here we will talk about news, announcements, products, and more from PixelMill.
Starting Tuesday, September 18, 2007
10:00 am - 11:00 am PST
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage. This series will feature the following sessions:
Act Fast! - Only 25 Seats Available!
Toll-free conference call number provided to U.S. and Canada callers. Long distance charges may apply for international calls. Broadband connection recommended. Utilizes GoToMeeting and GoToWebinar solutions from Citrix.
Jason Reckers, CEO
1:30 PM
Are you looking for an attractive way to display your photography on your site?
We've recently released three Flash-based image galleries that will give you an easy-to-deploy, unique solution for displaying your gallery of photography and images within your web site.
The ImageViewerPlus series (Standard, XL, and XL2 with PayPal Integration) are resizeable online image galleries for showcasing and viewing images in a professional and intuitive interface. The gallery is designed for displaying larger images at a maximum width of 650 pixels and a maximum height of 488 pixels. The entire gallery is designed at a resolution of 1024 x 768 pixels (800 x 600 in Standard version).
PSD files are included for changing the main background design or adding additional elements. All configuration is done by editing a user friendly XML file. This would include options for the following: background image, sound file definition, gallery button labels and large image definitions. Gallery navigation buttons are automatically generated from the information contained in the XML file.
They have support for unlimited categories/galleries. Scroll feature is built in for scrolling menu buttons up or down when there are more buttons than the display area allows. Left and right scroll arrows are provided for moving the thumbnails left or right when there are more thumbnails than the display area allows. A larger thumbnail expands out on mouse over. After clicking on a thumbnail, the larger image is displayed along with a description window in the lower right corner that can be opened or closed.
A slide show option is available for each gallery, along with buttons for displaying Next and Previous images. Images are displayed with a very smooth dissolve transition. The master background image can be defined within the XML file and edited with the included PSD file. Includes a sound on/off button. The MP3 file can be defined within the XML file. Two additional message screens are included for displaying additional information. These can be edited within the included FLA file.
HTML and java script files are included for calling ImageViewerPlus XL in a pop up window or full screen viewing. ImageViewerPlus can be viewed from the web or your local computer. Optimized for 1024 x 768 resolution (800x600 in standard version). FLA source files included.
Requires Flash MX (or higher) to edit some design elements, but is not required for out-of-the-box use. ReadMe file for editing the XML file and adding galleries included.
Learn More...
ImageViewerPlus XL - $165
ImageViewerPlus XL2 w/ PayPal Integration - $195
ImageViewerPlus v1.0(standard) - $125
Want a different music track for your image viewer? Visit PixelMill's Royalty Free Music collection.
PixelMill is happy to announce our first in a long series of Webinars and Seminars for Expression Web and SharePoint Designer 2007.
One of the most anticipated features in Expression Web and SharePoint Designer 2007 is the integrated CSS editor use interface. In the session, Corrie Haffly, our resident expert will guide you through managing CSS in these new editors. The title says Expression Web, but the same techniques will also work in SharePoint Designer. Space is limited, so don't miss this opportunity.
Managing CSS in Expression Web
Expression Web comes with great new tools for managing and using CSS. Using Expression Web Beta, Corrie Haffly gives an overview of the new tools and some practical tips on how to use them.
Thurs., Dec 7, 2006
10:00 AM - 10:45 PM PST
The scenario: You purchase a template from PixelMill that is marked as XHTML 1.0 validated. You add your content. You publish your site. You run your template through the W3C validator. You get a big red bar saying that your site isn't valid XHTML. What happened?
Unfortunately, FrontPage 2003 isn't very good at keeping your code XHTML-validated. (Expressing Web Designer and SharePoint Designer 2007, in contrast, are very good at keeping your code XHTML-friendly.) So here are a few common things that you'll need to do in your pages for valid XHTML. (There may be others not listed here - if you have a specific question, post a comment!)
Comments (0)border="0", you will have to delete it. For example -- <img border="0" src="image.gif" alt="My Image Here" /> will need to be changed to <img src="image.gif" alt="My Image Here" />. This should fix all of the "there is no attribute 'border'" errors.<p>This paragraph is causing errors!</div>, you will want to add the closing paragraph tag at the end of the paragraph, which would be before the closing div tag in this example... <p>This paragraph is causing errors!</p></div>.By following the above steps, you should be able to get most of your site fully validated. There may be some other issues if you have used various scripts or components which will need to be dealt with on a case-by-case issue.
Our selection of CSS tableless templates is growing, so I thought that now would be a good time to talk about the difference between tables-based templates and tableless templates.
Tables-based layout describes the use of HTML table tags to create columns and rows for a grid layout that then allows you to have a column layout and more complex interface graphics (like rounded corners or drop shadow info boxes) than you would be able to without a tables-based layout. You can tell if you have a tables-based layout by looking at the HTML code -- if you see a lot of <table>, <tr>, and <td> tags in the code, then you have a tables-based layout. Web developers began using tables to "force" layout because of the limitations in HTML for having cool designs. (HTML is primarily a "markup language," which means that it brings meaning by labeling things as paragraphs, headers, quotes, etc., but within just HTML there is no way to describe how something should then "look.")
With the advent of cascading stylesheets (CSS) a few years ago, however, and with all the major browsers finally implementing CSS, HTML could go back to doing what it was first intended to do -- provide meaning to the content of a site. CSS handles the layout, the colors, the fonts, the interface graphics. So now, we have what we call CSS-based layout, or table-less layout -- layouts that are designed and formatted completely with a stylesheet instead of with tables. CSS-based layouts are more flexible, more powerful -- one could easily make a layout change across your entire site by editing the stylesheet, whereas with a tables-based template one would have to go through each page and edit the code (or copy and paste the content from each page into the new layout). CSS-based templates provide cleaner code without all of the <table> and <tr> and <td> tags, which helps with better search engine ranking and accessibility.
At PixelMill, we are encouraging all of our developers to begin developing more and more CSS-based layouts instead of using tables, although we know it will be a slow transition. One of the biggest factors for developers continuing to use tables-based layouts is, frankly, the terrible CSS rendering that FrontPage 2003 Design View has, especially when it comes to relative font sizes (where the fonts can resize when the user changes the text size in their browser). Customers who are used to using tables-based layouts usually have a bit of a shock when they open their first CSS template, where columns sometimes appear below other columns instead of lining up neatly in a row. It takes a bit of a shift to get used to working to a CSS template, although the benefits (cleaner code, better accessiblity and validation, see above...) far outweigh the initial frustration. (Dreamweaver MX and MX2004 users may experience some frustration as well with shifting content areas, but Dreamweaver 8 is quite solid in its rendering of CSS layouts.)
With the coming release of Expression Web Designer and SharePoint Designer 2007, CSS templates should overtake tables-based templates. EWD and SD2007 were created with powerful CSS layout in mind, and come with many tools to help refine and edit the stylesheet. The templates display perfectly in Design View. Templates made for FrontPage 2002 or 2003 work just fine in EWD and SD2007 so upgrading shouldn't be a concern.
If you are looking for cleaner code, better search engine ranking, accessibility and validation, CSS templates are worth the look.
Many of you have probably heard that Microsoft has decided to drop FrontPage. This announcement has resulted in a number speculation articles and blogs that seem to have created more confusion in the market. I agree that the dialogue and viewpoints are important, but often they don't tell the whole story, just as my short article will only provide a brief viewpoint from the PixelMill perspective. As always, I encourage you to do the appropriate level of research and make the analysis you feel is best for your situation.
I have been asked a number of times, "What's PixelMill going to do now that FrontPage is going away?" and "What will happen to FrontPage sites?" My answer is "Don't worry." Microsoft has not left FrontPage users high and dry. In fact, they have done everyone a big favor and produced two new products that take advantage of the editing ease of FrontPage and combined it with the more important standards being developed by the web building community. SharePoint Designer 2007 and Expression Web Designer are both solid replacements to FrontPage. SharePoint Designer has been positioned as the enterprise solution to be used with Microsoft's SharePoint solution, and Expression Web Designer has been positioned as the new "designer's" tool.
In mid-March, I attended Microsoft's Mix06 event to learn more about these upcoming tools as well as many of the other updates coming from Microsoft later this year and early next year. I could write a novel about the many different elements of this conference, but I'll let you experience some of this yourself by viewing the Mix06 keynotes available at the Mix06 site.
The one important point I took away from the event, in relation to the changes with FrontPage, is that both new products are a natural progression for FrontPage users. Beyond the ease-of-use expected from FrontPage, both products will help users move away from the proprietary elements common with FrontPage, and both will do an excellent job of helping you build your site using Cascading Style Sheets with an integrated CSS editing environment, take advantage of Web Standards (i.e., HTML 4.01 and XHTML 1.0), and help you be compliant with Accessibility issues. Even better, the introduction of the two products now gives you more choices. In later issues, we'll go into more detail about both of these new tools and the benefits they introduce.
What will PixelMill Do?
PixelMill will support and build for both SharePoint Designer 2007 and Expression Web Designer. We feel that both products will have their own set of customers and that PixelMill can offer both groups valuable solutions tailored to their choice of editor. In the coming months we will be providing more articles about these products and how many of the newer templates we offer will likely work even better in these new editors.
What about existing FrontPage sites/users?
"Don't worry!" I say. ;-) We have been working with the new SharePoint Designer 2007 beta for a couple of months. We can say with 100% confidence that this product will work with existing FrontPage sites, and it also still maintains many of the familiar FrontPage tools. We have even tested a number of our oldest products with SharePoint Designer, ones that use Themes and FrontPage navigation bars, and they all worked as expected. There were a few small nuances, but that is to be expected from any upgrade. We still have six to twelve months before final release, but we're confident that any changes to the product will not affect the ability to work with existing sites. The information I received from the Mix06 event was inconclusive about how it would work with existing FrontPage sites, but my guess is that many of the older FrontPage features that support Themes, etc. will likely not be in the product. But, don't quote me on that. Either way, Expression Web Designer appears to be a solid solution and definitely geared to the graphic designer and Visual Basic developers. As soon as possible we will follow-up with additional information in regards to existing FrontPage sites in Expression web Designer.
We're very excited about both of these new products. We like the direction that Microsoft is taking with both offerings, and we're confident that you'll be happy with PixelMill's decision to support both in our upcoming products and educational materials.
Scenario 1: You have a brand-new template, and you start copying your old web site content over to the new design. But then you realize that the fonts don't match -- the fonts from your old site don't match the fonts in the new site. Why not?
Scenario 2: You have a Word document with content that you want to place into your web site. So you start copying and pasting. You notice that the fonts from the Word doc are carrying over into your web site. Not only that, but when you view the HTML code, you see that there is a lot of excess, bloated code. Short of retyping all your content, how can you avoid this?
The answer to both problems: Use Edit > Paste Special > Unformatted Text.
When you paste content into FrontPage, FrontPage assumes that you want the text to be formatted fairly the same way that it was in the other application or web site. So, FrontPage will add lots of additional code to try to achieve the same formatting. This results in bloated code (i.e., longer download times) and inconsistent fonts between the original template design and your pasted text. Choosing Edit > Paste Special > Unformatted Text strips out all the excess formatting and puts JUST the text into your web page.
The one drawback to this method is that things like lists, bold, and italics will be lost. From personal experience, though, it's much easier to add those things back in than it is to try to strip out the excess formatting code.
So... use Paste Special, for cleaner, leaner pages.
When you open a page for editing in FrontPage 2003, the bottom bar has four buttons: Design, Split, Code, and Preview. My advice is to ignore the Preview button.
The Preview view pane is notorious for displaying certain types of sites incorrectly. Some viewers might see black or white boxes over their navigation buttons (that happens when the designer uses a transparent GIF for the button graphic). Others might see parts of their web page in the wrong place (that happens with some CSS-based layouts). Links may not work, Flash movies may not work properly. Basically, the Preview view may make you think that your site is "broken" when it's not.
So instead, get comfortable with the File > Preview in Browser command. PixelMill has support articles online to teach you how to use Preview in Browser, and how to add additional browsers to the selection list. Why waste your time in the Preview pane when you can see your site as it would actually look in a browser?
(And here's some advance information... the next Microsoft products that will replace FrontPage have gotten rid of the Preview button altogether! So you might as well be ahead of the curve and ignore it now.)
Include pages are a feature of FrontPage that allow you to "include" the content of one page into other pages. What this means is that you can have repeated content on multiple pages, but only have to edit the content in one place.
Many of our FrontPage templates use include pages for areas that are common across different pages, including the logo area or header area, the copyright or footer information, and menus or submenus. But include pages aren't limited to these layout features. You can implement include pages on your own site for repeated content such as:
To learn how to create, insert, and edit include pages, visit PixelMill's support articles about Include Pages.
We often receive questions from customers about adding a page to their site. Yes, FrontPage makes it simple to create a new blank page, File...New...Page. But, there are a couple of different ways to add a page when you're dealing with a FrontPage template.
In years past, many of the templates included a page template that took advantage of the 'page template' features in FrontPage. This would allow a template user to select File...New...Page and they would select the corresponding page template for their site. This was slick, but we quickly found that it was not an ideal solution for the customer or the developer.
There is a better way......
It's an old concept, but it's simple, easy to do, and saves a lot of headaches. File...Save As, Yep, that's right. ;-) It's our recommendation to open the page you wish to use as the layout for your new page, select File...Save As, and name the new file to the desired name of the page. Then, you would simply modify the content on the new page to meet your needs. Don't forget to change the page title and any meta tags.
You will find that this process is much easier to use. Plus, it ensures that your new page carries over any CSS, Includes, etc.
The following are a few links from our support area that may help further:
Creating a New Page by Saving an Existing Page
Creating a Page With a Page Template - Keep in mind, most of our newer products do not use 'page templates'.
Creating Web Pages in FrontPage
TrackBack