web design Archives - The Site Slinger

How to Create a High-Performing Real Estate Website: 5 Key Components

Are you considering creating a real estate website? In this post, we will delve into the reasons why investing in a real estate website is essential, explore different development methods, and highlight the key features that every property website should possess.

While physical contact with clients remains vital for real estate agents, it’s important to acknowledge that the majority of people looking to buy, sell, rent, or lease properties begin their search on websites containing property listings. Therefore, if you own or are planning to establish a real estate agency, it is imperative to recognize that a website is not merely a luxury but a necessity.

Why Building a Real Estate Website Should Be Your Top Priority

There are numerous compelling reasons to allocate your resources toward building a real estate website. Here are some of the most significant ones:

Enhances Credibility: A well-designed real estate website positions your agency as a knowledgeable specialist within the local market. Displaying testimonials, reviews, and any awards or certificates you hold instills trust in potential clients.
Expands Reach: Unlike the traditional approaches, a website enables you to reach a much broader audience. Newspaper ads, magazine features, and television commercials may be less effective and more costly compared to online marketing strategies such as pay-per-click campaigns, vlogs, blogs, social media, and affiliate links.
Improves Conversion Rates: A compelling real estate website presents property information in an engaging manner through high-quality photos, videos, virtual reality (VR), augmented reality (AR), and other modern technologies. This means that clients often do not need to meet an agent in person and can ask questions through live chat. This saves you time and effort while generating leads effortlessly.

In addition to boosting credibility, effortlessly generating leads, and promoting your agency to a larger pool of potential clients, a real estate website allows you to stay ahead of competitors in your niche or, at the very least, remain on par with them.

Now that you understand the significance of a website for your business, let’s explore the three main approaches to building one.

3 Common Approaches to Real Estate Website Development

Approach #1: Custom Development – Unleash Your Creativity

For those looking to create a real estate website that stands out, custom development is the way to go. This approach involves hiring a professional real estate website developer or collaborating with a development agency. While it may be the most expensive option, the investment is well worth it.

With custom development, you have full control over every aspect of your site, from image quality to search filters. You can have a unique theme that sets you apart from the competition. Plus, you’re not reliant on third-party vendors, so making changes or adding features is a breeze.

Approach #2: The Golden Mean – Use WordPress

Another popular option for real estate website development is using a content management system (CMS) like WordPress. WordPress offers easy setup and administration, with a wide range of themes and plugins available. You can customize your property website to include any functionality you desire, from search capabilities to security measures.

While WordPress requires some expertise, our team is here to help. We can assist with everything from UI/UX design to database optimization and custom feature development.

Approach #3: DIY Website Builders

If conquering the world isn’t your aim and you simply need a website to advertise a single property, there’s an option for you – a lego-like tool like Squarespace. Unlike the more advanced methods we discussed earlier, these tools provide basic functionality and a generic appearance.

With a website builder, you don’t need to be a tech wizard to create a real estate website. Just drag and drop elements to their desired locations on your pages, and make adjustments to customize their behavior.

However, these “one-cell” tools have their limitations when it comes to building large, feature-rich real estate websites:

Adding new functionality or changing the design is often difficult or impossible.
Your website may end up looking like just another bird in a crowded chicken coop, even with some theme customization.
You’re restricted by the capabilities of the tool. If you require a specific business feature that isn’t available, you won’t be able to add it.

Therefore, if your real estate agency is serious about outperforming the competition, we recommend the custom approach. But regardless of the method you choose, there are certain essential components that every property website should have. Let’s explore these next.

The Essential Elements of a Real Estate Website

Efficient Property Searching

Source

When designing a real estate website, it is crucial to provide users with a fast and convenient way to search for specific properties. Implementing search filters or fine-tuning options is essential to ensure a seamless experience. These filters should include common parameters such as price, location, and floor space, as well as additional options based on local market demands.

For instance, if there is a concern about industrial objects in the area, consider adding a checkbox filter for that specific requirement. Additionally, offering the ability for registered users to save their search results can help attract more leads.

Informative Property Descriptions

Source

While text descriptions are important, a real estate website should go beyond that. To engage users effectively, high-quality visuals are crucial. High-resolution images are essential components of property listings.

However, it is important to optimize the images for web use to avoid impacting website performance. Using plugins or consulting with WordPress development experts can help achieve this.

To enhance property listings further, consider incorporating features such as interactive maps to showcase the property’s location and amenities, videos that provide a comprehensive view of the property, and AV/VR technology to offer an immersive experience for potential buyers. These additional features can elevate the overall user experience and make the website stand out in a competitive market.

A Tool to Determine the Value of a Property

Source

A top-notch real estate website should feature handy calculators.

No matter how enticing a property may appear, potential home buyers would likely hesitate if they couldn’t afford it. On the contrary, if they discover that the price aligns with their budget, you can expect a higher conversion rate.

That’s why it’s prudent to incorporate a tool for calculating property value when designing a real estate website. There are various types of calculators available. For example, one allows users to determine whether purchasing a home is more or less expensive than renting it for a specific duration.

Customer Testimonials

Source

Trust is paramount in the real estate industry. So, how can you instill trust in your prospects? By highlighting what your clients have to say about your services. Therefore, when developing a real estate website, make sure to include a dedicated section for testimonials.

Make this section dynamic, rather than static, so that you can include as many reviews as possible. If feasible, consider adding a photo of the respective homebuyer or seller who provided the feedback.

If you have received awards, certificates, or other credentials that validate your expertise and experience, consider including their logos or photos too.

Effective Calls-to-Action

Source

Incorporate a call-to-action button with each property description.

When we talk about “something to act on,” we’re referring to a call-to-action (CTA) button. After conducting research on your real estate website, it should be easy for clients to connect with you or an agent. Therefore, include a CTA button not only in the header but also within each property description. This will significantly increase your chances of generating more leads.

