background preloader

Performance & Organization - An Advanced Guide to HTML

Performance & Organization - An Advanced Guide to HTML
Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way. The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Both of which can be sizeable concerns not only for developers but also users. Additionally, taking a few small steps to improve the performance of a website can pay off in dividends. Strategy & Structure The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Style Architecture The architecture outlined above includes three directories, all with individual groups of styles. Object Oriented CSS Choosing a Methodology

The Responsive Web Design War Strategy It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development in 2013. That’s reasonable too, since RWD is currently the only sounding approach that deals with any device resolution universally and effectively. It tries to unite this chaotic browser-based universe littered by the fragmentation resulted from hardware business competition. (Image Source: Michael Schmid, Subtle Patterns) But alas, Responsive Web Design is not the messiah you’re seeking, for it has its own range of imperfections. Since we strictly practice the philosophy of ‘Make Design, Not War’, today we are just here to explore 5 core disadvantages of Responsive Web Design, and the respective arguments and solutions to lessen the destructive consequences that designers and clients are forced to bear. Recommended Reading: 50 Useful Responsive Web Design Tools For Designers 1. The first rule to successful web design: make it as fast as possible. (Image Source: Seth Waite) 2. 3.

20 Free E-books For Web Designers E-books are great way to learn more about web design. E-books can truly provide you a fountain of knowledge of information and there’s a lot to be learnt. The beauty of ebooks is that there short and insightful not as a long as a book but not as short as a blog post. This blog post we have collected a personal collection of well of thought out web design related ebooks, which can be downloaded and read all for free. If your a tablet owner i would certainly recommend putting them on your ebook to read. There’s not too many great ebooks currently out their which are available for free, you should certainly take advantages of this post and read one of the ebooks listed in the post. I hope you enjoy the blog post and we would love for you to share your favourite free ebook featured in are post, or recommend any good free ebooks which we may have missed out. 1. 2. Web Designer’s Success Guide is the definitive guide to starting your own freelance Web design business. 3. 4. 5. 6. 7. 8. 9. 10.

Code a Spinning Circular Menu With CSS Don’t be a square, break outside your boring box and try on a circle for size. Today we’re going to build a circular navigation menu that spins to different points as the user hovers over an anchor. Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works. Launch Demo – Download Files Step 1: Structural HTML Before we write a single character of HTML, we have to figure out the structure of what it is that we’re building. Basically, each of the rectangles at the top are tied to one of the four little circles inside of the big circle. Every time I try to pull off a remote hover, it takes me a few tries to get the structure just right. Let’s say that we put this structure into place with the idea that we wanted a hover over the anchor to change the color of the paragraph. As it turns out, this simply doesn’t work. So what do we do? Application Take a Look!

Blogs - Internet blog - BBC TV Channel Homepages: Responsive Design 65 Best Free Fonts From 2012 Font compilation roundups always seem to go down a treat with our readers. This post we have been on a scavenger hunt all over internet, in search of all the best fonts which were created in 2012. The post includes over 65 fonts perfect to use in print and web design projects. Sit back and download some pretty sweet fonts. I hope you enjoy the post, and would love for you to share some of your favorite fonts in the comments section below. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. odstemplik 14. 15. 16. 17. 18. vezus 19. 20. 21. 22. 23. 24. 25. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 40. sn Blinds 41. 42. 43. 44. 45. 46. 47. 48. 49. akadora 50.

All About Cubic Bezier Curves & Transitions In the last post, we looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves. In short, they let you define exactly what path your animation will take, and thanks to some awesome community tools, they are extremely easy to use (No maths required at all). This gives you total flexibility with your transitions. One of the best tools is the free Cubic-Bezier.com by Lea Verou. It lets you make new curves and see them in action just by dragging the handles. The syntax is simple too. The linear part is actually a shortcut though. For now, you could rewrite that line to use the cubic-bezier function and get the exact same animation: That one line can now be used in any transition, and to tweak the animation, all you need to do is change those 4 bracketed values. What Is This Graph? Let’s take a look at the linear graph, and see what it means. The Ease Graph

Progressive And Responsive Navigation Advertisement Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments. A Common Structure Below is the HTML structure of a navigation menu created by WordPress. Please note: Any ellipses (…) in the snippets below stand in for code that we have already covered. Our navigation, unstyled. Our Tools CSS ResetHTML5 elementsLESS CSSjQuery CSS Reset Resetting our CSS styles is where we’ll start. HTML5 and CSS3 Elements We’ll be wrapping the menu in HTML5’s nav element, which is one HTML5 feature that we should be using right now. CSS3 will give our menu the progressive feel we’re looking for. jQuery

25 Free Must Download Design Programs 25 free must download design programs, the article features a range of different design programs including alternative programs for some of the most popular design programs such as Photoshop, flash and illustrator. A great collection of programs available for free which is perfect while currently suffering from a recession. Image Editing 1) Paint.net Paint.NET is free image and photo editing software for computers that run Windows. GIMP is the GNU Image Manipulation Program. 3) Xara Xtreme Xara Xtreme is quite simply the best value and fastest all-in-one graphics package you’ll find. 4) Active Pixels Great free app which is very similar to Photoshop. 5) PaintStar PaintStar is a versatile digital image processing software suitable for such tasks as retouching of photographs, composing and authoring images, image morphing, screen capture, and displaying image thumbnail in Windows Explorer context menu. 6) Picasa 3.1 Build 71.43 7) Art weaver 8) VCW VicMan’s Photo Editor 9) Photo Pos Lite 13) Karbon

Perform a Split Reveal With CSS CSS can pull of a lot of really great image tricks: size manipulation, desaturation, even blur. One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS. Today we’re going to code up a work around that allows us to achieve this very trick without an ounce of JavaScript or extra files. Sneak Peak: Launch Demo Hat Tip to Kyle Foster Recently, developer Kyle Foster created a nice little jQuery plugin with an effect that I really like (shown here). As you can see, it’s a great little piece of UI. Step 1: Format Your Image CSS allows us to apply multiple background images to a single element. The trick to pulling this off is to split your image in half in Photoshop before you embed it. The workflow to do this goes like this (feel free to tweak the dimensions): Step 2. This div has two classes: reveal and plug. Step 3. Step 4. Step 5.

Children's Museum Gets Responsive Children’s Museum Gets Responsive by Matt Griffin At some point in the last five years you may have visited the website for the Children’s Museum of Pittsburgh. If you had visited on your smart phone or iPad, you’d have been greeted with Flash menus that rendered the site inoperable. A couple of weeks ago, we quietly launched their new site. MenusHorizontal layouts are a useful and highly conventional approach to main navigation design. The Children’s Museum agreed that on smaller screens, it would be fine to display the four most important items (whichever were arranged first in the CMS), followed by a dropdown “More” menu. Calendar Calendars often employ table-based layouts. Both views come from the same semantic markup, with events entered by the site administrator through a single point in the CMS. Grid OK, this is where I get significantly more nerdy. And then we can apply column attributes with the following mixin: So now we can simply apply column widths to containing elements.

Related: