Articles Tagged 'html'
Why is the Transition from Static Websites to Dynamic so Painful for Beginning Designers?
TsvetiThe times when the Web was static are history. Static HTML sites still have their place on the Web but the majority of sites are database-driven dynamic Web platforms that manage content, e-commerce, customer relations, etc. If a designer wants to stay current, he or she needs to be able to design both static and dynamic sites. However, as I have noticed, some designers I know have really hard times when they have to switch from static HTML sites to dynamic ones (blogs, CMS). Designing static HTML sites is different from designing dynamic sites for sure but is it really that different and that complicated? And if it is, what can one do to overcome it? CMS are not a new field for a Web designer anymore and it is a safe bet that they will always have a hefty share on the Web design market. Although there are many similarities in designing a static site and a CMS, there are certainly differences as well. To me, designing a CMS is easier than designing a static site but I do feel that both require a different skill set.
Simon’s Google Doodle – HTML5 + JS jQuery Game
Rochester OliveiraDude, you've heard a lot about Google doodles haven't you? What about that Pacman one? It is just addictive. Company owners know how a funny game and unlimited search powers could be dangerous for productivity. And how it can be a marketing boost. The most amazing thing is that we can create our own addictive HTML game. Actually, this is why we are here today. With this tutorial you'll see how to use some of JavaScript and HTML capabilities to build simple yet funny games. So, let's rock!
jQuery Plugin Development: Hover to Reveal Masked Password
We talked about how to improve your HTML forms performance a couple of days ago. There we covered a pretty controversial topic "Don't mask your passwords", discussing how bad masking your passwords could be for usability. At this moment, we basically have two options: mask password field and don't ask for any feedback, or show password field as text and potentially decrease security. This is why I think a hover revealing password could be a really good alternative: You can increase your security, and if you are unsure about what you've typed just go and hover over it. So, what we will be doing today is a jQuery plugin to do that, and additionally, we will have a behavior pretty similar to what many mobiles does, where we can see the last character for a couple of seconds. This is a good chance to learn more about plugins, dynamically generated content, and some good coding practices. Moreover with this technique we could apply different effects and a lot of variations since all this things are based on non-obtrusive and almost only decorative javascript. So, let's rock!
17 CSS/HTML Effects with Cross-Browsing Alternatives
Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser. You don't need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don't need to reinvent it every time you need a simple round corner, right? Thus, our point here is to collect some cool CSS effects that you should be using: • Min / Max width (IE included) • RGBA (IE included) • Opacity (IE included) • Image rotation / scaling (IE included) • FullScreen Background (IE included) • Background pattern or bullet without image file • Text Shadow (IE included) • Multiple borders (IE included) • Box Shadows (IE included) • Rounded corners • Screen reader only accessible content • Don't use negative text-indent • Clearfix (IE included) • @font-face (IE included) • Pull quotes without image • CSS for iPhone4 (higher resolution) • CSS landscape / portrait orientation for mobiles So, Let's rock!
CSS Counters – The Right Way to Organize Your Ordered Content
It is pretty common to see step-based content. Tutorials, shopping carts, FAQ's, grandma's recipes. You know, numbers and steps are really good to grab attention, so many writers use this. But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content. Well, let me tell you a secret: They are doing it wrong. Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ). A little time ago I was wondering about this thing, isn't it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible! Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D So, let's rock!
An Introduction to Object Oriented CSS
Ranjith KumarWith richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup. There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them. This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.
10 Tips to Boost Your HTML Forms Performance
Sometimes we get so used to doing things one way that we forget a little and important thing: to improve. We get so involved with all this CTA stuff that we forget other important things, like the contact form that comes after the pretty button.
Our task today is to improve our form, to get better conversion rates, and maybe learn something from it.
We will be talking about conversion, code, and design, in an easy and practical way.
So, let's stop talking and rock some forms.
Do’s and Don’ts of Writing Better CSS and HTML
Ruben D'OliveiraCSS and HTML are key languages to begin with, when you decide to invest your time in web design and development. They are powerful languages and most of the time may seem simple to work with. However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.
Converting Dezign Folio From PSD to HTML [Very Detailed]
Ahmad HaniaIn this article you will learn how to convert Dezign Folio from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript. When you've completed this tutorial you'll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.
![Converting Dezign Folio From PSD to HTML [Very Detailed]](http://cdn1.1stwebdesigner.com/wp-content/uploads/2011/02/preview_large_converDesignFolio.jpg)
40+ Free High Quality CSS/HTML Templates from 2010
Jane BernardoStylish, elegant, interactive and most of all it's free. Free CSS/HTML templates that will put a great design on your website. If you are creating your own website, you can consider using these free templates. There's always that will suit your style, personality, work and the website you will be working on. I'll be presenting free CSS/HTML templates that you want to consider in your next project but be sure to read terms.