Choose appropriate wording for the button, such as “GET IN TOUCH,” “LET’S MAKE A DEAL,” or other compelling phrases. Opt for a color that stands out from the rest of the page or section. Additionally, provide your contact information alongside each property description on every page, not just in the footer and header.

Final Thoughts

Creating a real estate website is a smart move for any agency. It serves as a powerful marketing tool that attracts new leads, converts them into clients, and adds credibility to your real estate business.

You have the option to use do-it-yourself tools or a CMS to build a simple real estate website. However, if you want to maximize the value of your site, consider custom development. This will give you a unique-looking resource that meets your specific business needs and gives you full control.

A good real estate website should allow home buyers and other participants to easily search for properties and access detailed listings with high-resolution images, quality videos, and maps. It should also provide them with the ability to evaluate their preferred property, read reviews from other clients, and effortlessly contact an agent.

In short, when creating a real estate website, always prioritize the needs of your prospects. Make sure they can navigate the entire process effortlessly and reach a successful deal without any hassle.

How to Use Photoshop Layer Comps

If you’re one of those designers who prefer to design within a single master PSD file, while still being able to reuse elements and see design variations, then you’ll find the Layer Comps feature of Photoshop particularly useful. For comparing different design variations, don’t waste your time remembering the different layer positions, visibility states, and layer style settings. Keep your workflow efficient and your file easily deciphered by your developer, client or project manager.

For comparing different design variations, don’t waste your time remembering the different layer positions, visibility states, and layer style settings. Keep your workflow efficient and your file easily deciphered by your developer, client or project manager.

Enter Layer Comps

Layer Comps are an underused and incredibly helpful feature Adobe introduced in Photoshop CS. Layer Comps, or compositions, allow you to create and manage variations of your design without having to resort to multiple PSD files. Simply put, it gives you a snapshot of a state of the Layers panel. For web designers, this lets you clearly define what a page state should look like. It will also allow your developer the convenience of quickly moving between views, or referring back to the original state, without toggling the visibility of layers or shifting layer positions.

How to create a Layer Comp:
1. Adjust your layers into the design variation you want to save
2. Open the Layer Comps window (Window>>Layer Comps)
3. Click the ‘paper’ icon to “Create New Layer Comp” and name it
4. Repeat these steps for all variations you’d like to later view and manage

Options you can set for Layer Comps:
• Layer visibility – show or hide
• Layer position – save the position of each layer within the design
• Layer appearance – save the Layer Styles settings applied to each layer

We recommend using the Layer Comps feature of Photoshop for your PSD to HTML projects so you can communicate your design more clearly, and developers can easily see the variation or different page states. If you wanted to later, you could even save the Layer Comps into individual PSD files (File>>Scripts>>Layer Comps to Files), so there’s no loss in flexibility there. The organization of your designs and shareability of the PSD file will be improved, and your client, project manager and developer will love you for it!

You can read more about the specifics of using layer comps directly from Adobe, here.

7 Pro-Tips for Web Design

Here at The Site Slinger we live and breathe web development – we’ve been experts in turning design to code since 2009! All too often, website design files get submitted to us missing some of the fundamental components for effective and efficient web development. Whether you are a designer working on a website for a client, or a client who isn’t sure what they need to get from their designer, following these pro-tips will get your design ready to be turned into code.

Here at The Site Slinger we live and breathe web development – we’ve been experts in turning design to code since 2009!

All too often, website design files get submitted to us missing some of the fundamental components for effective and efficient web development.

Whether you are a designer working on a website for a client, or a client who isn’t sure what they need to get from their designer, following these pro-tips will get your design ready to be turned into code by our team at The Site Slinger.

7 Pro-Tips for Web Design

DO design in Photoshop, it is the best for web design (sorry, Illustrator, Fireworks and InDesign fans!)

DO design all of the pages you want to see as HTML or on a WordPress site — We match your designs exactly!

DO design all animation states, javascript validation, button states (click, hover, off), modals and anything else you can think of. If you don’t see it in the design, we can’t see it to code it!

DO label and organize your Photoshop design “PSD” files — 1 page per PSD, organized into labeled folders and layers.

DO say “I’m not sure, I will have to check” to a client if you are unsure on complex functionality or implementation — Its okay to say “I don’t know” – that’s why we are here!

DO talk with your developer and spec out your project before signing off on designs.

DO ask questions and get to know your friendly Austin, Texas web developer. We are always happy to answer questions about turning designs into code!

Have a question about one of these pro-tips or want to know more? Chat with a Site Slinger from 8am-6pm CST here on our website, or contact us.

*Image courtesy of Wikimedia Commons, used under the Creative Commons license.

Design Rules for PSD to HTML

Want to make your development team love you? Learn how to design your PSD (Photoshop design files) into clearly labeled, appropriately layered files for PSD to HTML!

If you’re coding PSD to HTML/CSS, you know that there’s often a disconnect between the person creating the designs and the development team coding them. With well organized and labeled files you can avoid many of the worst web development pitfalls.

By following these simple steps you can hand your PSD designs off to a good PSD to HTML team and they will come in back pixel-perfect, just like you imagined. This makes PSD to HTML easy for both you and the development team.

Some basic rules to follow:

1. One PSD file per page template or folders for each page in a single PSD file. What is a PSD?

2. Label all folders with the section of content on the page they refer to (Top navigation, Content, Footer, etc) Example

3. Separate folders for “on” and “off” states. Make sure to separate your on/off states into different folders so the development team can easily identify the different states in the design.

4. Provide a text file or .pdf that clearly outlines all functionality for the individual pages (this includes things like animations, slide transitions, etc.)

5. Be sure to design all animation states, javascript validation, button states (click, hover, off), modals and anything else you can think of. If you don’t see it in the design, we can’t see it to code it!

PSD to HTML Example

