Smashing - RWD - Code Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The Concept Of Responsive Web Design Ethan Marcotte1 wrote an introductory article about the approach, “Responsive Web Design992,” for A List Apart. Transplant this discipline onto Web design, and we have a similar yet whole new idea. Adjusting Screen Resolution
3 Reasons You Shouldn't Build a Mobile Website As the mobile market explodes exponentially, one question passes through nearly every marketer’s head at some point: Should you build a mobile website? Unfortunately, many took a premature leap of faith onto the most popular bandwagon: building a separate website optimized for mobile. After all, people don’t use mobile devices like desktop computers, therefore, you should build a website just for the unique mobile experience, right? Wrong. Here’s why: Top 3 Reasons You Shouldn’t Build a Mobile Website: Increased Cost/Maintenance: A mobile-specific website results in a whole new body of content, programming, SEO and more to manage. Just to be clear, these are the reasons why not to have a separate site for mobile, NOT reasons why you shouldn’t pursue the amazing opportunity that mobile presents. It’s simple, really: (re)design your main website using responsive web design. What Is Responsive Design? At its core, responsive web design is, well, web design that responds. Feeling Responsive?
RWD - Beginners Guide Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future. Free trial on Treehouse: Do you want to learn more about responsive web design? Over the past year, responsive design has become quite the hot topic in the web design community. What is responsive design? Let’s just get right into it: Believe it or not, the Treehouse blog that you’re reading this article on is actually a responsive design! It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. So, what is responsive design exactly?
How To Create A Silo Structure In WordPress Siloing is an SEO technique that creates strong keyword related themes on your site, improving the relevancy of your site in the eyes of the search engines. In this article, I cover the basics of the silo model and then show you how to implement siloing in WordPress. Note: This is a companion piece to my Siloing Your Site For SEO Success talk at WordCamp Sydney in July 2012. The video can be seen at the bottom of this article. Background – Website Structure Humans have been trying to organise things since day one. It’s confusing for people and it’s confusing for search engines. Although that’s an extreme example, many websites have a less than optimal structure. Information architecture (IA), which is about organising content to give a better user experience (UX)SEO, which includes organising content to give a better signal to search engines There are occasionally tensions between their competing needs, but for the most part SEO and IA align nicely around website structure. Siloing Theory
10 Excellent Tools for Responsive Web Design By Jason Gross So, you’ve decided to venture into the creation of responsive web designs. Wonderful! With the browsing landscape diversifying into mobile devices, netbooks, desktops and so forth, responsive web designs allow web designers to provide different layouts for specific devices (based on screen size and browser features) giving site visitors an optimal user experience. So now, you’ve determined that it would be beneficial to create responsive web designs. What tools can help you get the job done? Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. I divided the tools in this list into four categories: Responsive typographyFlexible imagesResponsive web page layoutsTesting and cross-browser support Responsive Typography First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography. 1. 2. Another jQuery plugin, FitText helps you make your headlines responsive. 3. imgSizer.js
How To Silo Your Website: The Masthead One of the more powerful tools an SEO can use when setting up or fixing an existing website is siloing or themeing. However, when I mention this to beginner or intermediate SEO’s, they are often confused about how and where to start. In this multi-part series, I’ll be giving you some examples of how I use the technique. Sometimes it’s helpful to imagine what you would want your site links to look like in the SERPS … Let’s take a step back and understand what siloing is. First step: determine your top 4-6 keyword terms. HotelsVacationsTravel TipsInformation Ideally these would be the words, tabs, or options in the masthead of the site. Disney World Hotel ReviewsDisney World VacationsDisney World Travel TipsDisney World Information … there is no good reason for any search engine to crawl your shopping cart … ever … Ok now those terms are ideal and exactly what we want to have in our sitelinks. You are going to need a link to the homepage for usability purposes. So what are the takeaways here:
A List Apart - RWD The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture .
Redirecting non-www to www with .htaccess | dense13.com If you want to redirect all non-www requests to your site to the www version, all you need to do is add the following code to your .htaccess file: This will redirect any requests to to There are several benefits from doing that: It will avoid duplicate content in GoogleIt will avoid the possibility of split page rank and/or split link popularity (inbound links).It's nicer, and more consistent. Note that if your site has already been indexed by Google without the www, this might cause unwanted side effects, like lost of PR. Something nice about the code above is that you can use it for any website, since it doesn't include the actual domain name. If you want to do the opposite, the code is very similar: RewriteEngine On RewriteCond %{HTTP_HOST} ! In this case we are explicitly typing the domain name.
Ethan Marcotte Responsive by default - Blog | Andy Hume If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers. Despite the fact that people have been arguing against this for years (please excuse the uncool URI). Mark Boulton describes current thinking on this as a shift, rather than a trend. The web has a way of fixing its bad habits over time. What is responsiveness? Responsiveness is what a website does when it's loaded into an unknown browser on an unknown device by an unknown individual. Optimising for One Web, instead of specific browsers/devices/individuals, is an ideal that is a profound part of being a web developer. You'll note however, that I describe it as an ideal. To begin with there are a bunch of things we can't easily feature detect.
Content Choreography The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past. Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. As I step into my 3rd responsive project with Paravel, I’ve made a habit out of picking apart media-queried sites I happen across, noting how things get rearranged at various widths. Content Stacking This is unavoidable. Another approach could be to interdigitate content by folding elements into each other as the view narrows (fig. b). The Content Change-up Another thing I’ve noticed is that media queries are being used to significantly redesign pages. De-compartmentalize the Workflow
Designing for a Responsive Web The web as we know it is changing. In the past, designers and developers only had to concern themselves with one medium: the computer screen. In recent years, however, a plethora of fully internet-enabled devices with scores of different shapes and capabilities have cropped up, meaning that we now have to design our websites to fit comfortably in as many screen sizes, shapes, and resolutions as you can possibly think of. Our old fixed-width layout approach is out of the question now. What is Responsive Web Design? The idea of Responsive Web Design, a term coined by Ethan Marcotte, is that our websites should adapt their layout and design to fit any device that chooses to display it. In his book, the aptly titled "Responsive Web Design" he outlines the three parts to a responsive website: A fluid gridFluid imagesMedia queries However, it is important for you, as a designer, to understand the basic concepts of RWD so as to better design websites that will become responsive when coded.