Menu

Austin Web Design Blog

One Website for All!

How to have one website that resizes for mobile devices with Responsive Design

More and more users are surfing the web with smart phones and other mobile devices. As such, web designers are often forced to create (and maintain) two separate sites for one business or service. This can lead to more work, and inconsistent unity of content between the two sites if updates are missed.

While this is a burden for web designers, the reasons are justified. Your professional website must meet the demands and limitations of users with varying options of surfing the web. Users on smart devices may have slower connectivity (some networks are as slow as a modem from the 90's), users may have varying sized small screens (the iPhone 4 is only 3.8 in.), they will not have keyboards, or a mouse, Additionally Apple devices do not support Flash. With these limitations, having a mobile friendly site is necessary. But is there a way to create one single site to meet the demands of all screens and connectivity speed?  Yes there is! Responsive Design has come to the rescue.

What is responsive design? Well first take a look at this website. If on a large screen resize the browser and check out what happens to the page www.wildflowersightings.org. Notice how the layout moves to accommodate the smaller window? It fits both a large screen and a small screen. Always adjusting in an aesthetically pleasing way to fit all sizes. This is a responsive design website. If on a smart phone you can see how it is formatted to fit your screen. This site is not a separate mobile version. But is rather "One site for all"!

While making a responsive design website might seem intimidating for first timers it is actually easier to learn than one may think.  Below are some useful responsive design tips for newbies and intermediate website designers.

Responsive Websight Design - The Jist

First lets make a simple RD websight in 3 simple steps. This brief tutorial assumes you have basic knowledge in website design and CSS. For CSS tips click here.

1). META TAG

Smart phones and devices scale html files to fit a screen.  This usually causes a scaled page with tiny unreadable text. If you have visited a non responsive website you know what we are referring too.  The first way to over come this problem is to insert a special META TAG into the header of your HTML files.

Here we have the meta tage with the VIEWPORT TAG. This tag informs the browser disable the scale and instead uses the device width as the viewport width.


Please note that IE 8 and below do not support this (or many many other things for that matter; but that's another discussion). You will need to link to a js  IE


2. The HTML

Design the page using div tags and define the widths and heights. Perhaps something like this  page with a header, container, side content, and a footer.

[ HEADER ]

CONTENT      |     SIDECONTENT



FOOTER

3.  Media Queries

Herein lies the secret and nugget for effective responsive design, Think of media queries as a way of telling a browser exactly how to display a web page for the viewport width that you specified in the meta tag. They are used to apply CSS rules for varying layouts using the viewport widths.

Below is an example of Media Query code .

Note that we set the container width to 999 pixels. Next simply use percentages for the divs instead of pixels. This lets the content move and scale to any size.

/* less than 999px rules are only in effect if the viewport width is less than 1000 pixels in width */

@media screen and (max-width:999px){

  #pagewrap {
     width : 90%;
  }
  #content {
     width: 70%;
  }
  #sidecontent{
     width: 25%;
  }
}

Ok that takes care of the tablets. Now lets tell the site what to do with smaller screens! In this code we will set the width to equal or less than 700 pixels. We will also change the container attributes to auto width and disable the float attribute. This will cause the divs to display in full viewport width. In this case 700PX or less which is Perfect for the larger smart phones.

/* less than 700px  */

@media screen and (max-width:700px){

  #content { 
     width: auto;
     float: none;
  }
  #sidecontent {
     width: auto;
     float: none;
  }
}

Finally lets address those older iPhones with screens of 480PC (or less) First we will set the heath of the header div to auto, next we will hide the side content so that we can fit everything on the small screen.

/* less than 481px */

@media screen and (max-width:480px) {
  #header {
     height: auto;
  }
  #sidecontent {
     display: none;
  }
}

These are three short samples of media queries for effective responsive design websites. Of course you can write as many as your site may need.

We hope this short article on simple yet effective responsive design helps to get the ball rolling in your website coding.

Thanks to www.wildflowersightings.org

Published on Tue, 05 Mar 2013 21:10

3 Plug-ins for a Multilingual WordPress Site

There are many reasons why you may want to develop a multilingual WordPress site for yourself or a client. Currently 2/3’s of the world’s population speak a language other than English. Translating your site to more than one language helps to improve distribution of your content, better service your clients, and increase the effectiveness of your Search Engine Optimization. There are many different plug-ins that make this process easier, here are the top 3 plug-ins we’ve found to help you manage a multilingual site.

WPML