This is an example of a PSD single page with well organized folders for the content of the page. The organization of this is is clear and easy to follow.There are subfolders for each portion, clearly labeled.

Within the folder structure each page has its own subfolders that are all appropriately named. The elements for each group are within the subfolder and vector images are imported to the file when necessary (logos or other images). Make sure to show different on / off states. Rather than show multiple flat files for each state, they should be organized and named within the PSD in a way that the development team can understand.

Below is a good example of how files should be organized when you hand them off to your development team. You will see that there is 1 PSD per page with all of the necessary states for web development included in each PSD file.

Photoshop (PSD) File Structure

If you hand us well organize and labeled PSD files, our team will code the HTML/CSS and hand you back pixel perfect, markup!

Final Markup (HTML, CSS, JavaScript)

If you have questions about the process we would love to hear your thoughts in the comments!

Web Design and Development with Mobile SEO in Mind

We’ve broken down the key features of responsive web design and discussed the benefits that make it the go-to choice of web designers today. But how do search engines feel about all of this?

SEO is at the forefront of every web publisher’s mind.

So whether you’re an internet business pining for maximum clicks, or a new blogger luring readers to your corner of the web, it’s a topic that deserves priority consideration when deciding how you’ll approach ‘going mobile.’

Let’s look briefly at the top search engines. These are Google, Bing, Yahoo!, and Ask.com (source). These four are far more popular than other search engines out there so it makes sense to focus your SEO efforts on these major players as they’ll be driving most of your indirect traffic.

The search engines primarily use a three-pronged approach comprised of: a web crawler to follow links and ping millions of sites efficiently; an indexer that, well, indexes their findings in a database; and a query processor to interpret your search terms and provide the best matches from the database.

Beyond traditional mobile web development.

While the SEO world still focuses its efforts on desktop design, the world of mobile design and development has boomed – inevitable considering our smartphone-driven lives. Traditional web development often calls for duplication of web content for desktop and mobile sites. This dual-mode presence calls for time-consuming URL redirects, separation of content, and splitting site traffic, which isn’t good for user experience or that all-important mobile SEO.

Again, we find ourselves landing on responsive web design as the solution (SEO mobile web development is the key!). Keeping your site and content singular is inherent in this web development technique – no URL redirects, no multiple web crawls needed from the search engines, no split traffic hurting your rankings. All this is possible just by choosing a better web design strategy!

There are numerous ways to make your site responsive, including using a responsive framework like Twitter Bootstrap or coding a responsive page template with @mediaqueries. Learn more about responsive design.

For an expanded look at mobile SEO and mobile design/development, reference: http://www.webdesignerdepot.com/2012/11/seo-for-the-mobile-web/

*Photo courtesy of Fotopedia, used under Creative Commons License.

HTML5: The Language of the New Web

No longer a novelty, HTML5 has already changed the way web developers code and the way users interact with websites. Contributing to the decline of Flash, HTML5 is an undeniable force utilized by countless modern websites.

The New Standard.

HTML5 is setting the bar for the ever changing web landscape. In addition to being integral to the single-site, multi-device experience, HTML5 serves as a standard for video, Flash-like interactivity, and is even creeping into the ad space. With HTML working hand in hand with CSS3 and JavaScript, HTML5 brings us to the next level of web development.

HTML5 is paving the path of the future for the Web:

It will be the go-to language for cross-platform development. According to Web Developer Juice, “Almost every platform – mobile or web – is now making the shift to HTML5 (this includes Blackberry OS, Palm WebOS, and Windows 8).” And Strategy Analytics predicted that HTML5 phones are a hyper-growth market, and global sales will increase 365% by 2016, from 2011. Developing for the desktop now includes developing for mobile. Which means faster and more cost-effective reach.

Ads will continue to shift from Flash. Apple adamantly denounced Flash, so, unsurprisingly, their iOS devices lack compatibility with those traditional Flash ads you otherwise see blinking at you across the web. With so much of mobile web traffic coming from iPhone and iPad users, advertisers can’t ignore that fact. Even on desktops, HTML5 aims for faster loading and better integration. Google Mobile Ads now offers a feature to easily convert Flash ads to HTML5 in Adwords and offers HTML5 banners. Pointroll goes as far as calling HTML5 “the future ‘Secret Sauce’ in online advertising.” HTML5 proves, once again, it is the solution for more effective and efficient reach.

It’s a robust and clean coding standard aimed at streamlining coding, publishing and browsing. HTML5 has been designed to do away with the need for add-on browser plugins. Many features are intended to improve site discovery and overall SEO, translating into more traffic. HTML5 includes the use of Canvas, which provides the potential for more graphic interactivity and an alternative to loading images the ‘old’ way – even on the fly! With better support for feedback forms, drag-and-drop tools, chat, and other popular interactive elements HTML5 aims to make developing and using the new Web much easier.
You can reference a useful infographic about HTML5 features and the benefits for future web development here.

To make the most of the new Web, the HTML5 experts at The Site Slinger code with the future in mind, utilizing the latest tools to provide robust user experiences, beautiful and clean websites. We’re happy to turn your vision into a pixel-perfect site via our best-in-the-world PSD to HTML coding, so contact us or submit your design and let’s get it done!

*Image courtesy of W3C, used under Creative Commons licensing.

So what IS responsive web design, anyway?

With the world going mobile there’s no way around it: your site has to adapt to any and every device that’s out there. Think about it… How many devices have you used today? I can count checking my email on three already!

Don’t get lost in buzzwords, understand why/how responsive web design works.

In the past, the solution to differing device screens was to build an alternate version of your site, or even multiple apps optimized for the various mobile OS’s. However, these options often prove to be too costly in development and cumbersome to perform maintenance and updates. So what is today’s solution? Responsive web design!

Well, you ask… what IS responsive design? It’s one of those buzz words being thrown around a lot right now.

