Frederick Weiss » KEEPING THE WEB IN CHECK
By Frederick Weiss
To listen to an audio podcast, mouse over the title and click Play. Open iTunes to download and subscribe to podcasts.
Podcast Description
I am a strategist with over 12 years of web development experience. I have a passion for typography, clarity, detail, and general UI best practices. I PLAN, DESIGN, and BUILD web sites with results.
| Name | Description | Released | Price | ||
|---|---|---|---|---|---|
| 1 | VideoJS in My Sexy Responsive Data Tables | CSS SEXY I have fallen in LUST with Responsive Web Design, my iPhone and I can’t get enough of websites interfacing our queries while they dress all CSS-SEXY for us. I love the fact that many companies are now catering to my 320px fetish; many of today’s websites are even designed to fit my viewport all the way to my max-device-width. You may SCREAM the “safe word”, but mobile devices won’t stop using more bandwidth globally until we all “get off” our phones. I began studying Responsive Web Design late in 2010, and have come to gather a good understanding of the subject. I wrote an entry on this matter last year titled “Responsive Web Design and Adaptive Web Design”, since then I have dominated the realms of Responsive Web Design and have made them my bitch for my own amusement. IE Display Table Block == Odoriferous Underside of a Donkey I was only dreaming that everything in the land of Responsive Web Design was under my control. I smelled the odoriferous underside of a donkey the moment I tried to make Tables work for Responsive Web Design. Tables just do NOT cater to my 320px web fetish. As hard as I try to beat them into submission, Tables are just TOO BIG for my device. As such, Lord Google advised me to read an article by Chris Coyier titled “Responsive Data Tables”. Chris broke down the fact that no matter what you do… “Data Tables don’t do so well with responsive design. Just sayin’.” - Chris Coyier.He gives us a great solution for styling tables differently at key Media Queries: basically we kill the tHeader, then use pseudo classes to inject the tHeader inside the Table cells adjacent to the main TD content. Displaying all the Table child tags as BLOCK will give us flexibility. See Chris’s code example…table, thead, tbody, th, td, tr { display: block; }AWESOME, this will solve most of our problems; Chris points out that the Donkey in the room is IE, IE can not handle Table elements displayed as Block. “Sigh. Here’s the deal. IE (even 9 and 10 preview) don’t like you setting table elements as display: block; It does weird stuff and doesn’t work right.” - Chris CoyierI know I can just NOT include this solution for IE, but I can not hide from IE. People do use IE, there is no way around this! jQuery says “.replaceWith” WHAT My solution to this whole IE sucks shiz on Sunday issue is this: use jQuery to replace my Tables with DIVs. Phuk yes, if Table tags are the problem, then “a problem got a problem ’til it’s gone” – ODB (RIP). So let’s kill us some Tables :)// REPLACE TABLE $('table').replaceWith(function(){ return $("").append($(this).contents()); });// REPLACE TD $('td').contents().unwrap().wrap('');// REPLACE TH $('th').contents().unwrap().wrap('');// REPLACE TR $('tr').replaceWith(function(){ return $("").append($(this).contents()); });// REPLACE THEAD $('thead').replaceWith(function(){ return $("").append($(this).contents()); });// REPLACE TBODY $('tbody').replaceWith(function(){ return $("").append($(this).contents()); });// Odd and Even Classes $('div.tablearea_row:nth-child(even)').addClass('odd_rows');//Rows $('div.tablearea_cell:nth-child(even)').addClass('odd_columns');//Columns// First Column TD $('.tablearea_row .tablearea_cell:first-child').addClass('first');Now we use our new classes to style our “Table”..tablearea_headerrow{ /* thead */ display:block;overflow:hidden;clear:both; width:100%; font-weight:bold; }.tablearea_tbodyrow{ /* tbody */ display:block;overflow:hidden;clear:bot[...] | 1/23/12 | Free | View In iTunes |
| 2 | VideoResponsive Web Design and Adaptive Web Design | The Interweb “as we really know it” began as a small pond of ambitious servers in the 1990′s. Dial-up internet access was cumbersome, it took a lifetime just to load a web page. Now in the 21st century, the Interwebs have become a vast ocean of data. We can surf the seas at the speed of fiber optic light from the comfort of our own homes, or at our favorite fishing hole via smart phone technologies. The speed and bandwidth of today is amazing, and it is only gaining momentum. We must be able to adapt to changes in browser technologies, as there are many new devices out there that must be supported. These new technologies do not just “surf” the Interwebs, they swim with the hunger of great White Whales consuming any data in their path. These new technologies can drive the “Captain Ahab” in you to grow angry and lose focus, but you must grab your harpoon and sail into the heart of the storm. Seek out new ideas, and learn new skills to keep your head above water like Ishmael to a twitter whale fail. Adapt, Respond, and Overcome “A List Apart” is one of the first places I always turn to for guidance. I found a great article by Ethan Marcotte titled “Responsive Web Design”, Ethan’s article really helped me get up-to-speed on the subject. Ethan explains the where and how to start using these new techniques.A flexible, grid-based layout, Flexible images and media, and Media queries, a module from the CSS3 specification.I will touch on just a few of Ethan’s points, but you need to read his book to get the full message. CSS3 Media Queries Media Types are something that most of us are already comfortable with. We use Media Types all the time to call Screen and Print style sheets. CSS3 Media Queries are a little different, these are used to call conditions of media features. We can call things like “orientation”, “device-aspect-ratio”, “min-device-width”, and many others to accomplish our goals. CSS3 Media Queries give us a lot of freedom to style for present and future devices as web browsers change with time. Here is an example of CSS3 Media Queries being used to call different web devices, these are examples of Adaptive Web Design…/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }/* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ }/* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }/* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }/* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }/* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }/* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }/* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ }/* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }In the code above we see that “max-device-width” is being used a lot to define devices and state styles for their sizes. This is an easy way to define a device’s browser dimensions and then style appropriately. iPad, iPhone, and even their orientations are stated and styled via the CSS3 Media Queries. Responsive Web Design Let’s go back to Ethan Marcotte’s article and look at his example page. Try resizing his example page and you will see the design changes automatically to best fit [...] | 10/9/11 | Free | View In iTunes |
| 3 | VideoCleaning up and controlling your Facebook Like image | Sometimes a few of the more important web site fundamentals get lost in the launch of a client’s project. These things range anywhere from a browser’s favicon image to the web site’s analytic performance tracking solution. All of the main core deliverables need to be the responsibility of the technology service entity and/or “cousin that makes them web sites on them there interwebs“. One of the most commonly missed core deliverables I have come across is the integration of Facebook’s Open Graph protocol. If you don’t know what “Open Graph protocol” is, then I suggest reading up on it here. The basic idea is when someone links to your web site on Facebook, you want to have control over the image and description in their status. We do not want random images showing up in the user’s Facebook status, nor do we want random descriptions in there either. Facebook give us a simple API to manage this data, so why not take advantage of it. Go to the Facebook developers’ web site and sign in. There are numerous tools Facebook offers, but we will just focus on the meat-and-potatoes concept of controlling the image and description in the user’s status for this post. First things first, face up Facebook Go ahead and sign in to Facebook, then go to their developers’ web site. You’ll need to create a new App, so click on Apps to get started. Once you have created an App, you’ll need the App ID. At this point we will need to paste in the Open Graph META code. The first line of your web site should be your doctype, the second line should be the HTML tag. In the HTML tag we need to add some Open Graph markup.Then in the HEAD tag, we need to add the following… The only tag here that might not be completely obvious is the “og:type”. The “og:type” is asking what the content of this web site is defined as. Here is a link to all the available types. Once you add all the data correctly, you will want to validate your work. Go to https://developers.facebook.com/tools/debug and enter your web site address, hit “Debug” and watch the magic happen. Hopefully at this step you do not receive any error messages, and you get a nice screen that echoes out your data. Now the last thing to do is test this by entering your web site address into your Facebook status. Does it look correct? I like your Facebook Like image :) You did it! Facebook made this process painless and well-documented for fast implementation. Now that you have this ready to go, venture forth into the “Facebook Developer Zone” and explore the room. Get a good understanding of all the flavors of technology Facebook has to offer. | 9/5/11 | Free | View In iTunes |
| 4 | VideoGain organic web traffic with Youtube and Vimeo | The number one search engine in the world is Google, obviously there is no question of that. The number two search engine may or may not surprise you, but it is YouTube. I know…what a shock that people would rather watch a video than read, but video brings a lot of value to the table in the visual learning aspect. We can really get an exact explanation from a video’s author as they illustrate a process with their own voice. For me, watching a video is an organic means of learning. It’s like the first time your Grandpa taught you how to fish, or the first time your uncle Gary showed you how to hotwire a 1965 Corvair in Jersey City when you were 8… Good times :). Video is just more input to digest in the brain and makes it easier to process as you’re learning. Since Youtube is the second most popular search engine, the equation is…Video equals = web traffic. Higher web traffic equals = happy, happy, joy, joy.Thus, I began creating videos for all my blog entries in an attempt to double my organic user traffic. To promote my web site, I created both a YouTube and a Vimeo channel.http://www.youtube.com/frederickweiss http://www.vimeo.com/frederickweissI will see how this works out as time goes on; the analytic data should result in higher user traffic as I add more videos to my blog. Podcast creation tools I found a great tool for creating screen casts, it’s called ScreenFlow. ScreenFlow will record from your computer’s camera, microphone, or monitor. ScreenFlow makes it easy to add media to your recording; you can simply add music, text, images and even draw on your recordings with ScreenFlow. When your video is ready, you can publish to YouTube or Vimeo directly from the ScreenFlow interface. This is one of the best purchases I’ve made for software; if you’re looking to create a screen cast, this is the software. | 8/23/11 | Free | View In iTunes |
| 5 | VideoAdobe Fireworks Tables panel | Plugins don’t usually get me all that excited, but this one definitely does. One of my friends at work just turned me on to this new panel for Adobe Fireworks called “Tables”. This is a big time-saver if you have a lot of designs with table data. You can create tables directly in Adobe Fireworks, or import TXT or CSV tabular data files that are already formatted, then change the styles with ease. Naturally you would think that a table design panel requires you to enter all the data in some sort of table structure. The Fireworks Tables panel only requires you to align your data on the page into a grid, select it, then press a button to create the table… super easy. Modifying the table is made simple: adding additional elements or changing styles is done with a push of a button. Adding images or text is done by placing the content over the grid and pressing “update”. The update will place the new items in the table, allowing you to add or remove items as you wish. Table Styling The Fireworks “Tables” panel give you access to change the fundamentals of a table such as cell padding and borders, table padding and borders, and their colors and background colors. The UI also allows you to change the alignment of cells, rows, and columns along with their widths and heights. Another cool feature is the ability to add a header and footer to the table, and assign them their own attributes like colors and sizes. Check out John Dunning’s plugin here http://johndunning.com/fireworks/about/Tables | 7/10/11 | Free | View In iTunes |
| 6 | VideoSay goodbye to CSS User Agent hacks | I have always written a few separate CSS files in the necessity to discipline different platforms with various bad behavior patterns. I have been fixing Fixed Position positions, and boxing up Box Models boxes more times than I would like to admit. Many developers starting in the field can not grasp the concept that an internet browser and/or OS may interpret their code completely different from one to the next, but it is a fact that developers work with every day. Most seasoned developers still have nightmares of being chased by the anthropomorphic cyber boogeyman known as “Internet Explorer 6″; this absolute demonic personification of evil has devoured centuries of time in many businesses’ projects. Now with the death of IE666 we can all awake from the night terrors with a little relief, but there are still real world challenges that await us in the light of day. Internet Explorer 7, Internet Explorer 8, and Internet Explorer 9 all have their bugs, but they are not alone. FireFox, Safari, and Google Chrome also have their share of roach infested summer basements. All internet browsers have quirks that make them different from their peers, good and/or bad. Different OS versions of browsers may also display an array of flavors and textures that may not be expected and are sour to the taste. Different hand held devices now hold the same challenges as any other internet browser: iOS, Android, and Blackberry being the main contenders. CSS Weapons of Mass Construction Instead of writing an army of user agent detected CSS soldiers, I have found a weapon of mass construction called “CssUserAgent“. CssUserAgent echos the browser’s user agent string in a class attached to the HTML tag. If you look at Google Chrome on a Macintosh, you will get the following code echoed in the HTML class…This is translated from user agent… Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24 The user agent string details are appended by the prefix “UA”, which stands for User Agent. I am sure you have made the connection by now that this is a very powerful tool for user agent CSS targeting, and that this is all done in one CSS file. You can target different browsers and devices in a number of ways….ua-ie-6 {position:absolute;background-image:url(logo.gif);} .ua-ie-8 {position:fixed;background-image:url(logo.png);} .ua-ie-8 {position:fixed;background-image:url(logo.png);} .ua-ie-9 {position:fixed;border-radius:10px;background-image:url(logo.png);} .ua-webkit {position:fixed;-webkit-border-radius:10px;background-image:url(logo.png);} .ua-ios-3 {position:absolute;-webkit-border-radius:10px;background-image:url(logo.png);}Circumventing the problem and running straight into the solution with CssUserAgent is a pleasure. CssUserAgent makes it so easy to target different browsers, browser versions, operating systems, and mobile devices and in a fraction of the time it took to write user agent detections. My professional opinion is download CssUserAgent right now and start developing CSS user agent targeted solutions that will save you time and help you sleep at night. The anthropomorphic cyber boogeyman will bother you no more :) | 5/29/11 | Free | View In iTunes |
| 7 | VideoGoogle Event Tracking – UX Strategy | Google analytics makes it easy to track user actions. Google event tracking empowers you to track events that may not result in a page view, but are important user behaviors that will impact and guide your UX design. Google event tracking is really easy to implement…_trackEvent(category, action, opt_label, opt_value)Category (required) The name you supply for the group of objects you want to track. Action (required) A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object. Label (optional) An optional string to provide additional dimensions to the event data. Value (optional) An integer that you can use to provide numerical data about the user event.Implementing Google Event Tracking I have three CTAs on my home page that toggle information about my process. Once the user performs a click on the CTA, it then asks the user to click another button to go through a conversion funnel. I can track when users click the toggle, and compare that information with how often the user then clicks the CTA to go through that conversion funnel to the goal. Tracking these two event behaviors will give me information on how good my CTAs are, and what information my audience finds valuable. The result of these events might change my perspective of the UX design as: I can find this information proves my CTAs are flawless, or that I need to reconsider the information architecture._gaq.push(['_trackEvent', 'PROCESS FLIP', 'flip', 'PLAN']); _gaq.push(['_trackEvent', 'PROCESS FLIP', 'flip', 'DESIGN']); _gaq.push(['_trackEvent', 'PROCESS FLIP', 'flip', 'BUILD']);onclick="_gaq.push(['_trackEvent', 'PROCESS LINK', 'click', 'PLAN']);" onclick="_gaq.push(['_trackEvent', 'PROCESS LINK', 'click', 'PLAN']);" onclick="_gaq.push(['_trackEvent', 'PROCESS LINK', 'click', 'PLAN']);"User Experience Strategy I strongly suggest tagging your events, I have found the resulting information extremely valuable in guiding my own UX strategy. Assuming you already have Google Analytics installed, the next step is to read up on Google Event Tracking, and then develop your tracking strategy. | 5/15/11 | Free | View In iTunes |
| 8 | VideoiPhone home | Building a web site optimized for the iPhone can be really fun and super easy. All one needs to do is load the iPhone CSS via the media type and load 300 DPI images for retina display iPhones... All pretty simple. I wanted to launch my new web site with a mobile version, of course time always wins out and I had to wait a week. I finally launched an iPhone version and have Droid and Blackberry versions on the way. | 5/3/11 | Free | View In iTunes |
| Total: 8 Episodes |
Customer Reviews
Makes it seem so simple!
Fred's tutorials are digested down so simply and so easy to follow along -- even with my lacking technical knowledge.
I've been able to learn so much from his tutorials. Keep em coming Fred!
Thanks
Very helpful
These tutorials are very well done and informative. Thanks, Frederick!
Viewers also subscribed to
- The ATX Web Show!
- The ATX Web Show!
- View In iTunes
- Weekly Web Tools
- David Jackson
- View In iTunes
- Herding Code
- Herding Code
- View In iTunes
- Free
- Category: Tech News
- Language: English
- Copyright © 2011 Frederick weiss. All rights reserved.
