jQuery: The Write Less, Do More, JavaScript Library Mobile Site vs. Full Site Based on usability testing of hundreds of sites, the main guidelines for mobile-optimized websites are clear: Build a separate mobile-optimized design (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites. A mobile app might be even better— at least for now.If mobile users arrive at your full site, automatically show them the mobile version. Sadly, many search engines still don't rank mobile sites high enough for mobile users, so people are often (mis)guided to full sites instead of the mobile ones, which offer a vastly superior user experience.Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site. Mobile-Optimized Sites Why Full Sites Don't Work for Mobile Use
Why Every New Website Will Use Bootstrap | minimaxir So, I decided to spruce up the blog a little bit. The old WordPress theme I had used, Graphene, had a lot of useful functionality, such as a featured post slider and a topbar for placing social media buttons, but the theme itself didn’t make the blog look unique. Even with a few CSS tweaks to add custom styling, such as forcing the titles of blog posts to be in all-capital letters, (which makes users more likely to click them!) Therefore, I resolved to develop and design a unique WordPress blog theme effectively from scratch, in order to ensure that my blog had a truly distinctive look and functionality. About Bootstrap Twitter Bootstrap is primarily developed by Twitter employees Mark Otto and Jacob Thorton (you can tell they work for Twitter because they are one of the lucky few with a 3-character Twitter handle), developed primarily to speed up the development of new websites, and is open-sourced on GitHub for anyone to contribute changes to the project. Bootstrap on Minimaxir
Bootstrap customization and responsive design | lynda.com tutorial Recently I’ve been using a really awesome framework called Bootstrap to put small websites together. In this article, I’m going to guide you through the basics of the Bootstrap installation process, and how the Bootstrap framework can be customized for a responsive web design. The end result of this tutorial will be a custom Bootstrap website (you can see the final website here). Why Bootstrap? Bootstrap is a framework that provides an easy-to-use 12-column grid system for a 940 pixel wide container as well as a fluid layout grid that adjusts to the size of a browser. To put the benefit of using Bootstrap into perspective, consider how you go about building a website. Imagine how much quicker and easier your web build could be if you used Bootstrap to help you organize everything from designing site structure to defining site maps and building column structures. Let’s do this: Getting started on the Bootstrap web build Installing the Bootstrap framework is pretty easy. Downloading jQuery
jQuery UI - Home 10 points à retenir pour concevoir un site efficacement. Petit récapitulatif général des choses que j’ai bien du répéter une centaine de fois chacune lors d’échanges avec mes clients. Organisation, logique de conception, ergonomie, référencement, voici 10 points à ne pas oublier lorsque l’on veut réaliser un site. La plupart de ces petites choses semblent évidentes, pourtant pour aller vite, parce que cela met en évidences certaines lacunes qu’il veut se cacher, le porteur de projet est souvent tenté de les oublier. #ilnyaqueduvecu Définir des objectifs … et s’y tenir Quels que soient ces objectifs, ils permettent de se fixer une ligne directrice, d’éviter de se reposer 50 fois les mêmes questions lors de la rédaction, de la conception graphique, du développement. Exemples : définition des cibles prioritaires, des 3 couleurs de base de la charte graphique, de l’emplacement et textes des menus, des expressions-clés principales visées, etc. Mettre à plat l’arborescence du site Pas besoin d’outils compliqués, un tableur Excel peut suffire. Pourquoi ?
InJenius :: A blog about design, code, and life Since the day Twitter Bootstrap came out, it has been immensely popular. And recently, there have been more and more posts that either go on and on about how great it is, or how over-used it is. Here are two I saw on the front page of hacker news today: This is just a very small subset of the massive number of popular articles I’ve seen about bootstrap, and they all seem to come from one of two angles: 1) I am not a professional designer, and bootstrap is a lifesaver for me, and 2) I am a professional designer, and it makes me ill that it’s being used so often rather than a real custom designs. There is no way to stop people that have no idea how to design and no design budget from using bootstrap. I know that there is a better way, and I have been working on a tool that can be used by intermediate and advanced developers that will speed up development time significantly while avoiding the four major pitfalls of bootstrap, which are in my opinion: Give it a thought.
Bootstrap Form Helpers 20 Awesome Resources for Twitter Bootstrap Lovers Generators Bootstrap Custom Build Before diving into great third party Bootstrap resources, it’s worth pointing out a great little tool right from Twitter that allows you to completely customize an impressive range of Boostrap features so that you can create a custom build that’s perfect for your project. If you haven’t checked out Bootstrap in a while, you should give this a look because it’s new with Twitter Bootstrap 2.0. Not only can you use it to take an overweight download and transform it into something lean, you can also save yourself a lot of CSS work by customizing colors, fonts etc. before you even initiate the download. StyleBootstrap.info As with Twitter’s own tool above, this tool allows you to use a simple interface to customize various aspects of Bootstrap. The app itself is also more visual than Twitter’s generator and allows you to see what your styles will look like before you hit that download button. Beautiful Buttons for Twitter Bootstrappers Theming BootstrapStyler
iPhone CSS—tips for building iPhone websites 31 January, 2010 With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone – this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it's only ever on one resolution and on one OS. N.B. The practical upshot of this is that you need to do no cross-browser testing, and can use all the CSS3 you like. To start The first thing to remember when developing a site to be displayed on an iPhone is that it is very similar to designing a print stylesheet. Some people don't agree with browser sniffing, but you need to detect the iPhone somehow. This first bit of code is a PHP browser sniffing snippet, the actual CSS we'll use is not brought through via any server side code, we'll use some CSS media queries for that. <? We want people to save your site to their home screen... <? The home screen icon
Please stop embedding Bootstrap classes in your HTML! A few months ago, Twitter released Bootstrap, a UI framework for websites that caused such an impression that it quickly become the most followed project on Github. Its popularity is due mostly to the fact that it allows developers with weak design skills such as myself to quickly create an application that looks at worst adequate, and at best, quite attractive. I'm a huge fan. Bootstrap also appeals to developers because it's implemented in Less, a CSS preprocessor written in Javascript that you can run in your browser, allowing a comfortable developer workflow and compatibility with sites written in Ruby, Python, PHP, or any other technology you can make web applications with. But along with Bootstrap has emerged an ugly, insidious and destructive developer antipattern: embedding Bootstrap's CSS classes directly in HTML. Let's see what these classes look like: <div class="row"><div class="span6">... What's wrong with this? Quoting the W3C: This is why table-based layout fell out of favor.
Build a simple contact form using HTML, PHP and Bootstrap | Ross Tanner Hello and welcome to my newest tutorial: Build a simple contact form using HTML, PHP and Bootstrap. We will be building a simple contact form which will firstly validate the content posted then if successful, send an email with the details. Difficulty: Easy Before starting this tutorial I will assume you have a basic knowledge of both HTML and PHP, and also have setup a working web directory. We will be working with the CSS framework Bootstrap (by Twitter) to style the form. Here is what we will ultimately be creating: View Demo. So, where do we start? <! <! If you know how HTML forms work then you can see in the action attribute that the data will post to contact-form-submission.php. Let’s now create the PHP being the data capture and email sending. This code may seem quite confusing to a new developer, so I’ll go through it line by line and explain what the hell is going on. Firstly we will check that the parameter save is sent to this file. The name is not empty. <! <! That’s it!