Responsive design allows for a single site to be designed and developed, yet performs effectively and beautifully across devices of varying screen sizes and orientations.

There are a few key features that allow this to work:

A flexible framework for content – the ‘grid’

The foundation of the responsive design, the grid provides easy content management across varying screen sizes through the repositioning of content areas or boxes.

Check out some great info on how to use the grid in design and download some basic templates here.

Responsive web design — Content moves based on screen size, but should still relay the same message in an aesthetically pleasing way. (Image courtesy of DezignMatterz)

Adaptable visual content

From images to backgrounds and graphical motifs, a solidly designed responsive site must be able to communicate your vision consistently, regardless of device and screen size. These elements of the page must be able to move around and make sense from a user perspective and still effectively tell the user what you’re saying/selling.

Check out some great examples of sites that do this here.

The ability to respond to devices

Generally done via ‘media queries,’ a responsive site must determine the best display configuration and adapt in an instant to changes in screen orientation and size. This should be done in such a way that the user doesn’t notice the site changing.

Check out some great examples of this here.

The Site Slinger understands the need to develop websites in a cost-effective, multi-platform manner. We love coding PSD to responsive design! You shouldn’t spend all of your resources managing updates or site variations across a seemingly infinite sea of different mobile devices. That’s why we build effective, high-value, responsive sites, giving you the ability to deliver content consistently and reliably to all visitors, whether they’re on a desktop, tablet, or smartphone.

If you’d like to discuss the options for translating your web design into a fully responsive site, please contact us, or submit a quote. We’re happy to turn your vision into a pixel-perfect site via our best-in-the-world PSD to HTML coding.

*For further reference on responsive elements see, “Understanding the Elements of Responsive Web Design”

50 Amazing Resources for Dribbble Lovers

Here at The Site Slinger, we’re huge Dribbble fans. Sort of a Twitter for design, this awesome site is home to beautiful bite-sized work samples from the web’s best designers.

To showcase our love for Dribbble, we’ve put together a collection of fifty fantastic resources for anyone and everyone who uses Dribbble. From open source developer projects and quirky web projects to desktop and mobile applications, we’ve got enough Dribbble goodness to keep you occupied for months.

Developer

Dribbble API

The official Dribbble API documentation. If you’re a developer and you want to build anything related to Dribbble, start here!

Jribbble

Jribble is a jQuery plugin that opens up various aspects of the Dribbble API. Grab shots, users, comments, rebounds and more.

Rebbbounds

If you want to keep an eye on what developers are doing with the Dribbble API, hit up Rebbbounds, a Tumblr blog that’s chock full of great examples.

GitHub Goodies

There are a ton of Dribbble related projects on GitHub, here’s a quick list of some that you should check out.

dribbble-php – PHP wrapper for the Dribbble API.
swish – Ruby wrapper for the Dribbble API.
Dribbble.js – Dribbble.js is a one file, library agnostic javascript file that will add your most recent dribbble shots to your website.
dribbble_desktop – A ruby script that scrapes rss feed of “shots” from dribbble.com, puts the images in a folder, generates an html file that you can load using WebDesktop. Poof – dribbble shots tiled nicely on your desktop.
Objective-Dribbble – A wrapper for the Dribbble API, written in Objective-C.
dribbble-codeigniter – Dribbble API Library for CodeIgniter.
Dribbble-node – Client API for Dribbble web site in node.
dribbbleCFC – ColdFusion wrapper for the Dribbble interface showcase API.
dribbble-dotnet – A Mono and .NET library for the Dribbble API, built using C#.
Dribbble-Sync – Drupal 7 module that syncs shots from Dribbble.
Dribbble-Retinizer – Chrome and Safari extensions that add a few nifty retina features to Dribbble.
dribbble-sass – Sass demo for Dribbble Show & Tell.
dribbble-dimmer – Chrome extension that enables the viewing of shots over a dimmed background.
Dribbble_Wrapper – Dribbble Wrapper takes the mobile Dribble website and put it inside phone gap to create a native android application.
dribbble-screen-saver – Pulls down popular shots for easy use in a Mac OS X “picture show” screensaver.

WordPress Plugins

WP Dribbble Shots

Adds a template function that grabs the most recent shots from the Dribbble user of your choosing.

RainyShots

Similar to the one above, this plugin returns an array of 15 recent shots from any player.

Web Apps

Liiikes: Top Players

Liiikes is like a Dribbble scoreboard. It shows you the statistics for all of the major players and scouts (recruiters).

Jump Ball

A simple and fun memory matching game built with the Dribbble API.

Nibbble

Nibbble is a web app, but it’s specifically built to allow a better Dribbble viewing experience for the iPad.

Who Drafted Who?

Type in a Dribbble username, see who drafted that person.

Box Seat

Box Seat is a no distractions, one-at-a-time shot viewer with keyboard controls.

Full Court Shots

An infinitely scrolling grid of recent Dribbble shots. Great if you need a quick shot of design inspiration.

Alley Oop

Search Dribbble by color. Really helpful if you have one color that you like and want to find some others to complement it.

bbbrowser

Another simple grid full of Dribbble shots. This one doesn’t require scrolling though, just load up the page and watch.

Mac Clients

Play by Play

Play by Play is the Dribbble client that I personally use the most. It has the feel of a desktop Twitter client, only it’s full of Dribbble shots. What could be better?

Dribbbler

Dribbbler isn’t meant for viewing shots but for making them. Drag it over the area you want to shoot, click the button and upload.

Nibbble — A Dribbble screensaver for OS X

Love Dribbble? Why not make it your screensaver? Mac users can do just that with this free software.

iPhone Clients

iOS developers have definitely embraced Dribbble and its API. There are quite a few really sharp iPhone clients. Here are the ones that I found.

As far as I can tell, they pretty much all share most of the basic Dribbble browsing and interaction features. It really comes down to which interface you like the best. I personally think that PlayBook is pretty slick. It’s also free so it’s a good place to start.

