This extended category features articles on client-side and server-side programming languages, tools, frameworks and libraries, as well as back-end issues. Experts and professionals reveal their coding tips, tricks and ideas. Subscribe to the RSS-Feed.
Popular tags in this category: CSS, CSS3, HTML, JavaScript, jQuery, PHP, Techniques, Essentials, Tools.
Have you ever heard a colleague answer the phone like this: "Good afterno… Yes… What? Completely?… When did it go down?… Really, that long?… We'll look into it right away… Yes, I understand… Of course… Okay, speak to you soon… Bye." The call may have been followed by some cheesy ’80s rock ballad coming from the speaker phone, interrupted by "Thank you for holding. You are now caller number 126 in the queue." That's your boss calling the hosting company's 24 hour "technical support" line.
An important website has gone down, and sooner or later, heads will turn to the Web development corner of the office, where you are sitting quietly, minding your own business, regretting that you ever mentioned "Linux" on your CV. You need to take action. Your company needs you. Your client needs you. Here's what to do.
Read more...For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.
Just like the elusive character from Beckett’s classic play, this day of complete cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.
Read more...As a Web designer you're undoubtedly familiar with CSS, the style sheet language used to format markup on Web pages. CSS itself is extremely simple, consisting of rule sets and declaration blocks—what to style, how to style it—and it does pretty much everything you want, right? Well, not quite.
You see, while the simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. These limitations, like the inability to set variables or to perform operations, mean that we inevitably end up repeating the same pieces of styling in different places. Not good for following best practices—in this case, sticking to DRY (don't repeat yourself) for less code and easier maintenance.
Read more...Since the beginning of CSS3, Web designers have begun experimenting with different code-based solutions to add to design, and even to make up a design entirely. Even with older versions of CSS there are many design solutions that can be done with 100% code, no images necessary.
In this article, we're going to take a look at some design solutions that are now possible with CSS, whether it be with the new, more advanced CSS3 or with prior versions. Everything from small details to entire features can be created with CSS and a bit of markup, and it's amazing to see the solutions created and advancements made in just the last few years.
Despite some of the interesting things we can do with CSS, how practical is it? We'll also take into consideration the practicality of some of these uses, and whether they should just be for fun and experimentation, or perhaps someday a real part of Web design. It's intriguing to think about what kind of imagery and Photoshop-inspired effects could soon be completely replaced with only code, and how this will affect the future of Web development.
Read more...Designing and indeed front-end development for a website that will have content edited by non-technical users poses some problems over and above those you will encounter when developing a site where you have full control over the output mark-up. However, most clients these days want to be able to manage their own content, so most designers will find that some, if not all, of their designs end up as templates in some kind of CMS.
By considering the CMS as you design, you can maintain far more control over the final output. If your designs will be implemented and integrated into the CMS by a developer, then taking control at the design phase will help you to keep control over the design as opposed to leaving decisions to the developer or the content editors.
Read more...It seems that new resources and articles for teaching and promoting HTML5 are popping up almost daily. We've been given HTML5 templates in the form of the HTML5 boilerplate and HTML5 Reset (although they both go beyond just HTML5 stuff). We've got a plethora of books to choose from that cover HTML5 and its related technologies. We've got shivs, galleries, and a physician to help heal your HTML5 maladies. And don't forget the official spec.
From my own vantage point — aside from a few disputes about what the term "HTML5" should and shouldn't mean — the web design and development community has for the most part embraced all the new technologies and semantics with a positive attitude.
While it's certainly true that HTML5 has the potential to change the web for the better, the reality is that these kinds of major changes can be difficult to grasp and embrace. I'm personally in the process of gaining a better understanding of the subtleties of HTML5's various new features, so I thought I would discuss some things associated with HTML5 that appear to be somewhat confusing.
Read more..."What? Another "Equal Height Columns" article? Enough already!" If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks. It does not use images, nor extra markup, nor CSS3, nor pseudo-classes, nor Javascript, nor absolute positioning. All it uses is border and negative margins. Please note that this article will also demonstrate different construct techniques and will brush up on a few concepts.
In this post we will build three layouts using CSS: a two column layout with no wrapper div, a two column layout with two vertical borders between the columns and a three column layout with a single wrapper. All layouts have coding examples and demos for your convenience.
When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.
Let's take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them. But before we get into !important declarations and how exactly they work, let's give this discussion a bit of context. In the past, Smashing Magazine has covered CSS specificity in-depth, so please take a look at that article if you want a detailed discussion on the CSS cascade and how specificity ties in.
One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.
Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.
Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials which help you get to grips with the techniques and sprite generators which help you create the graphics themselves.
Read more...
Opportunity: WellnessFX, a fast-growing health 2.0 company based in The Mission District in San Francisco, is looking for an engineer with skills in front-end…
YAGER is currently seeking a talented and experienced Game Systems Designer to join our pre-production team of yet unannounced title. Join us in shaping the direction…
With a commitment to quality content for the design community.
Smashing Media Made in Germany. 2006-2013. Impressum