Webdesigninformer.com

Cameron Moll Go to the source

Firefox Home for iPhone : Mozilla has submitted its first app to the App Store, and it’s a “lite” version of their Firefox browser. The entire premise seems to be built on picking up where you left off on your desktop PC. While a nice idea (and one possibly forced by Apple policy), it ignores the context of mobility — something I repeatedly hammered on in Mobile Web Design and something that still holds true today. Frankly, I don’t see my phone’s browser as an extension of my desktop browser. I wouldn’t place any bets on this app doing remarkably well. … Read the rest here

Snook Go to the source

In Chrome 5, Safari 4, Opera 10.53 and sometimes Firefox (although I was unable to reproduce it in this test case), changing the visibility of the element by toggling display:none will cause the scroll offset to reset to zero. Toggling visibility:hidden does not seem to trigger the same problem. Scroll the container and then toggle the classes applied. Class applied: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. … Read the rest here

Cameron Moll Go to the source

Firefox 4 to Add CSS3 calc() : Paul Rouget, Mozilla: This feature hasn’t landed yet in any Firefox tree but work to implement it is underway. Firefox will support the CSS calc() value, which lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth. Ace. … Read the rest here

Cameron Moll Go to the source

Prefetch Content with HTML5 : This sounds too easy. Add a line like this to your head element: or … and the browser fetches the content in the background as soon as the user’s computer is idle. If it sounds too easy, it’s probably because Firefox is currently the only browser to support this feature. But this has the potential to be a really useful feature. … Read the rest here

Snook Go to the source

Have you heard of Hundred Pushups ? It’s a simple six-week program to build up your strength by slowly increasing the number of pushups you can complete. By the end of six weeks, you should be able to complete 100 and along the way you’ve gotten a short workout working multiple muscle groups. Since I’m still trying to lose weight , I figured I’d get started on the program (yesterday was my first day and managed to do 12 pushups at the end of my first set). However, being the geek that I am, I thought, "I should track my progress with a cool iPhone app." There is one available for $1.99 from the Hundred Pushups web site. … Read the rest here

Snook Go to the source

HTML forms have been, to date, quite simplistic. We’ve had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.) The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand… Read the rest here

Cameron Moll Go to the source

ColosseoType.com, An All-HTML5 Endeavor : The site for the Colosseo poster is my first production-ready website with HTML5 under the hood. I’ve coded sites semantically with HTML5 class names before (see Jon Tan’s article ), but this is the first with legitimate HTML5 elements such as and in the markup. IE doesn’t yet recognize HTML5, so I’ve added Remy Sharp’s HTML5 shiv script , which forces IE to acknowledge the new elements. Granted, the Colosseo site is a one-pager, but hey, it’s a start. Update: It looks like Firefox 2.x doesn’t play well with HTML5, either. Here’s another article from Remy Sharp on getting Firefox 2 to recognize HTML5… Read the rest here

Snook Go to the source

Every now and then I look at using background-position-x and background-position-y but can never seem to find a definitive and up-to-date resource. To save myself the trouble in the future, I’m documenting it here. Positioning via separate X and Y values is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have been denied . Why have separate X and Y values? … Read the rest here

Eric Meyer Go to the source

The winners of Microsoft’s MIX 10K Smart Coding Challenge (for which I was honored to serve as one of the judges ) have been announced, and the Grand Prize has been awarded to… Jimmy D ’s Frog Log . Which is an HTML5/CSS/JS entry. That doesn’t run in Internet Explorer. Yep. Frog Log was my top pick, and obviously did very well with the other judges too, for a good reason: it’s a fun game. It doesn’t play quite the same in Firefox previous to v3.5, as the drag-n-drop doesn’t work. … Read the rest here

Eric Meyer Go to the source

Monospace text sizing is, from time to time, completely unintuitive and can be quite maddening if you don’t look at it in exactly the right way. Fortunately, there is a pretty simple workaround, and it’s one you might want to consider using even if you weren’t aware that a problem existed. But first, allow me to lay some foundations. Assuming no other author styles beyond the ones shown, consider the following: span {font-family: monospace;} <p>This is a ‘p’ with a <span>’span’</span> inside.</p> All right, what should be the computed font-size of the span element? Remember, there are no other author styles being applied. … Read the rest here

Eric Meyer Go to the source

In the course of digging into the guts of a much more complicated problem, I stumbled into an interesting philosophical question posed by web inspection tools. Consider the following CSS and HTML: p {font-size: 10px;} b {font-size: 1.04em;} <p>This is text <b>with some boldfacing</b>.</p> Simple enough. Now, what is the computed font-size for the b element? There are two valid answers. Most likely one of them is intuitively obvious to you, but take a moment to contemplate the rationale for the answer you didn’t pick. Now, consider the ramifications of both choices on a situation where there are b elements nested ten layers deep. … Read the rest here

Snook Go to the source

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. … Read the rest here

Snook Go to the source

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I’m covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting. Multiple Backgrounds What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn’t it… Read the rest here

Hicksdesign Go to the source

How often have you read a snide, bumptious or haughty comment where you feel the only reaction could be a raised handbag, accompanied by the high-pitched mocking call of “oooOOOooooh!”? If you’re not familiar with the work of Vic and Bob , the chances are that it’s never . Well, hopefully that will soon change, as Hicksdesign has launched a site to fulfill that need you never knew you had to “oooOOooooh!”: Now whenever you see such a comment, you point them in the right direction: oo00.eu (2 oh’s, 2 zeros and a european union). Obviously, feel free to use it on me if say some deserving! If you’re still confused, this video might help explain the origins of the raised handbag as a retort, (before going on to become a surreal contest): Playing catch-up This little side-project was the perfect opportunity to play with new CSS3 toys and HTML5 tags that I haven’t had time to experiment with yet: CSS Animations : In any webkit browser (Safari, Omniweb, Chrome), the handbag will actually be raised, waved at you, and then lowered. There is a separate animation for the shadow underneath the bag. … Read the rest here

SimpleBits Go to the source

Celebrating Firefox 3.6’s support for WOFF (Web Open Font Format), FontFont is giving away the WOFF version of FF Nuvo for free. … Read the rest here

SimpleBits Go to the source

Celebrating Firefox 3.6’s support for WOFF (Web Open Font Format), FontFont is giving away the WOFF version of FF Nuvo for free. … Read the rest here

Snook Go to the source

I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here

Snook Go to the source

I had noticed this little bug on my own site. In the footer, there’s a 5px border with the colour set using rgba. In Safari, it’s as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you’d expect. … Read the rest here

Eric Meyer Go to the source

I was recently honored to be asked to be a judge for the MIX 10k Smart Coding Challenge , running in conjunction with Microsoft’s MIX conference . The idea is to create a really great web application that totals no more than 10KB in its unzipped state. Why did I agree to participate? As much as I’d like to say “ fat sacks of cash “, that wasn’t it at all. (Mostly due to the distinct lack of cash, sacked or otherwise. Sad face.) The contest’s entry requirements actually say it for me. … Read the rest here

Mezzoblue Go to the source

You probably experience this on a regular basis: a client sends you an illustration or a logo they’d like to use in a project, but it’s a low-res bitmap or a flat image file with a background texture. Or both, if you’re really lucky. Sure, you can try and ask for a vector version, but more often than not what they originally sent was the best copy they had on hand. I seem to have made something of a hobby out of trying to coax useful results out of this type of file. Over the years I’ve stumbled across far better ways of doing it than manually clipping the background with the the magic wand or various selection tools. For the next time you’re handed a less-than-ideal source image, here are a few of my tricks for isolating the part of the file I want to work with in Photoshop. … Read the rest here