Asssist for Dribbble

Shotz – A Dribbble Client

Swish

Balllin ~ a Dribbble client

PlayBoook

Backboard

Travveling for Dribbble

Air Ball App

Dunk

Drishots

Alley Ooop – A stream of inspiration shots from dribbble

scoreboard! (coming soon)

iPad Clients

Dribbble on the iPad is an entirely enjoyable experience. The large screen and touch interaction makes for an unrivaled browsing experience. It’s definitely one of my favorite ways to keep up on recent activity.

If you’re looking for a suggestion, the first two are my favorites. Dribbblr is from Tapmates so you know it’s awesome and Pick’n’Roll is just gorgeous.

Dribbblr for iPad

Pick’n’Roll for iPad

Courtside for iPad

Dribbbits for iPad for iPad

Dribbble Flow for iPad

Android

Not an iOS user? Fear not, there are a couple of good Android Dribbble apps as well. Check them out below.

Pixle for Dribbble – Android

Asssist | The Dribbble client for Android powered devices

What Did We Miss?

This collection includes the absolute best Dribbble resources that I was able to find, but I’m sure that I missed a ton of great stuff. Leave me a comment with a link to your favorite Dribbble app, service or code project. Also be sure to let me know what you think of the resources above.

Responsive Design: Why You’re Doing It Wrong

Responsive design isn’t a fad that arose because of a cool CSS technique, it’s an answer to a problem. Always remember that and constantly ask yourself whether or not you’re really adequately addressing that problem. If you’re using copy and paste to insert your media query breakpoints, your solution might be flawed.

Let’s discuss why media queries exist and how we can leverage them to truly solve the quandary of the ubiquitous web. Let’s talk about why you should let your content determine the breakpoints of a layout, not hypothetical screen sizes.

This article is part of our series on “looking beyond desktop design”, brought to you in partnership with Heart Internet VPS.

The Idea Behind Media Queries

Responsive Design PSD to Responsive Screenshot

To begin this debate correctly, it’s necessary to discuss why media queries have suddenly become so popular. The answer is of course that “Responsive Design,” a term coined by Ethan Marcotte, is a fantastic way to address an ever-growing problem for web designers.

While everyone was ranting on and on about how the “mobile web” was going to overtake the traditional one, the revolution that took place was much more drastic: the web became ubiquitous.

This “problem” is great for the world as a whole, but a real headache for us. In the past decade, the worldwide web has transformed into something new. It’s no longer bound by the walls that we had previously established. I’ve said this before but it’s worth repeating. While everyone was ranting on and on about how the “mobile web” was going to overtake the traditional one, the revolution that took place was much more drastic: the web became ubiquitous.

At this point in time, we don’t access the web from a single point. We didn’t give up our laptops in favor of smartphones as “experts” predicted. Instead, the web is everywhere we are. It’s not only in our phones and computers, it’s in our tablets, iPods, gaming systems, televisions and even cars.

This trend will only continue as time goes on. Responsive design brings us past a season of creating separate mobile sites and into an era where we develop one site that evolves and adapts to the device that it’s being viewed on. Using media queries, we can present specific CSS to any number of different viewport sizes and make sure that everyone has the best possible experience.

The Problem With Responsive Design

The section above isn’t a semi-historical rant meant to fill space, it’s an important look at the goals that responsive design is meant to achieve. The question then becomes, does it meet these goals? Does responsive design adequately address the problem of ubiquity?

The answer is complicated, at best I can say, “it depends on how you do it.” That’s a confusing statement isn’t it? Responsive design is straightforward: use media queries to serve up custom CSS to different viewport sizes. This is how everyone approaches it right? So how can there be a right and wrong way?

The complexity arises when we begin to discuss a crucial part of this technique: which media queries should I use? Or put a different way, which “breakpoints” should I target for custom CSS? The current popular answer predictably starts with the best “mobile” devices around: the iPhone and iPad (cue angry Android user comments). From these archetypes we establish so-called “generic” smartphone and tablet sizes. Then we move up and address laptops and small desktops and finally large screens. A standard set of media queries, like this one from CSS-Tricks, typically has nine or ten pre-established breakpoints.

What if we focused on the needs of a specific design instead of a hypothetical device use case? What if we built layouts that simply worked everywhere?

To be fair, this system does work to a certain degree. We’ve all seen lots of great responsive sites built using a set similar to Coyier’s above. However, I can’t help but think that this is somehow repeating the same mistake that we made by designing “mobile sites” a few years ago. The entire focus here is on the device viewing the site. Before we even build the site, we have these breakpoints in mind.

But devices change. We’ve already established that the web is being connected to pretty much everything with a power switch, so why are we once again placing so much emphasis on currently common screen sizes? Is there a better alternative? What if we focused on the needs of a specific design instead of a hypothetical device use case? What if we built layouts that simply worked everywhere?

Content Focused Responsive Design

The aforementioned problems with pre-established media queries occurred to me only as I dug in and really started producing responsive work on my own. In theory, the standard suggestions are great but once you apply them to a complex design you’ll discover that those breakpoints don’t always cover it. The problem, as the Boston Globe designers found quickly found out once the site went live, is that issues arise “in the in-between” (for the record, that project is fantastic and any layout issues have largely been addressed). Things get messy when the design is at a size that you didn’t account for and you have to go in and patch the holes after the fact.

I say this as an avid Apple fanboy: stop designing websites for the iPhone.

My question is, why don’t we start there? Instead of going into a project with a set of devices, and consequently media queries, in mind, why don’t we let the design decide? Every web page layout has a point where the browser size lessens its integrity. Our job as designers, in light of the problem of ubiquity, should be to find that size and account for it, then lather, rinse and repeat until all of the weak points are accounted for.