WPML is feature rich multilanguage plug-in available for WordPress. It’s easy to install and set-up for beginners, but also has many advanced features for experienced web developers versed in WordPress and PHP to create a full-fledged multilingual WordPress site. The plug-in installs with over 40 languages built-in and you can add your own language using the built-in languages editor.

You have the option of displaying your separate language sites in the same domain , in sub-domains or in completely separate domain names. Features include a powerful translation management tool that makes it easier to manage a team of translators. Or, if you don’t have someone on board to translate the material for you, WPML offers a professional translation service that hires a native translator to convert all of your content for a fee. Other features include, inline comment translation, making replying and moderating comments on your site in whichever language you’d like easy.

There are two options for purchasing WPML: Multilingual CMS and Multilingual Blog. The Multilingual CMS, which costs $79, is the complete solution for handling multiple languages, and many of the features mentioned in this article are only available on this version of WPML. If you’re simply running a blog and will want to translate it yourself, use the Multilingual Blog version, which cost $29.

Download Plug-in | View Site

qTranslate

qTranslate is another plug-in that offers inline editing of multiple languages for your WordPress site. The plug-in allows you to translate your blog to another lanugage without changing the .mo files, for quick localization. If you don’t have your own translators, it has a built-in features to send your content to professional human translator or an automated translation option.

Changing which language you’re working on is similar to changing the WYSIWYG editor from Visual to HTML, each language has its own tab. qTranslate comes with many languages already built-in and claims that it can handle an infinite number of languages to present your site in whatever lnaguage you’d like.

Download Plug-in | View Site

Multisite Language Switcher

Another option to manage different translations of your content would be to run WordPress Multisite, hosting each language as a separate installation of WordPress. WordPress has more information on creating a network of sites. The Multisite Language Switcher aides in connecting the different language versions of your posts, categories and tags. The plug-in even connects the admin area of each installation in one area, so you won’t have to log-in to multiple admin areas to change a translation. You can just click on the language you’d like to edit to make changes.

With the Multisite Language Switcher you won’t have to worry about making sure plug-ins work with the multilanguage plug-in you’re using, though they will need to work WordPress multisite to function properly in the admin area. It can get complicated managing content across several sites and some hosting solutions don’t allow you to install multisite on their servers.

Download Plug-in | View Site

Published on Tue, 21 Aug 2012 14:53

Tools for Developing Mobile-Friendly WordPress Sites

More and more users are using the web from tablets and smartphones like the iPad, iPhone, Android, and Samsung Galaxy. Making sure your website caters to these users and gives them the best mobile experience should be just as important as developing for your desktop clients. Luckily, an array of plug-ins and themes are making it increasingly easier to reach every customer, no matter how they access your site! Here are just a few options for a mobile-friendly, responsive WordPress site.

WP Mobile Detector

The WP Mobile Detector plug-in automatically recognizes if visitors have accessed your site from a mobile device and delivers a mobile optimized version of your content. The first plug-in to differentiate between a standard mobile and a smart phone, it has support to detect over 5,000 mobile phones. Basic settings for the plug-in allow you to redirect traffice to a mobile friendly site if your visitor is on a mobile device. There is a premium version of the plug-in available for $49.99 that features stats, 10 preloaded themes, and the option to customize the theme to your liking using a built in theme editor.

Feature list from the developers:

  1. Automatic detection of mobile devices.
  2. Differentiates between standard mobile devices and advanced mobile devices.
  3. Detects over 5,000+ mobile devices.
  4. Advanced mobile statistics including unique visitors, visits, mobile search engine bots, and more!
  5. Automatically formats content and resizes images.
  6. Includes seven mobile themes pre-installed.
  7. Select any of the seven pre-installed mobile themes or choose one of your own.

Here's a quick tour of the plug-in:

Download Plug-in | Visit Site


WPtouch

Another simple and quick way to create a mobile version of your WordPress site is WP Touch. This plug-in automatically creates a mobile theme to deliver your content, without extra coding or modifying your existing WordPress theme. The free version of the plug-in allows for basic design changes to the appearance of the mobile version of your site and is better suited in a situation where you need to get a mobile site up quick and don't want to hassle much with coding or altering your theme.

There is also a premium version of the theme, WP Touch Pro, that allows for greater flexibility on the appearance of your mobile site and 200+ features, including: compatability with WP 3.0's custom menu's, an iPad theme, custom post types support, and advanced styling and branding control. For $49 per site, the premium version gives greater control over your mobile sites design and is a sound investment for easy mobile site development.

Download Plug-in | Visit Site


WordPress Mobile Pack

The WordPress Mobile Pack includes many features to make your site more mobile friendly. A mobile switcher will recognize if your visitors are using a mobile browser and can give them the option to switch from the mobile version or the desktop version of your site. The mobile theme included allows you to edit settings for what content from your site appears for mobile users. You can disable certain widgets from displaying and extend articles to separate pages to increase your sites mobile load time.

The basic theme is easily customizable by color specifications and more experienced coders can dip into the PHP to alter the overall structure of the theme. Mobile Pack gives you the option to disable media that is not mobile compliant, shrink images to scale on a smallery screen, and automatically simplifies the styling the page for a more mobile friendly page. Lastly, the plug-in also formats the WordPress dashboard to be mobile compliant and gives you many of the basic settings needed to write new posts and edit exisitng pages.

Download Plug-in


Responsive Themes

Rather than installing a plug-in to handle your mobile presence, using a responsive theme is another option. There are already many themes built around a responsive, grid based layout that automatically adjust to a users screen making your site look great even on tablets and other mobile devices. Here are just a few of responsive themes and frameworks available for WordPress:

  1. WP-Responsive: $59 - Featurs a content slider on the main page, multiple layout options, admin setting options for easy customization, and more.
  2. Whiteboard Framework for WordPress: Free - Whiteboard is a framework noted for helping developers save time creating new WordPress themes. It's straightforward and simple, and already features a responsive system that's easy to customize for your next theme.
  3. WP Bold: $59 - Similar to WP-Responsive, WP Bold comes with many great features and layouts designed for mobile displays.
Published on Thu, 09 Aug 2012 16:16

Best iPad and iPhone Apps for Web Designers and Developers

iMockups for iPad

iMockUp for iPad

Design mockups for your next Web or Mobile App straight from your iPad, with the ability to work on multiple projects. Collaborating is easy, e-mail your mock-up as a PNG with one click of a button. iMockups allows you to focus on the basic structure of the site or get specific by importing pictures, creating color schemes, and adding inline content relevant to your project. Currently only available for the iPad.

Visit Site | Download Now


OmniGraffle for iPad

OmniGraffle for iPad

Another mockup tool that lets designers create a preliminary design for their next website using diagrams or pre-built stencils including fonts, forms, and 3D shapes. For even more freedom and to utilize the touchscreen ability of the iPad, Omnigraffle allows for freehand sketches of layout. The app supports multiple page documents, tables, text wrap, shared layers, and exporting options to your photo library or a PDF. Currently only available for the iPad.

Visit Site | Download Now


Inkpad for Ipad

iMockUp for iPad

There are plenty of drawing and painting apps for the iPad, but none provide the simplicity and intuitive usability quite like Inkpad for iPad. Though it’s not meant to replace a professional desktop program like Adobe Illustrator, Inkpad gives illustrators and designers the ability to create vector graphics from the convenience of their iPad. You can export the SVG to your Dropbox account or e-mail as a PNG, SVG, JPG or PDF. For a look at the capabilities of Inkpad, check out their Flickr photo pool. Currently only available for the iPad.

Flickr Gallery | Download Now


Textastic Code Editor

Textastic for iPad

With syntax highlighting support for over 80 programming languages and code completion for HTML, CSS, Javascript and PHP functions, you’ll find Textastic to be a fast and versatile text, code and markup editor for on the go site development. Need to make a quick change to a live site? Textastic has built in FTP, FTPS, SFTP and WebDAV connections to make changes without needing a desktop or laptop. Currently only available for the iPad.

Visit Site | Download Now


Gusto Web Development Environment

Gusto for iPad

Gusto is another text editor for the iPad that focuses more on the workflow than Textastic does. With a layout similar to Coda, this text editor allows for multiple projects and onboard FTP downloads and uploads. Gusto has been praised for it’s simplicity and when you first open the app you’ll be greeted with "hints" to speed along the learning process. Currently only available for the iPad.

Visit Site | Download Now


What the Font Mobile

What the Font

Browsing a website or reading a PDF and see a font you’d like to use on your own design? Take a screenshot with your mobile device and submit it to the What the Font App. In seconds, What the Font will search through the MyFonts database and identify the font and other fonts that closely resemble it. Works through the network or Wi-Fi.

Visit Site | Download Now


Discover a Color

Discover Color

With the ability to create a color scheme using up to 6 colors, Discover a Color allows graphic designers and web designers to discover brand new colors and color schemes for their designs and artwork. Supports RGB and HEX color codes, suggests similar colors and complimentary colors, and e-mail your color schemes by the RGB and HEX values.

