• 19 Jan

    Designing a new website is great, but not everyone loves taking their PSD designs and converting them into actual, working HTML and CSS.

    In fact, there are some designers who positively hate it (and often get someone else to do that part for them rather than suffer through it themselves).

    A PSD to HTML service can be a huge time-saver even for designers who don’t mind coding their own designs. After all, the coding of a basic theme or template can be time-consuming even though it’s a relatively simple process.

    Why not outsource it so you can focus on the creative aspects of creating websites? Read more

  • 22 Jul

    An application programming interface (API) is a set of rules and specifications that software programs can follow to communicate or ‘interface’ with each other.

    As developers are well aware, there are hundreds of APIs out there for doing almost anything you could imagine online. Some are better than others, and some are definitely more useful than others.

    Below are forty of the most useful APIs out there. The included APIs will let you do everything from shortening a URL to displaying a book preview on your site to interacting with your Twitter account, and everything in between.

    Please share with us which APIs have you found most useful and feel free to recommend others that we may have missed… Read more

  • 17 May

    Bookmarklets are special links that users can add to their browser’s favorites.

    These special links include code (i.e. not just a target URL), and they trigger various kinds of useful functionality, allowing you to modify and extend any web page.

    Once you begin using and building your own, you will no longer see web pages as static elements that you have no control over.

    With bookmarklets, you have the power to bend any web page to your needs. Read more

  • 26 Apr

    HTML5 LogoIt’s a classic case of Photoshop versus website. Existing wireframing and prototyping tools are incapable of accurately reflecting the environment of the web.

    They produce static designs that can’t be seen through the variable known as the web browser. And when you build the final website, some elements won’t look exactly like their draft counterparts, and the client will notice those minor differences in fonts, positioning, etc.

    You may be more comfortable with a graphics program, and rendering the design iterations may seem to take longer if you have to hand-code the HTML.

    However, the advantages of creating a wireframe in HTML from the start are beginning to outweigh the alternatives: not only do we have new layout elements in HTML5 and more powerful selectors and styling in CSS3, but by combining them, we can throw together a simple layout quickly.

    We’re hearing a new company every day (37Signals, Atomiq and others) explain its adoption of HTML prototyping. Their main reason is that the process is surprisingly easy when you have the right tools in place. You’re about to learn how easy this process can be, and when you’re done, you’ll have a head start on your next build. Read more

  • 1 Apr

    Not every designer wants to (or knows how to) code. Sometimes all you want to do is design, and leave the coding to someone else.s

    Or maybe you’ve just taken on more design work than you can handle, and don’t have time to code everything yourself.

    In either case, PSD to HTML services can be a great way to save time and energy, while still getting a hand-coded design.

    In this post, we’ve compiled a hundred PSD to HTML services that might be just what you need for coding your next project.

    Some of the services below also offer CMS implementation and other add-on services. The better services take as much time and care with converting your design as you would take yourself, so be sure to shop around and compare not only on the basis of price (which starts as low as $29), but also quality and service.

    When picking a service like this, make sure you find a company that either provides samples of their work or a money-back guarantee (preferably both). A non-disclosure agreement is also a good idea, especially if you’re using them for client work. Read more

  • 10 Mar

    Web Culture - Grid Wireframing and Design PrototypingThe semantic web has brought on a new generation of Internet technology. As designers and developers work together to redefine the rules of the web, the number of open-source projects and third-party APIs continues to grow.

    The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected.

    Both sides provide interesting arguments. These ideas have become part of a unique web culture characterized by influential design rules and open-source projects.

    The grid isn’t a master key to perfect design. However, math has proven that certain design specifications provide the best ratios for page elements and layouts. If you’ve heard about any of this before, you may be familiar with the many options that grid-based layouts offer designers. Read more

  • 25 Jan

    CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized.

    There are hundreds of tutorials out there to teach designers how to use it, but unfortunately a lot of them cover the same ground.

    And some of the tutorials teach designers to do things that they might not think of as useful, though the techniques can usually be adapted to fit a project perfectly.

    Below are more than fifty awesome CSS3 tutorials. Many are strictly CSS and HTML  based, while others also incorporate JavaScript.

    If you have a favorite technique or tutorial that’s not included below, please share it in the comments! Read more

  • 25 Nov
    thumb

    The way you handle color in your web designs is about to change. Perhaps you’ve been playing around with hexadecimal color values since you were a wee web-babe; if you were, get ready to to grow up fast. CSS3 has arrived, and your palette is about to get a whole lot bigger.

    Compared to what’s coming, it’s sas though designers have been color-blind, working with only a small part of the chromatic spectrum. No, new hues will not be added to the rainbow.

    What will happen is that color values will be defined in new ways, the entire spectrum of opacity levels will be added and gradients based on pure CSS rather than images will be thrown in, too.

    Some forward-thinking websites, such as the impressive 24 Ways to Impress Your Friends, are already playing around with RGBa for text and background color effects—and the results are great. Read more

  • 22 Nov
    thumb

    Web standards should be a driving force behind the work of any designer or developer. They provide a scale against which to measure the quality, structure, syntax and methodology of design work.

    To explain the benefits of web standards, I’ve compared on my own blog the landscape of the web today with that of 10 to 15 years ago.

    Questions related to cross-browser compliance and the necessity of testing extensively before launching still linger, but the standardization of DOM, (X)HTML, CSS and a number of other technologies has made the digital world much more predictable.

    When coding a standards-compliant website, we can be reasonably certain that it will render the same in Firefox, Safari, Chrome, Opera and even Internet Explorer (from version 7 up, of course). Inconsistencies do arise, but anyone who has stood on either side of the past decade of web design and development would surely recognize the value of standards. Read more

  • 16 Nov

    thumbToo often as developers, we ignore a crucial last step before launching a website: optimizing for performance.

    Most developers now recognize that organized, valid code ensures maintainability and compatibility.

    Anyone who doubts this merely has to speak to a developer who has picked up work on an old website that is littered with unorganized, uncommented spaghetti code.

    Just as preparing our code to be read by other developers is important, so is preparing our code to be read by browsers. Great web development might start with great organization, but it ends with great optimization.

    This article introduces best practices of front-end performance. Read more

  • 9 Nov

    Streamlined CSS StylesCSS can be compared to a sculptor’s tool set; like sculptors at work, we designers use CSS to create structured layouts of websites.

    Over the years, this process has become more organized; rules have been put in place to create best practices of coding.

    In this article, we’ll take a look at some ideas you can use when writing style sheets to speed up your code.

    Efficient CSS is easy to manage and easy to read and can be a resource for web designers. Getting organized is a big step, but using CSS can be a little more complicated than that.

    As you read this article, keep your own preferences in mind; the best advice you can get from any developer is to find your own way of working. Combine a few of the techniques here with your own methods to get the most benefit. Read more

  • 1 Nov
    thumb2

    By now most bloggers using WordPress should have upgraded to the latest version of WordPress which is officially at version 3.0.1.

    Along with updates to the core framework, when version 3.0 was released the WordPress team also added a new default theme, replacing the now obsolete Kubrick. The new theme, as most of you are probably aware, is called Twenty Ten.

    Not to sound too corny here, but from the first moment I laid eyes on Twenty Ten, I fell in love with it. But I’m not talking about theme’s visual design (which is pretty humdrum); I’m talking about the front-end code, which has seen a number of improvements over the previous default theme.

    In this article, I’ll discuss some of these improvements that I feel are worthy of examination and imitation.

    And keep in mind that this is not a discussion of the features of the theme itself; this is a discussion of the structure and organization of the HTML and CSS and how it provides an excellent model to follow for front-end developers. Read more

  • 30 Sep

    Sketching Code Prototypes for Design WireframesWorking as a designer day after day can be laborious. Luckily, the field has expanded, and so the process has become simpler. Many free tools and resources are out there.

    Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.

    They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.

    Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.

    In this post, we’ll go over coding a basic wireframe image in HTML and CSS and see how it can benefit the creative process. Read more

  • 31 Mar

    Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy.

    But they can also generate a surprising number of superfluous elements.

    The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables?

    Creating cleaner code means going beyond the framework and thinking about what it really represents.

    Read more

  • 15 Mar

    There aren’t many articles covering incompatibilities, or CSS differences in Firefox alone — and for good reason.

    Firefox has always done an excellent good job of supporting both CSS and JavaScript in a standards-compliant manner without too many awkward bugs.

    There are, however, a few CSS properties and selectors that aren’t supported by one or more of the versions released since version 3.0., which I will cover here.

    This article will cover bugs, inconsistencies, and nonsupport. So, if you’re having trouble with a CSS property or selector in Firefox and it’s not listed here, then you’ll probably have to rethink your layout and reconsider what the culprit might be. Read more

  • 5 Feb

    Though the methods used to gather website traffic statistics call into question the validity of the stats themselves, the fact is that some of your website’s visitors will have JavaScript disabled.

    You could divide your traffic sources into four broad categories:

    Search engines, mobile visitors, visitors using screen readers and visitors who have JavaScript turned off.

    When planning your information architecture and design, you must figure out how to deal with these special groups.

    I have assembled a few recent real-world scenarios to find clarity on the issue. Read more

  • 29 Jan

    Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet.

    Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.

    Also, following tutorials is easier if you have one next to you, with your code editor open on the screen; that way, you don’t have to switch windows every time to look something up.

    In this article we’ll point out 10 easy tips that will help you create better print style sheets.

    Read more

  • 18 Jan

    Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.

    A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.

    This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.

    Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.

    What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them. Read more

  • 20 Nov

    iPhone development can be intimidating, especially to someone who’s unfamiliar with Macs, or the way iPhone apps work.

    But with currently more than 100,000 apps officially available from the App Store, it’s kind of hard for a developer to ignore the potential market the iPhone provides.

    And there are apps for virtually anything you could think of, from games to productivity apps to horoscopes to news and more.

    Below are 70 tools, tutorials, and resources to help you get started developing your own iPhone apps. There’s everything from basic tutorials to templates to resource libraries to help you on your way. Read more

  • 12 Nov

    The beauty of being a web designer is creating a detailed, creative, and original web design in Photoshop, without having to (for the most part) think about how it will be coded.

    During the design phase, it’s all about the look, and either the coding can be taken care of later, or be outsourced to a developer.

    Either way, not thinking about the development usability or functionality is a great way for a designer to not feel limited in the design process.

    This is a great way of thinking, and can lead to the best designs. However, once it does need to be coded, we as designers are in a tricky spot.

    In this article, you’ll find a few simple tips that can help designers learn basic XHTML/CSS conversion efficiently for a quick-loading website that is accurate to the original PSD. Read more

  • 18 Aug

    CSS is the second-most-important thing you can master when it comes to web design, right after HTML.

    And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers).

    If you can imagine it, it’s likely someone has already figured out how to do it with CSS.

    Below are more than 250 resources for mastering CSS. While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd. Read more

  • 10 Aug

    Cascading Style Sheets (CSS) is the language of Web design, and the next generation of CSS design properties are just chomping at the bit to be released.

    Are you eager to start using them, but don’t know where to start?

    Although many of the new properties are not yet “official”, some browsers have already implemented many of the features of the coming CSS Level 3 specifications.

    The problem is that many browsers—most notably Internet Explorer—have not.

    The trick to using these new CSS3 features is to treat them as design enhancements. Read more

  • 22 Jul

    Cheat sheets and reference guides are useful for both beginners and advanced web professionals.

    They can be used to help you remember syntax or as a tool to aid in memorization.

    In this post, we aim to cover the reference guides for all of the most commonly used platforms, software and coding languages.

    Below you’ll find a compilation of the 30 most useful and well-organized cheat sheets, checklists and reference guides.

    If you know of a useful cheat sheet that we haven’t covered here, please share the link in the comments’ section at the end of the article.

    Read more

  • 20 May

    It’s really easy to find yourself wondering how your CSS got to be such a mess.

    Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

    Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

    Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache. Read more

  • 10 Feb

    In this article, we list several great applications for project and time management as well as collaboration between you and your clients. There are free and commercial options available.

    These project management apps are here to save you time, but they can also be very time consuming and not intuitive. If you have a team who works with you remotely, then this is an ideal choice. If you are a freelancer however, you will have to spend some time learning these as well as teaching your clients how to use and interact with the application.

    Let’s keep the cons aside and give the apps a chance, you can then see for yourself which ones will suit your needs best. Read more

  • 5 Feb

    Just when you thought you were done with IE 6 and its hacks and exceptions, now you’ve got a new browser to consider: Google’s Chrome.

    The good news is that Chrome is a lot more compatible with web standards than IE 5 and 6. However, Chrome has its own idiosyncrasies and bugs.

    No one knows if Chrome is here to stay, but it has already captured a surprisingly decent share of the web browser market in a short period of time.

    Here are some tips to get your web pages working in Chrome and hopefully looking the way they were designed to look.

    Read more

  • 20 Dec

    Ready for some WordPress development on your Mac? First, you need to be running Apache, MySQL, and PHP.

    Although Mac OS X comes with Apache and PHP, you don’t want Apple’s automatic software update to break your development environment by changing your working versions of PHP and Apache. Plus, do you really want to spend time tweaking MySQL?

    In this guide, I will show you how to quickly install and configure a working WordPress environment including Apache, PHP, and MySql. Read more

  • 11 Nov

    In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the “Submit” button to send/get the information, wait for the server to respond, and then a new page will load with the results.

    Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly. With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.

    With an HTTP request, a web page can make a request to, and get a response from a web server, without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background. Read more

Home| Advertising| About| Contact

© 2012 All Rights Reserved