I say this as an avid Apple fanboy: stop designing websites for the iPhone. Instead, design a website that maintains its integrity as its viewport size is reduced to any feasible state. Do keep specific devices in mind as a guide for your design (example: smaller devices tend to be touch-based, so make links large), but don’t put your blinders on and fail to look at the bigger picture: that your design should look good on any screen.

A New Workflow

So what does a content focused responsive design workflow look like? It’s simpler than you think. Obviously, you need a starting point of some kind. If you want to start mobile and go up, great. If you want to start large and come down, also great. I personally find it very difficult to really dig into a design and do it right if I’m starting at the mobile level, but there are many solid arguments for doing it this way.

Something magic happens when you follow this workflow.

Hypothetically, let’s say you started with a large, 1020px wide site. Check it out on the largest screen you can get your hands on and make sure it looks great. Now drag the window and make it smaller until the design gets ugly. There’s your first breakpoint. Set a media query for that point and fix everything that you need to address. Once you’re finished, grab that window and find the next point of ugliness. Repeat these steps until you’re satisfied with the range that you’ve accounted for.

But what about the iPad? What about the Kindle Fire or Samsung’s latest attempt at being relevant? Something magic happens when you follow this workflow. You just made it so that the layout looks good at just about any size. If you did it right, then when you pull it up on your phone or tablet, it’s going to look great.

Layout Only
Keep in mind this discussion refers to layout ratios only. You absolutely don’t get out of testing functionality on different browsers and devices. Responsive design does nothing to account for the fact that different browser engines interpret HTML, CSS and JavaScript differently.

Conclusion

To sum up, media queries and responsive design provide us with an incredibly powerful tool to account for the fact that websites are being viewed by all manner of screens and viewport sizes. However, once we start pegging our designs to a handful of devices, we’re right back where we started. Your goal instead should be to build a layout that’s so versatile that it can handle almost any viewport size thrown at it.

This is all nice in theory, but where’s the example? The jumping off point of this discussion came from a recent attempt of mine to build a responsive image gallery. Check out that article for a look at how a content focused responsive design workflow might look in the wild.

50 Awesome Portfolios From Female Designers and Illustrators

Think that design is a man’s world? Think again. Today we’ve got over 50 stunning portfolios from extremely talented female designers hailing from all over the planet.

Why All Girls?

Let’s say you’re a female designer looking to build an online portfolio and you want to get some inspiration from what other female designers have done. Where would you look? A recent survey from A List Apart of over 26,000 web designers revealed that nearly 83% were male. This becomes quite evident when you start browsing through the plethora of portfolio roundups on design blogs, they’re typically all from guys! This post is meant to serve as inspiration for all the ladies out there looking to build a name in this industry.

The portfolios below absolutely blew me away in terms of talent on display. One reoccurring theme that simply can’t be ignored is how many female designers happen to be extremely gifted illustrators. I’m not sure if girls are more inclined to be artistically talented or not but this ratio seems to be much lower among males.

It doesn’t stop there though, you’ll see a strong display of proficiency in HTML, CSS, JavaScript, design theory and every other relevant skill to web design. Man or woman, this post should inspire you to be a better designer.

The Portfolios

Winnie Ho

“Hi, I’m Winnie, and this is my site. I live in Edmonton. I was born in Hong Kong. I love online gaming and creating web apps. I’m happiest when I’m playing games, designing, or building something that didn’t exist before.”

Tanya Merone

“I am a Graphic Designer based in New York, specializing in User Interface Design and Development. I build clean, appealing, and functional interfaces which comply with the latest web standards. But that’s just a part of it. Design is my life. It’s my five-star spa. It’s my roller-coaster. It’s something I do before going to bed, and something I can’t wait to do in the mornings. Without it, my world would be black and white.”

Meagan Fisher

“Raised in Florida, a new New Yorker via Boston. When not making websites, I try to write and speak about making websites.”

Veerle Pieters

“I’m a graphic/web designer living in Belgium. My personal journal reflects my journeys through design, the web, and life, and I share them here with you.”

Jessica Hische

“Jessica Hische is a letterer, illustrator and designer working in Brooklyn. You may already be familiar with one of her side projects such as Daily Drop Cap or her Should I Work for Free? flowchart. If not, howdy and pleasure to meet you!”

Sarah Parmenter

“Sarah lives in Leigh-on-Sea, in Essex, about 40 minutes outside London, with her husband and little dog, Alfie. Sarah was sat infront of an Atari by her Dad at the age of 3 and always knew her career would involve a computer, somehow. At the age of 14, Sarah started dabbling in web design. At 19 she decided to pursue this as her full time career and started her studio ‘You Know Who’ and hasn’t looked back since. Now 27, Sarah has been lucky enough to work with some great remote colleagues and peers over the years and even luckier to call some of them great friends.”

Tanya Maifat

“I am a freelance designer and digital/game artist. I enjoy designing game graphics, icons, teasers and tiny beautiful & smart illustrations for your websites and other projects.”

Tina Roth Eisenberg

“I grew up in Speicher (AR), Switzerland, influenced by renowned Swiss design and a lot of fresh mountain air. In 1999, after completing my design studies in Geneva and Munich, I crossed the Atlantic and began designing in New York. Since then, I have worked at several prominent NYC design firms, including Thinkmap, where I served as Design Director and helped design the award-winning Visual Thesaurus. I now run my own studio, swissmiss, with recent clients including the Museum of Modern Art and the Food Network. My aesthetics reveal my Swiss roots – I am a firm believer in white space and clean, elegant design.”

Jina Bolton

“Jina is a user experience designer at Engine Yard. Previously, she worked as a visual interaction designer and front-end web developer for super rad companies including Crush + Lovely and Apple, Inc. She enjoys creating beautiful experiences, and then she likes writing and speaking about it.”

Shyama Golden

“I’m basically a one woman shop for art and design, though I do hire a couple of brilliant interface designers and developers at times. As a child, I learned how to write code because I figured one day this internet thing would help me share my art with nice people all over the world.”