Visit Site | Download Now


Published on Mon, 06 Aug 2012 18:25

Twitter for Business Best Practices

Getting Started:

  • Pick a Twitter name and username that matches your company name or alternatively a name that includes your company name.  I recommend making these names identical.  Avoid underscores, use capitalization to differentiate words (eg. @LoneStarInternet).
     
  • Fill out your Twitter profile completely including a URL.  The Twitter profile should help people verify your legitimacy.  Dozens of purported celebrities and companies on Twitter have turned out to be bogus.
     
  • Let consumers know who they are talking to
     
  • Explain why you are on Twitter and who is responsible for your company’s presence there. Consumers want to talk to a “real person,” and not a bot. Here's an example for Harpers Magazine.
    Name: harpers
    Location: New York, NY
    Web: http://harpers.org
    Bio: America's oldest continuously published general interest magazine. (Assoc. Editor/Web geek Paul Ford is the one doing the twittering.)
     
  • Profiles are searchable so use keywords in your bio.
     
  • Create a customized Twitter homepage (that matches your corporate brand as much as possible) to provide additional information about your company and products.  Use your company logo in the background for your homepage.
     
  • Build up some tweets before promoting your twitter account so other users will see you as credible and relevant.  You should "seed" your twitter account with at least 20 tweets.


Twitter Writing Tips:

  • Use conversational language
     
  • Be polite
     
  • Try to stay under 100 characters so your tweet doesn't get cut off if a follower retweets your message.
     
  • Try to use short urls for your links.  This uses less characters and long urls look like spam.
     
  • Avoid overusing abbreviations, they will make your tweets difficult to understand.
     
  • DO NOT USE ALL CAPITAL LETTERS!  It is the equivalent of screaming.
     
  • Say thank you when someone retweets one of your messages or sends a tweets that links to your account.
     
  • If you tweet links to content you found on Twitter, acknowledge them as the source using the @Account in your tweet.


Managing your Twitter Account:

  • Expect to have conversations.  Followers will respond to tweets with questions and comments.  The person responsible for managing the Twitter account will need clear direction on what they can respond to, how to respond, when to direct a follower to utilize a secure communication method (when transmitting personal information, phone numbers, etc… use private Twitter messaging so their information is not exposed to the public), and when not to respond.  Not responding to any followers is a bad practice.  Reach out to handle complaints, give thanks and praise for compliments in real time (or as close as possible).
     
  • Ask questions of your followers to glean valuable insights and show you are listening.
     
  • Be human, and have a sense of humor.
     
  • Most of your tweets should contain a link to your website, blog post, article, etc…
     
  • You could use one or more of the Twitter directories (WeFollow.com or Twellow.com) to locate potential users to follow based on their interests or geography.  If you follow them, they will be notified and may decide to follow you.
     
  • Follow anyone that mentions your company.  If you find an account you are following is a spam account or tweets information you may not wish to be associated with you need to end the relationship.
     
  • Periodically do a Twitter search on your company name to see who is re-tweeting you or mentioning your name.
     
  • @reply people to thank or just reach out to them.
     
  • Consider Twitter/Social Media interface platforms such as HootSuite, TweetDeck, and Sprout Social.
     
  • Consider Twitter follower-vetting tools that enable you to block or remove spam followers such as Twit Cleaner, Tweepi, or TrueTwit.

Marketing your Twitter Account:

  • Put links to your twitter page on your website.
     
  • Add hyperlinks to your twitter account (e.g.: Follow @FowerLawFirm on Twitter) in emails and newsletters.
     
  • Solicit tweets about your company and publish them on your site.
     
  • Reach out to other firms you are connected with on Twitter and exchange tweets
Published on Thu, 26 Jan 2012 15:37

Make a Pattern in Photoshop

Create your own pattern in Photoshop, then choose one of the three ways listed to apply your pattern to graphics.
Published on Wed, 14 Dec 2011 10:39

How to Vertically Center Content in CSS

Two methods for vertically centering content inside a div element.
Published on Mon, 05 Dec 2011 10:14

Simple CSS3 Gradients

Replace your tiling gradient images with this handy yet not-so-simple CSS.
Published on Fri, 11 Nov 2011 16:25

CSS - Methods for Clearing Floats

The overflow, clear div, and :after pseudo selector methods for clearing floats.
Published on Thu, 13 Oct 2011 09:52

Brushed Metal II - Engraved Text

Add realistic engraved text to your brushed metal plate and add a custom drop shadow.
Published on Tue, 20 Sep 2011 08:14