Posts Tagged ‘CSS’

We are pleased to present below all posts tagged with ‘CSS’.

Techniques For Gracefully Degrading Media Queries

Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.

CSS3 media queries, which include the browser width variable, are supported by most modern Web browsers. Mobile and desktop browsers that lack support will present a subpar experience to the user unless we step up and take action. I’ll outline some of techniques that developers can follow to address this problem.

Read more...

The Neglected Necessities Of Design

Right now is an exciting time to be in the Web design community. Every month we seem to stumble on a new thought-provoking way to put our expanding tool set to use for our clients and the patrons of the Web. Many designers are chomping at the bit to litter their websites with new CSS, advanced HTML and ultra-engaging JavaScript. By all means, go out and use every last declaration and element you can get your hands on. Abusing, misusing and taking advantage of everything the Web could possibly offer is the best way to learn about what we can and can’t and should and shouldn’t do in future.

screenshot

Whether you are excitedly exploring responsive design, diving headlong into accessibility, building a typographic masterpiece or seeing what level of interactivity you can achieve, all of your Web-based projects should have a common core. All of the new methods being discussed in the design community daily might be overwhelming, but no matter what route you ultimately take, almost any Web project you embark on today should start with solid HTML and logical CSS. This may seem like common sense, but the fact is that very, very few websites today benefit from sensationally optimized HTML and CSS and appropriately applied JavaScript.

Read more...

Dear Clients, The Web Has Changed. It’s Time To Use CSS3 and HTML5 Now.

Since hearing about HTML5 and CSS3, then later reading Hardboiled Web design by Andy Clarke, I have been working on a presentation to help introduce these development methods to my clients. If all i said to them was “these are the latest development methods, but there will be visual differences”, I’m sure you can imagine the response I would receive.

browser differences

Most of the clients I have these days tell me they want the following: HTML to validate as strict or transitional, CSS to validate, site to be Accessibility level 2+ and last but not least, design needs to look the same across all browsers. They have learnt this information from us (developers and agencies) over the last 10 years of us educating the world on best practice. Now we need to re-educate them and it wont be easy! Most people steer away from things they don’t understand out of fear of the unknown.

Read more...

Create An HTML/CSS Mobile Web App Using Sencha Touch

The world of mobile app development is quickly becoming a crowded and complicated space, especially for those outside of the development niche. “Which development platform should I use?” “Do I go native or Web-based?” “Which devices should I plan for?” “Can I build my mobile website by hand or should I use a pre-built package?” The questions are endless.

screenshot

As a designer, my job is to help my clients answer these questions. I try to stay in the category of “knowing enough to be dangerous,” and I keep tabs on the latest mobile development trends, one being the growing popularity of mobile Web apps.

Read more...

Learning To Use The :before And :after Pseudo-Elements In CSS

If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene — and for good reason. In particular, the experiments of one blogger — namely, London-based developer Nicolas Gallagher — have given pseudo-elements quite a bit of exposure of late.

screenshot

To complement this exposure (and take advantage of a growing trend), I’ve put together what I hope is a fairly comprehensive run-down of pseudo-elements. This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.

Read more...

Behind The Scenes Of Nike Better World

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It's been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.

screenshot

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We'll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we'll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

Read more...

Five Useful Interactive CSS/jQuery Techniques Deconstructed

With the wide variety of CSS3 and JavaScript techniques available today, it's easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we'll walk through five interactive techniques that you can start using right now. We'll cover animated text effects, animated images without GIFs, mega drop-down menus, fancy slideshow navigation and animated icons for the hover state of buttons.

Five Useful Interactive CSS/jQuery Techniques Deconstruted

Besides learning how to accomplish these specific tasks, you'll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

Read more...

↑ Back to top