Hillary Hopper

“I am a creative. I can never seem to stop creating anything. There is always an idea, new picture, or some business idea running through my head. I can’t help but see a picture before I see words on it. I am drawn to color and the beauty around me. I have always been drawn to art and design. Growing up I was constantly in my sketch book or having some kind of craft happening on the dining room table.”

Allison House

“My background in user interface design is accented by a multi-disciplinary skillset that includes visual design, UX methods, content strategy and project management. The result is beautiful, well-planned websites that are intuitive, engaging, and persuasive.”

Natalie Nash

“My name is Natalie Nash, but I also go by my pseudonym, Pinky von Pout. I am 29 years old and I am a Graphic Designer. I have been married for 5 years, and live in a small Welsh town with my Husband, Jeremy and our three terriers: Sam, Jake and Tim.”

Janna Hagan

“My name is Janna Hagan and I am 19 year old web designer originally from the beautiful province of Alberta. I am currently in my second year of Web Design & Development at Durham College in Oshawa, Ontario. I am a hard working individual with a great attention to detail. I enjoy new and challenging projects that push me to learn more in the great field of web design. Throughout college, I have gained great time managment skills that allow me to work on multiple projects at once.”

Allison Nold

“As a professional graphic and web designer, I bring a range of art and design disciplines to every project I work on. From brand strategy and user interface design to creative writing and front-end development, my work exemplifies an appreciation for complete brand experiences.”

Iris Sousa

“I provide UI design & products for web, desktop & mobile applications.”

Dana Tanamachi

“Dana Tanamachi is a graphic designer and custom chalk letterer living in Brooklyn, New York.
She currently works at Louise Fili Ltd.”

Naomi Atkinson

“An English Designer and Illustrator, passionate about the web.”

Claire Coullon

“A freelance graphic designer specialising in typography, I work primarily with logo design, custom & hand drawn lettering and expressive typography. I also love print related work, especially book design & writing. Originally from France and currently living in Prague, Czech Republic, I co-run Op45 Creative Design Agency.”

Adelle Charles

“A designer and entrepreneur at heart, Adelle Charles currently acts as Chief Creative Officer at Fuel Brand Inc. where she oversees all creative and strategic direction for the company. She is a known twitter addict with a geeky love for typography and Starbucks. Charles has a Bachelor of Fine Arts degree in Graphic Design from RIT and has won various awards for her past work in television.”

Erica Schoonmaker

“I’m a graphic designer and native New Yorker currently living in San Francisco, CA. I love paper and books just as much as I love the internet and enjoy designing all types of projects across both web and print mediums.”

Samantha Warren

“I love fusing smart concepts with creative, standards-based, accessible web design. I know that listening, understanding business and user experience goals, and adhering to standards are keys to well-executed design online.”

Lindsay Burtner

“I’m a Rochester Institute of Technology New Media Design & Imaging 2009 Alumni. I worked at MODE in Charlotte, NC as an Interactive Designer/Developer.”

Heath Waller

“I discovered my passion for web design quite by accident. The experience of teaching myself about this field has been both challenging and extremely rewarding. I wake up excited about continuing to grow in this rapidly-evolving industry.”

Larissa Meek

“I have over 9 years of experience designing for the web and consider myself a standards enthusiast with a passion for visual design. I am well versed in design trends and usability with a strong handle on CSS and HTML. As an ACD at AgencyNet, I’ve had the pleasure to work on a multitude of diverse brands such as Fuse, Oxygen Networks, Bacardi, Ruby Tuesday, iN Demand, Howard Stern, Warner Brothers and many more.”

Sara White

“Sara is a twenty-four year old living in the rainy yet beautiful city of Victoria, Canada. She has a degree in business but chose to ignore the corporate world and pursue her passion, design, instead. She’s currently the Creative Director at MetaLab and likes to spend her free time in the kitchen, dabbling in interior design, and occasionally taking pictures.”

Geri Coady

“I’m Geri Coady — a Designer, Illustrator and Photographer working in St. John’s, Newfoundland — the oldest and most Easterly city in North America. Art, illustration, web design, graphic design, photography, typography, printing, advertising — how can I choose just one? My wide interest means I’m never bored — just the way I like it. I’m currently working as a Senior Designer at a local advertising agency where every day brings a new challenge.”

Denise Chandler

“Hi, my name is Denise and I specialize in designing and building websites for small businesses and personal use.”

Meg Hunt

“Hi! My name is Meg. I’m a self-professed jack of all trades, but currently work as an illustrator. My goal is to fill the world with my creations, and make people happy in the process. I want to explore and try new things; it’s my goal to branch out beyond editorial and into the living breathing world we inhabit. One day I would like to illustrate gift cards and childrens’ books and stationery and textiles and packaging and oh, all sorts of things. What do you say?”

Laura Kalbag

“I’m Laura Kalbag and I design web sites. Sometimes I do design for other digital media and print, but I find web design inspiring, exciting, and I’ll go on about it for hours.”

Inayaili de León

“Hi! My name is Inayaili de León and I’m a web designer. That means I make websites both beautiful and easy to use—I can make a lot of amorphous content look clean and easy to understand. I also take a lot of pleasure in coding mine and other people’s designs to make them work online.”

Beth Dean

“I’m a user experience designer specializing in billing and payments for transactional sites, and mobile design.”

Sneh Roy

“I am Sneh. I Design. I am the co-founder of LBOI, a design studio in Sydney, Australia. I love creating logos and wacky characters the most. I also design and develop websites, create original content for the web, blog about design here on LBOI and about food on Gel’s Kitchen. I also write design related articles for other websites and blogs.”

Kelli Anderson

“Hi. I’m an artist/designer and tinkerer who is always experimenting with new means of making images and experiences. I draw, photograph, cut, print, code, and create a variety of designed things for myself and others. ”

