Tallan's Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

Posts Tagged "CSS"

The Joys of Printing from the Web

Karissa Wingate

Print style sheets, should in theory, be simple. You strip out the complicated junk from your page, and format it a little better for a piece of paper. Right? Wrong. Print style sheets are a pain in the butt. They’re hard to debug, finicky depending on the browser, and downright annoying to get perfect.

Block vs. Inline Elements: The very basics

Karissa Wingate

A lot of confusion surrounds the concept of block and inline elements, and its not unusual for this confusion to persist indefinitely. I’m hopefully going to clarify this tiny but influential difference for everyone in just a few images and with one CSS property.
The first image is a screen capture of the HTML and CSS I’ve used. Note how everything is behaving according to it’s default properties. The headers create line breaks, the anchor tag doesn’t.

How to: Select box colors in Windows 8 store apps (HTML/JS)

Karissa Wingate

Normally I don’t advocate for trying to style form controls in web browsers, but Windows 8 apps have some really offensive colors by default. Figuring out just how to overwrite some of the defaults of ui-light.css and ui-dark.css is quite frustrating, so I’ll explain how to fix the colors of your select boxes.
Here’s the first problem- It’s the color the option turns when it has been already selected and the select box is expanded.

Visibility: hidden vs. Display: none

Karissa Wingate

During a recent project I kept coming up against strange issues with layout. It was in a windows 8 store app, and therefore using some advanced CSS3 techniques, so I assumed I was just having issues with those. The DOM explorer is quite different from the web developer tools I am used to.  I came to realize though that during the course of development, some of our error messages were getting set with Javascript to visibility: hidden instead of display:none like I was expecting. This led to a conversation which revealed that there is some confusion about the two. Here I’ll point out the differences, just so we’re all on the same page. This concept is particularly confusing to developers who know jQuery, because jQuery uses .hide as a function to set things to display:none. When we’re writing in plain…

How to: Zebra Striping ListViews in Windows 8 Apps (HTML/JS)

Karissa Wingate

The following CSS should be applicable to HTML/JS apps, you may need to make changes to make it work properly if you’re not using a page control based navigation system. This “table” is not really a table, but a bunch of dynamically generated data under a static header. The images below are the basic way I want it to look. Below that is the CSS I used to make it work, along with notes for why I did things the way I did.

JavascriptHelper–Managing JS files for ASP.NET MVC

James Curran

After working several years with the Castle Monorail MVC framework, I decided to try ASP.NET MVC to see if it had caught up to Monorail. The transition seemed to go rather smoothly, but one area where I was surprised to find how clumsily it was handled, was the management of JavaScript files. Basically, if some part of a page, say a helper or partial page, needed a particular JS file, you had one of two choices.
The first option is to have the part itself would write the script tag. This allows the part to operate as a “black box” – just drop it in and it works – But it means that there will be script tags loading file scattered throughout the page, and that the part needs to know your folder structure where you keep your JavaScript files. And…

UX Enhancements to Existing Products

Matt Donahue

Recently, I rolled off a client project where we implemented an e-commerce platform with lots of customization to meet client needs. This brought to light the delicate balance between using the platform’s existing features and customizing the user experience to more effectively accommodate your users. You want to think that every out-of-the-box solution is going to provide an optimal user experience, but we all know that’s just not the case. Every project needs tweaking.
Updating the Existing Front-End
Styles
There are some solutions and platforms that you can tell were built by developers with good coding skills but the UX is not ideal; that’s not their baileywick. The clues are in the existing CSS files. Maybe they are using points to define font-size for an online experience and setting your background-color property as “lightyellow” in your default CSS file; yup, you need some degree of damage control when…

Create an Animated Shine Effect with jQuery Part 1

cdudley

jQuery is an amazing javascript framework that equips you with the tools to create beautiful effects extremely easily. While designing an add to cart notification for an online store I knew I needed to create something that caught the user’s eye to let him/her know that their product had been successfully added to their cart. I drew inspiration from the “slide to unlock” animation found on the iPhone and ended up with the following.

On User Experience Design

Krish Mandal

There are many people who believe that product design is a less important part of the things we build. They almost believe that it can be left as an afterthought. I’m sure most people have heard the phrase, “Lipstick on a chicken,” or as I post this soon after the ’08 election season, the phrase, “Lipstick on a pig.” They believe that “beauty” of the product is far less important than the “workings” of the product, and so the engineering schedule and the project management behind it give the design process little play.
On the other side of the fence are those who argue that the beauty and design trumps the workings. I suppose they get this idea from the mainstream media and advertising companies who dress up products and package them such that no matter what the workings, even if…

\\\