Search Results for "Karissa Wingate"

The Joys of Printing from the Web

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

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.

User Expectations vs. Creator Perceptions

Creating successful user experiences is an art. A lot of art involves taking advantage of the way that the brain processes information.  The most successful designs (user experiences or otherwise) are those that give off feeling of “how else would you do it?”. The design simply seems to make sense. Designing an interface is a more complex process than simply creating links and putting arrows on a page. To compare this process to that of another in art in terms of complexity- let’s have a look at foreshortening.  Foreshortening in art is a good illustration of how difficult it is, because it illustrates that something that seems so obvious once it’s done well. It harnesses the power of the brain to fill in the things it’s expecting, even if they aren’t there.

Browsers: The Very Basics – Part 2

Error handling:
One of the reasons that HTML standards are so important is because HTML is a language that has historically been written with a lot of errors and now has many different versions. One of the rules that has been generally agreed upon by browser makers is “don’t break the web”. This means that all new browser versions have to be able to work with all the older standards and handle errors in code in a meaningful way.
For example, if a web developer nests a table inside another table, but the interior table isn’t inside a table cell, webkit will pull the interior table out, and make them two tables next to each other. This can have serious effects on styling and manipulation with javascript; e.g. it will be awfully hard for your javascript to find the table inside the…

Browsers: The Very Basics – Part 1

Brief (but required) history lesson:
Back when IE had 90% or so of the market share, browsers were essentially an enigma. It was hard to know exactly how things worked. Now that open source browsers have a significant part of the market share and there is competition between them in terms of functionality, how the browser works is coming into the light.
There are a lot of rules that front end engineers follow and consider standard, but a lot of F2E’s don’t know why we do some things. It’s crucial that you be able to justify to your clients or your boss why you take the time to follow best practices, and to make decisions based on all of the facts.

HTML: The Very Basics

The language of the modern web is HTML5. It’s a great thing. You probably don’t understand why yet, but you will.
Our most basic page:

That’s really boring, you might say. Well yes, it is. If you opened it in a browser it would be a blank page. But it is important because before we get into actually having stuff on our page, we should probably figure out what is going on here.
We’ve saved the file as a .html file. You can do this from any editor, including Notepad, TextEdit or Word (i do not recommend using word under any circumstances). All you have to do is write .html after your file name. This tells the browser, “hey! this ones for us! let’s render it” and starts the whole process of displaying your web page.

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

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

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)

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.

Good Design is Accessibility.

Introduction
Accessibility isn’t always about ARIA roles and text to speech, it’s often about simply good design. There is a range of disabilities that need to be considered when working with the web. We often just think about blindness, but we should remember to consider the other things that make surfing the web difficult for people. Even under “visual” there are different kinds of disabilities, including color blindness and issues with low contrast visuals. Without going into detail about which disabilities need exactly which changes to make the web easier for them to use, let’s take a bird’s eye view and concentrate on good design. Design standards are considered “good” because of their time proven and well tested concepts. Some of these may seem obvious, but it’s easy to forget the core concepts when working on a design.
Color Palettes
Use of a…

\\\