Andrea Garza

Sarah Kaiser

“Currently I am a fourth year New Media Design student with Rochester Institute of Technology. I’m passionate about design, illustration, 3d and motion and possess some skills in development, print and web as well.”

Amber Weinberg

“Specializing in the development of HTML5, CSS3 and WordPress using valid and semantic coding practices.
I also make apps for fun and write a blog.”

Valerie Jar

“I’m a 24-year-old designer/illustrator located in Salt Lake City. Currently, I’m working at StruckAxiom. I’m inspired by art deco, vintage signs, hand-lettering, tattoo art and people. Art and bikes are two of my favorite things. I love the hidden symbolism and meanings behind common objects and everyday things, and oftentimes, that fascination will play a role in my design and illustration.”

Megan Kirby

“Art director and graphic designer specializing in luxury brand development with multidisciplinary experience refining the brand story with illustration, print and interactive design.”

Erika Van Der Bent

“Erika van der Bent, Freelance Designer for online / digital media , age 27.
Born and raised in The Netherlands. Started to discover the world of webdesign when I was 12 and I felt in love. Over the years I have worked for and with several different web-design companies.
A beautiful interface makes me happy!”

Susan Murphy

“Once upon there was a freckly Irish girl name Sue. She studied Visual Communications in Dublin, is currently studying for a Masters in the USA and will soon be moving to work in the Netherlands. Never defined by a place or a thing, she always aims to try and be a master of all trades, a jack of none. ”

Dever Thomas

“Dever Thomas is an aspiring graphic designer, illustrator, creative person, and soon-to-be graduate of Indiana University.”

Melissa Pohl

“Like many designers, I grew up with a passion for drawing and artistic pursuits of all kinds. After high school, this love of creating lead me in various directions which included becoming a tattoo artist, hair-stylist, and painter. As soon as I was introduced to the world of digital graphics however, I fell in love.”

Laura Javier

“I’ve got one foot in the world of print, one foot in the world of pixels, and a love for both. I’m graduating this spring with a degree in Communication Design, a sense of humor, and a mission to find some amazing people to work with.”

Emma Taylor

“A creative freelance web and graphic designer based on the sunny island of Cyprus. With an ultimate passion for website design and development, branding and advertising material. Focusing on designing simple, clean attractive websites that fully comply with today’s web standards for wonderful clients across the globe.”

Christina Fowler

“Who is she? She’s the descendant of generations of magic designers (since 2008). And she’s no ordinary woman. She’s girly. Full of personality. A good communicator. And – more.”

Abigail (Ruby Too)

“I work full-time in ‘Ye Olde Web Towne’ at Harmonix. I do some visual design but I spend most of my days knee-deep in CSS & HTML (and learning JavaScript). I get to work with some of the most talented and entertaining people I’ve ever come across. I love my job.”

Ciara panacchia

“My name is Ciara (pronounced Kee-rah). I come from a small town in Ireland called Carlow, but found a place to call home in U.S. when I moved to Illinois in 2005. Although my love of the Arts started at a very early age (since I could hold a pencil), I have been a dedicated student of design since 1998, I don’t think it is something you ever stop learning.”

Heather Grossman

“I’ve been a web designer for more than a decade. I’ve learned many things about web design since starting out in this industry, and the things I’ve learned have helped me develop processes that benefit everyone involved in the projects I work on.”

Susie Ghahremani

“Susie Ghahremani is a 2002 graduate of the Rhode Island School of Design (RISD) with a BFA in Illustration. Her artwork combines her love of nature, animals, music and patterns. Born and raised in Chicago, Susie now happily spends her time painting, drawing, crafting and tending to her pet finches and cat in San Diego, CA. ”

Melissa Washin

“I am a designer and developer who builds websites and creates print materials for small businesses and agencies.”

Aubrey Klein

“Hi, I’m Aubrey, a graphic designer living in Dallas, TX. I specialize in web, illustration, tweeting and thing-making.”

Bianca Mangels

“My name is Bianca and I’m a Screen and Web Designer from Frankfurt (Germany). I love design in every form and I can’t get enough inspiration.”

Courtney Joy

“I currently work full-time for a creative firm in Dallas called Vintage 56. We offer services in graphic design, audio engineering, video production and web development. My role, as the graphic designer, includes branding/logo marks, business cards, stationeries, brochures, occasional web UI, product packaging and keynote presentations.”

Show Us Yours!

This post doesn’t even scratch the surface of extremely talented females in the design industry. If you’re one of them, leave a comment below with a link to your portfolio so we can check it out!

Why Building a Real Estate Website Should Be Your Top Priority

3 Common Approaches to Real Estate Website Development

Approach #1: Custom Development – Unleash Your Creativity

Approach #2: The Golden Mean – Use WordPress

Approach #3: DIY Website Builders

The Essential Elements of a Real Estate Website

Efficient Property Searching

Informative Property Descriptions

A Tool to Determine the Value of a Property

Customer Testimonials

Effective Calls-to-Action

Final Thoughts

Enter Layer Comps

7 Pro-Tips for Web Design

PSD to HTML Example

Photoshop (PSD) File Structure

Final Markup (HTML, CSS, JavaScript)

SEO is at the forefront of every web publisher’s mind.

Beyond traditional mobile web development.

The New Standard.

HTML5 is paving the path of the future for the Web:

Don’t get lost in buzzwords, understand why/how responsive web design works.

A flexible framework for content – the ‘grid’

Adaptable visual content

The ability to respond to devices

Developer

GitHub Goodies

WordPress Plugins

Web Apps

Mac Clients

iPhone Clients

iPad Clients

Android

What Did We Miss?

The Idea Behind Media Queries

The Problem With Responsive Design

Content Focused Responsive Design

A New Workflow

Conclusion

Why All Girls?

The Portfolios

Show Us Yours!