Windows/Mac/Linux: YouTube's great for watching videos, but it's still not as easy as just flipping on a TV. Minitube makes that kind of experience happen, and pulls videos based on keywords into an endless stream.
Stjepan
Shared posts
Mindfire book is FREE today: download it here
Hi folks. It’s my birthday, and to celebrate I’m giving away one of my most popular books Mindfire: Big Ideas For Curious Minds.
Just go to the download page and you’ll be on your way.
Enjoy – Happy April!
Mapping the Austro-Hungarian Empire
Customizing WordPress Themes with Action Hooks
Your WordPress theme is one of the main core components that defines the look and feel of your website.
While WordPress theme development has become a popular and profitable business for some developers and designers, all developers working with WordPress should know how to customize – if not construct – a quality theme.
Professional premium themes in popular marketplaces contain dozens of in-built features and components to define the presentation and functionality of WordPress websites. Nevertheless, we need to be able to make the themes extendable and customizable, allowing their users to stand out from the rest and to meet specific needs.
WordPress action hooks provide an excellent way to extend WordPress themes. In this tutorial, we’re going to look at how we can effectively use these action hooks. Here I am assuming that you have some basic knowledge of using WordPress action hooks.
The Role of Action Hooks
Themes are built by designers of developers based on their imagination. You may think you have the capabilities to design the “perfect theme” with all the necessary features. But still there will be people who want your theme to have certain modifications to the design, before being willing to use it on their own websites.
Here is a screenshot of my favorite WordPress theme called Avada.
I like most things in the features and design, but I don’t like the social menu (highlighted). I’d prefer to use my own design for this section. Similarly, each user may have their own requirements.
No WordPress developer can satisfy everyone with any one theme design. But we can extend and adapt themes, so that anyone can have a unique design built with components on top of the basic design and features.
WordPress action hooks simplify this process. With action hooks, we can remove existing components or add new components as necessary. Anyone who is experienced in WordPress development can then easily customize the existing features by modifying the theme code or adding custom codes through plugins.
Essential Action Hooks
We have the choice of deciding whether to go with action hooks or not. There are three action hooks that are built into almost all WordPress themes. Any theme would be considerably limited without these hooks:
wp_head
Included in the head section of the theme for plugin developers to add their own scripts, styles and necessary information. Calling the wp_head
function in your theme header, will call the do_action
function inside the core code.
wp_footer
Included just before the closing body tag of the HTML document, for plugin developers to add scripts, styles and necessary display information. wp_footer
works in a similar way to the wp_head
function and calls the do_action
function inside the core files.
comment_form
Used to modify the design and fields of existing comment form for posts and pages.
Developing Custom Action Hooks
Now it’s time to develop our own custom hooks specific to themes. The real power of hooks comes with this method as we can define any number of custom hooks anywhere in the theme.
First let’s consider the following code which creates a custom action hook for our themes.
function wpr_after_post_title() { echo "<img src='promotion-image.jpg' />"; } add_action('wpr_after_post_title','wpr_after_post_title');
These days, many websites offering a product or services have a blog or articles section to attract readers and market their products. So they produce articles about information related to the product. The goal is to market the products through the blog. Often, we see advertisements or promotion placed just after the post title. In such scenarios we can use the preceding code to implement the feature.
add_action
function takes a custom action name and function name unique to the application. Then we can add the do_action
in the theme after the title of the post to display the promotion banner as shown in the following code.
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php do_action('wpr_after_post_title'); ?>
Having action hooks in important positions like this allows plugin developers to quickly add custom features without digging into the core theme code.
Multiple Execution of Single Action Hooks
Once you define custom action hooks and make it public, any developer can implement them using various plugins. In situations where two or more developers implement the same hook in their plugins, precedence of the actions becomes a concern.
Consider the following code where two plugins implement the same action.
<?php function wpr1_after_post_title() { // Plugin 1 } add_action('wpr_after_post_title','wpr1_after_post_title'); function wpr2_after_post_title() { // Plugin 2 } add_action('wpr_after_post_title','wpr2_after_post_title'); ?>
In this scenario, which action executes first depends on the plugin name and how the plugin is positioned in the active_plugins
field in wp_options
table. Let’s say we want to display the output of Plugin 2 before the output of Plugin 1. We won’t be able to get it work with the above technique since Plugin 1 is located first in the active_plugins
field.
The priority parameter of action hooks becomes useful at this point. We can pass a numeric value as a third parameter to define the execution priority of the action hooks. Let’s consider the preceding example with priority values.
function wpr1_after_post_title() { // Plugin 1 } add_action('wpr_after_post_title','wpr1_after_post_title',50); function wpr2_after_post_title() { // Plugin 2 } add_action('wpr_after_post_title','wpr2_after_post_title',40);
Now you will be able to see the execution of Plugin 2 function before the Plugin 1 function based on the priority level given. As value gets higher, priority will get lower and hence will execute further down the page.
So it’s better to define your action hooks with priority values so that precedence of other actions can be adjusted according to the required positioning.
How to Add Pluggable Action Hooks to Themes?
WordPress action hooks implementation consists of two parts. First we define an action hook using add_action
function. Then we execute the action hook using do_action
. As theme developers, your responsibility is to execute action hook when necessary. Defining and implementing the action needs to be done by plugin developers. So whenever you want to use an action hook, just place the following code in necessary locations.
<?php do_action("action hook name"); ?>
Proving action hooks makes it easy for plugin developers to add new sections and content for the theme layout. But what if someone wants to change existing section?
Consider the following layout.
This screen shows the blog post design of a WordPress theme. You can see the post date and author under the title. Also the category and tags are placed at the end. Let’s say you don’t like the design of these components and want to design your own.
If those sections are directly inserted into the theme, it’s difficult for plugin developers to change the design without modifying the core theme code. Let’s see how we can provide a solution with action hooks.
<?php // Post title code do_action("post_date_and_author"); // Post content do_action("post_category"); do_action("post_tags"); ?>
All the sections are defined as action hooks instead of directly embedding into HTML document. The following code implements the post_date_and_author action inside the theme functions file.
<?php function post_date_and_author(){ echo "Date area related HTML code"; } add_action('post_date_and_author','post_date_and_author'); ?>
Now you have can replace existing design components as well as add new components to the theme. Following is the implementation for the preceding scenario inside a custom plugin.
<?php function wpr_post_date_and_author(){ echo "New design for date section by the plugin"; } add_action('post_date_and_author','wpr_post_date_and_author'); function wpr_remove_custom_actions() { remove_action('post_date_and_author','post_date_and_author'); } add_action('init','wpr_remove_custom_actions'); ?>
Here, the developer has provided their own design for the date and author section. The original post_date_and_author
hook defined by the theme will be removed on init
action.
Important: To remove a hook, the $function_to_remove
and $priority
arguments must match when the hook was added. This goes for both filters and actions. No warning will be given on removal failure. – WordPress Codex
Then we add the same action with plugin specific functions to modify the date section design.
The following screen previews how the previous layout can be changed to provide a different design.
Documenting Pluggable Action Hooks
You can add any number of action hooks add features to make your theme highly customizable. Plugin developers are not aware of the available theme hooks, unless they explore the source codes to find them. Therefore it’s ideal to document the available action hooks of your theme.
One way of using action hooks is to add scripts, styles and similar contents which work internally without displaying anything on the browser. Another way is to directly modify the page layout to add design components or remove existing components.
If you do go with action hooks, your documentation needs to include the details such as the positioning of the action hook in the template, preferred parameters, dimensions of the content and types of design components preferred in the given locations.
It’s up to you to decide the places to apply action hooks in your themes. I would use action hooks in the following sections:
- After the main menu
- After the post or page content
- Before and after the post title
- Before footer section
- Before and after sidebar widgets
Now it’s time to help each other by sharing our experiences. Feel free to add your suggestions on action hooks and how you use them effectively in your WordPress themes.
Looking forward to hearing from you.
We Talked Responsive Web Design with the Experts
This morning (Down Under) I ran another in our series of free Talk with the Experts chat sessions. This time the subject was Responsive Web Design and the experts were Craig Sharkie & Andrew Fisher – authors of JumpStart Responsive Web Design. You can check out a preview of the book here.
The session was a busy one, so to save you sifting through the transcript, here is a list of resources that were mentioned.
Some of the benefits of RWD
http://www.copyblogger.com/mobile-responsive-design-benefits/
Font Related Resources
http://snook.ca/archives/html_and_css/font-size-with-rem
http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
http://caniuse.com/rem
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
A site using Foundation as the framework…
…and Bootstrap
http://www.nonanetwork.com
http://builtwithbootstrap.com/
What about not using a framework?
http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
Resources for testing responsive sites
https://eyeball.sitepoint.com/ (beta sign-up)
http://responsinator.com/?url=http://www.jobhub.com&scroll=ext
CSS3 Media query polyfills for IE compliance
http://chrisjacob.github.com/Respond/#RESET
https://github.com/scottjehl/Respond
Media Query compatibility tables
http://caniuse.com/#feat=css-mediaqueries
Using Google Adsense on responsive sites
http://www.labnol.org/internet/google-adsense-responsive-design/25252/
Grid Calculators
Mobile First
http://designshack.net/articles/css/mobilefirst
Luke W.’s mobile first presentation http://vimeo.com/38187066
If you missed today’s session because you didn’t know about it, you can sign up for email reminders of future sessions here. Next up we have ‘Talk OOPHP with the Experts‘ with Lorna Mitchell, which will be useful for anyone doing the course. The date for that is yet to be finalised. Later in April will be ‘Talk Getting Started in the Industry‘ with SitePoint developers Jude Aakjaer and Ben Axnick, so keep your eyes peeled. If you are interested in past sessions, you’ll find the transcripts here.
If you’re interested in reading the full transcript of the session today, you’ll find it below in all it’s glory.
Jerry | Does the new book cover bootstrap, or some other framework? |
SHARKIE | @ TonnnnUK Bootstrap can be a great introduction |
SpaceBee… | Hello. Andy – Front end developer from Brighton UK |
mcynowic… | I would love to be able to use a framework that was responsive-ready |
TonnnnUK | @SHARKIE yes, I used it following a YouTube tutorial! We’re spoilt these days for learning :) |
mcynowic… | the company I work for is very keen on ‘original’ designs & layouts |
b0ss_ | BTW the transcript of all this will be available at… ? |
HAWK | Hi to anyone that has just joined – we’re just introducing ourselves I’m Community Manager at SitePoint Our experts are @SHARKIE and @ajfisher – authors of JumpStart RWD (I’m not going to type Responsive Web Design every time) If you haven’t seen it – here is the book:http://www.sitepoint.com/books/responsive1/ https://learnable.com/books/responsive1 |
srpsco | @HAWK why did I have to use a different email to gain access to the room |
Jeff_S | Hi all. I’m Jeff. I’m in West Virginia (4 p.m. here). Redesigning two websites now using responsive design, with new tools & techniques seeming to pop up every day. |
HAWK | @srpsco An extremely annoying bug with this app that I have no control over :( I don’t have access to the email addresses so I have no idea why that happens |
HAWK | I’ve logged many support tickets and never had a response |
srpsco | @HAWK ok fair enough thanks |
HAWK | if you know of a better app – let me know! |
SHARKIE | @Jeff_S The huge interest in the movement is leading that dynamic growth. Its really exciting |
HAWK | So it’s 9am – let’s kick off. Has anyone got a question that they’d like to kick off with? |
guido200… | @b0ss_ I think a link to the transcript will be posted in the Talk with the experts thread? |
HAWK | It will be posted up on SitePoint.com @b0ss_ @guido2004 |
crissoca | Hi all, I’m Cris, from Guatemala |
srpsco | I would like to know what is covered in the book when I checked earlier the book had not appeared on sitepoint.com/jumpstart page yet |
HAWK | The book is up now - http://www.sitepoint.com/books/responsive1/ But I’m sure the guys can give you a brief rundown of the contents |
SHARKIE | @srpsco The book’s available now! |
Leanne | Hi all I’m Leanne from Oxford, working as a front end developer. Tried my first responsive site the other day with media queries. |
HAWK | Sounds like I need to follow up with the issues logging in here |
mcynowic… | I haven’t had a chance to checkout the book – but I’m wondering if there are any resources (live/updating) in the digital version that deal with popular device dimensions? |
srpsco | And more specifically if twitter bootstrap and coverage of responsive images and data tables are included |
Jeff_S | I bought it yesterday. Only had a chance to skim through it, but I like what I see FWIW! |
simonJae | hi all… I built a responsive resume with the ‘foundation’ framework… plus several others – but these frameworks seem to be jumping about like ‘cats on a hot tin roof’ |
SHARKIE | @Jeff_S Thanks! |
ajfisher | @jeff_S great! |
ralph.m | @mcynowicz Chasing device sizes is not necessarily the best way to go. |
Mary | My first time in one of these chats … tell me how it works and what will I learn? |
SHARKIE | @mcynowic There’s no capacity in the digital edition for constant updates, but I’m sure sitepoint.com will keep you updated on news |
christos | Hi, would you recommend the ‘Mobile First’ strategy? If yes, what about the browsers that do not support css3? |
HAWK | Hi @Mary It’s a free chat – you ask questions and our experts answer. What you learn will depend on what you ask :) |
jeankap | Hi – I’m Jean in New York. I’m a Digital Solutions Architect specializing in eBooks, HTML5 and mobile apps for an offshore publishing production company. I’ve been working with stylesheets since way before CSS3, so RWD is actually not new to me. Just new in syntax… |
sjwdavie… | What’s the best RWD framework to use? |
pete | Hi All. Pete here from Hastings UK. Have to do a little bit of everything on websites – so not great at anything :(. Worked with Bootstrap for the first time today. Woah. Maybe ideal for someone like me. (Kids due home any moment so may have to leave at short notice. Apologies if I do.) |
MarkDSki | @ralph.m Is it safe to assume that device sizes are unofficially standardized? Can we now break down to simply phone, tablet etc? |
HAWK | @SHARKIE perhaps you can address this : but I’m wondering if there are any resources (live/updating) in the digital version that deal with popular device dimensions?And more specifically if twitter bootstrap and coverage of responsive images and data tables are included |
SHARKIE | @ralph.m great point Ralph. Using your content as your guide to when breakpoints are required is the most responsive way forward |
Jerry | @molona – it appears many of us just made up fake addresses |
simonJae | my biggest dilema is “pixels/ems/pt” – does anyone have a definitive response? |
HAWK | No worries @pete – I have my kids watching Aladin on the couch beside me… |
crissoca | how about rems? |
b0ss_ | Mobile First Strategy or Responsive Web Design? Why ??? |
Lorraine | Rems yes |
SHARKIE | Responsive images has a whole chapter, and Bootstrap is there as well. |
mcynowic… | @ralph.m it’s important at my company because we rely heavily on Google Ads – I need to conditionally load different ad size based on sniffing the device width |
SHARKIE | Nothing specific about tables in the first edition |
SpaceBee… | @simonJae – it what context? |
HelloCar… | @simonJae I’ve seen and read about ems and percentages |
simonJae | @crissoca – what exactly is a REM? |
jeankap | @simonJae – pixels and points aren’t gonna get you anywhere in the world of responsive design that is relative to the device in front of the user… EMs, %, and REMs are gonna be the way to go. |
srpsco | @HAWK fyi I see it is up on the sitepoijnt books page but not http://www.sitepoint.com/jumpstart/ |
ralph.m | @MarkDSki As SHARKIE said, it’s better to look at the logical breakpoints for your content. There are many different screen sizes, with no ‘one size fits all’ as far as I know. |
TonnnnUK | REM were a good band…that’s all i can contribute :) |
molona | @jerry… I knew I wasn’t the only one :-D |
HAWK | @srpsco Ah – ok. I’ll have that addressed today. Thanks |
mikko | Hey, Mikko here from a train somewhere between Stockholm and Mariefred. |
SHARKIE | @simonJae REM is a relative EM |
crissoca | @simonJae http://snook.ca/archives/html_and_css/font-size-with-rem |
joshbyer… | responsive design and mobile first complement each other and are not mutually exclusive |
jeankap | REM = root em – where you set a specific size on the root, and then refer to REMs so that everything is relative to what you set for the root – less math. |
mikko | and everybody is setting root (body) to 10px I guess.. AS YOU SHOULD ;) |
simonJae | @SpaceBee – with large ‘.net’ sites I have found myself calculating some of these “ems” like 3 times… !!! |
ralph.m | @mcynowicz That sounds like a tall order. Device sniffing is a lot of work. Needs constant monitoring and updating. Not worth it IMHO. I would explore the possibilities of making those ads more fluid. |
SHARKIE | @joshbyers Great point Josh |
joshbyer… | RD can be used progressively (see the 320 and up framework) which falls in with a mobile first philosophy |
simonJae | @jeankap – yeah – that makes sense – thanks |
jeankap | no one should be setting root to 10px… That’s WAY too small. Usability studies say 16 px at least. more for those of us in the world who are blind as bats. |
MarkDSki | @ralph.m So you’re saying to start applying responsive design techniques once the content/site design requires it? Regardless of device dimensions? I could see this as a good way of designing. |
crissoca | do you guys have any experience working with already made sites by a third party to make it responsive? |
mcynowic… | @ralph.m Does Google provide fluid ad sizes? I was under the impression that they were static width & height by pixels |
SHARKIE | @mcynowicz You could use your advertisement units as the content which drives your breakpoints |
ajfisher | @b0ss_ Mobile First is really an approach to RWD. It comes from the view that it’s **generally** easier to start from the smallest screen sizes and work your way up to larger ones, enhancing your design as you do to take advantage of more space |
Mary | I have been working in old technologies … ASP and Javascript, etc. I am getting ready to retire form my day job (yes, I’m old!) Is this somehting I can easilty pick up? |
mikko | yeah sure it is too small. but it’s easier to calculate rems. you should set your texts to a bigger font ofc |
crissoca | I have recently worked in some sites like this and it kinda becomes a nightmare |
ralph.m | @Mikko 10px is pretty small. Too small for me. Try to avoid font’s in px. |
httpster | The guys over at Filiment Group wrote a nice article on leaving the default font size alone,http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/ |
simonJae | @crissoca – yeah. This was my task a couple of months ago – .net also |
b0ss_ | joshbyer : thanks |
Lorraine | @crissoca I have used Genesis responsive themes for WordPress |
ralph.m | @MarkDSki Yes, that’s a better approach, I’d say. |
imagesti… | How does one start with responsive design? |
HAWK | If anyone has any good resources then make sure you drop them in here – I’ll list them at the start of the transcript |
jeankap | I have a responsive WP theme from themeforest. |
SHARKIE | @Mary I hope with the book you’ll be up and running in a weekend. And then you’re on your way |
thebrass… | Mobile first approach is a good one because it forces you to prioritize the site hierarchy. That’s prioritization is always important but because of the small screen starting point, it demands it. |
ralph.m | @mcynowicz I’m afraid I don’t know. Something to investigate, though. |
mikko | it used to be said that you should set body to 76% of whatever and tehen calculate from that. problem is, if I have set my browser font to something else than the standard 16pt then everything is more or less crapped |
HAWK | Good starting question @imagestic – how does one get started? |
b0ss_ | ajfisher: 1) someone typed here they complement each other. True? (2) The way you explained is exactly the opposite as gracefull degradation, right ? |
MarkDSki | @crissoca I have always felt that to add responsive design technology to a website often requires a very thorough redesign. Not just of template, but often a rethink of content too |
simonJae | @imagestic – start with a google on “responsive frameworks” |
mikko | that’s what I mean with setting “root” to 10px. then it is easy to calculate from that, if you use rems ! |
Jeff_S | @Mary: I’m convinced this is the way forward. If you’re doing web design, learning this will be worth every bit as much as learning HTML and CSS in my opinion. |
HAWK | Welcome to anyone that has just joined us. Our experts today are @SHARKIE & @ajfisher – please feel free to jump in with questions at any point. I’ll do my best to make sure that everything gets answered. If things move too fast, you can grab the transcript off sitepoint.com later today |
Lorraine | I have been having the same issue to my graphic designer, how to get started – I have been providing a layout but laying of graphics which I dont like. @imagestic |
SHARKIE | @mikko The proportions should be the same if you do EVERYTHING in relative units. So your design should be coherent even if the scale wasn’t what you’d originally thought of |
Mary | thanks @HAWK and @Jeff_S |
thebrass… | I have found that Bootstrap is very easy to start with. Also Foundation by Zurb is really good too, but you almost get too much with that framework. You have to take time to thin out the code you don’t need. |
HAWK | @ajfisher Maybe you could address the question of how to get started with RWD? |
pete | Thanks @Hawk. transcript is a great idea :) |
MarkDSki | @thebrassman Agreed. Much easier to build from the smaller device up. At the same time, I think that when designing now to incorporate responsive design techniques, it is important to consider and picture how the site will look across all dimensions in the early stages of design |
Mary | oops @Sharkie especially |
simonJae | @mikko – why not “@media” queries? |
crissoca | @markDSki yeah I feel like it’s not only a matter of the developer but a whole team work |
mikko | @ShARKIE well yeah they should be, but u know :) |
ralph.m | @imagestic Perhaps a good place to start with responsive design is to change your fixed width layout to a $ width. Watch how the layout reflows as you narrow and widen the browser window. (Technically, responsive design has been around a long time.) Now there are more sophisticated tools for responsive styling, thanks to things like @media. (Of course, another way to get started is to get the book. :D ) |
joshbyer… | @b0ss_ your’re right – thinking mobile first is the opposite of graceful degradation. You start with the mobile device and then progressively enhance with the options that a bigger screen afford you |
thebrass… | @MarkDSki Totally agree. In fact that’s one of the challenges of working with clients is the, “what will it look like?” question. There are two levels of education going on here…our own understanding of the technique and the clients’ understanding. |
imagesti… | @ralph.m I see, thank you very much |
SHARKIE | @mikko If you’re design is fluid – if the dimensions you use all come from the browser, and there are no fixed widths – then even going down to 10px font size should mean your design will respond |
anir99 | Is writing Responsive CSS the normal way really too hard to be using a framework/ bootstrap instead ? I don’t think its really hard or anything to start with …. ( yes I have not jumped on to the framework/bootstrap bandwagon yet ) |
christos | is it safe to use rems? do browsers support them? |
mcynowic… | @ralph.m I ended up using this technique to swap Google Ad Slot IDs based on widths |
ralph.m | @imagestic Oops, I meant to type “change your fixed width layout to a % width”. |
ajfisher | @imagestic easiest way to get started is to use one of the frameworks and see how it makes things responsive. Responsive version of Bootstrap or Foundation for example. That will give you a sandbox to play with where you can observe things going on and see how they work. If you want something a bit more barebones then the responsive layout for HTML 5 Boilerplate is a good learning tool also |
mcynowic… | @ralph.m http://www.labnol.org/internet/google-adsense-responsive-design/25252/ |
SHARKIE | @joshbyers Think of it as enhancement, rather than degredation |
crissoca | @christos as far as I can tell it needs a fallback size |
Lorraine | I built my website in rems a few weeks ago, no issues, |
SpaceBee… | http://caniuse.com/#search=rem |
SHARKIE | REM support is great http://caniuse.com/rem |
SpaceBee… | IE 9 & IE 10 do not support rem units when used in the “font” shorthand property. |
imagesti… | @ajfisher Nice! Is Dreamweaver a nice tool for Responsive Design? If not then what is? |
simonJae | again… why does everyone use EMS – it is an archaic measure. Why not POINTS? |
blanchrt | h, @ralph.m, , I thought $ meant “flexible” or “adaptive”. We could introduce the term here ;))) |
ralph.m | Nice link @mcynowicz :-) (I thought there must be something like that.) |
thebrass… | I just completed this client site using Foundation as the framework. http://www.neheart.com |
SpaceBee… | @simonJae PTs are a print unit |
jeankap | Responsive web design is tool agnostic. It’s all about the target apps/browsers/devices you test on. |
molona | @images any too is good for RWD or any kind of design… if you know how to use it |
SHARKIE | Thanks @spaceBeers! |
ajfisher | @imagestic well I use Vim ;) but the reality is you’ll need to test it in your browser and on target devices so editors shouldn’t make a big difference |
srpsco | what is the current best practice for images that also addresses retina displays |
anir99 | @jeankap that is so true |
ralph.m | @blanchrt Sounds like it would cost too many $$$ :p |
thebrass… | @srpsco Good question. Anyone? |
simonJae | @SpaceBeers – 8 ‘points’ make up an EM – though POINTS are closer to pixels – both are a print term |
molona | @imagestic… the problem with Dreamweaver (or any other WYGIWYS) is that if you trust the automated code it crates, your site will be … rubbish… speaking of code, obviously |
anir99 | You do not have to use a bootstrap framework of any kind to make a Responsive Design … its really just straight forward CSS |
thebrass… | Anyone have any examples of sites they’ve built using responsive techniques? |
anir99 | I mean its not neccessary to use a framework for RWD |
mcynowic… | so instead of ems/px/pts would you set a base pixel size and work with percentages for font-size? |
molona | @imagestic but if you know your code well, then it may speed your productivity |
jeankap | @ralph.m – cost is dependent on your business requirements and your content strategy. You don’t have to pay for everything up front, but you do have to expect a reasonable amount of cost for the amount of effort required to meet your business requirements and satisfy your content strategy. In short… try to deflect the expense conversation until after you know what it is you need to do. |
simonJae | @thebrassman – artatwork.com.au/resume |
SHARKIE | @srpsco You’ll need to be looking at adding the srcset parameter to your images and watching as browser support grows. I’m looking forward to it becoming more popular |
mcynowic… | http://www.jobhub.com (just went live today, first responsive project, please be kind :-) ) |
simonJae | @mcynowicz – yes. that would be a preference… |
jeankap | 100% is approximately 16 px in most browsers where you haven’t mucked with the user agent settings. Start with 100% and scale up and down from there. |
thebrass… | @simonJae Very nice! |
ralph.m | @jeankap Apologies, it was just a poor attempt at a joke. But good point anyway. :-) |
BRandon has entered the room | |
SHARKIE | @mcynowicz Thanks for sharing I’ll take a look later. What was the best part of the development experience? |
ajfisher | @srpsco srcset is your friend here. Though support is a little light just yet but will get better. |
b0ss_ | so in order for my site to be responsive, it should use EM instead of PX ? |
simonJae | … even a POINT base size |
blanchrt | jeankap, it was just a joke with a typo ralph.m did (he wrote $ for %) |
pete | @mcynowicz – let me have a valid zip…. :) |
HelloCar… | @thebrassman finalizing this one. Soft presentation right now. http://www.nonanetwork.com this used the bootstrap framework |
jeankap | @ralph.m no worries… I just think all the way back to why we’re doing this in the first place. :) |
thebrass… | @mcynowicz Nice Job! Looks good! |
mcynowic… | valid US zip: 90210 |
jeankap | and I’m following the conversation out of one eye… ;) |
SpaceBee… | We’re redoing one of the biggest travel brands in the world using Bootstrap at the moment |
molona | @b0ss you definately have to go fluid… and that means EM or % instead of px |
simonJae | @thebrassman – used the “Foundation” framework – very nice! |
SHARKIE | @b0ss_ Relative versus fixed, not necessarily EMs |
HelloCar… | @b0ss_ that’s a start and you have to use percentages for your width also for the site to shrink |
Tunbosun | While designing responsive websites is it recommended to use either Bootstrap or Zurb foundation |
pete | Whats the best way to test my RWD? Can I rely on web based emulators? |
thebrass… | @helloCarlosR – I like how you’ve resized the header text for smaller screen sizes. Nice work! |
molona | @b0ss you could also test and have fun with the new measure units (such as rems) |
simonJae | now using a framework called “gantry” (through Joomla) |
SpaceBee… | How far (realistically) do you take device testing? |
HelloCar… | @thebrassman thank you |
mcynowic… | @SHARKIE I liked working with a fluid/mobile layout. I haven’t had the opportunity to work in that environment much. Lots of devices sitting on my desk :-) |
jeankap | So… this may sound old school, but what about not using a framework and actually starting from scratch? What are the benefits of not including a whole bunch of stuff you might never use anyway? |
SHARKIE | @Tunbosun both Bootstrap or Foundation are a great place to start. Bootstrap might have you seeing results slightly faster |
joshbyer… | @srpsco depends on the type of image and the context in which you’re using it. For icons you can use an icon font, css3 multiple backgrounds combined with media queries is a good option and then for content images there are several scripts available though this is still in the wild wild west stage in my opinion (not sure if there is a “best practice” yet) |
ajfisher | @pete good question – you can use emulators to start with but nothing beats testing on actual devices. Not least because with mobile devices you’ll need to see if your touch targets are big enough to actually hit with a finger…. |
anir99 | @jeankap just what I am talking about |
ralph.m | I enjoyed this blog post about ems in responsive design: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Worth reading. |
Leanne | @pete firefox has some testing tools under the web developer tools add on. Which shows what you’re site will look like in different devices etc. It seems pretty good. |
Jeff_S | @jeankap: Good question! |
molona | @jeankap in my opinion, that depends on the project and your schedule |
SpaceBee… | @jeankap – David Bushell wrote a good piece on this recently - http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/ |
christos | I don’t think responsive frameworks are the way to go for beginners. If you don’t get your hands dirty, you will not learn. Besides, they take out all the fun. |
SHARKIE | @mcynowicz Seeing your design just WORK in different devices is always a great buzz |
HAWK | On the subject of device testing, we’re launching a product that crowdsources front end testing on a number of devices. You can sign up for beta here eyeball.sitepoint.com |
mcynowic… | I relied very heavily on The Responsinator for initial testing: http://responsinator.com/?url=http://www.jobhub.com&scroll=ext |
TonnnnUK | Are we in the beginnings of responsive web design, and how long will it take business owners to be willing to pay to have their fancy websites revamped? (I know this is more marketing/business rather than technical) |
pete | @jeankap. good question. this helped me a little. http://tinyurl.com/ar8axu6 |
thebrass… | @jeankap I think starting from scratch is the best way to learn the responsive approach. Depending on the scale of the project, it may take longer but you’ll get a lot out of it. The benefit of a framework is that it’s awesome for rapid prototyping. |
SpaceBee… | @HAWK – Thanks. I used to go to the local phone shop and test my sites in there. |
molona | @jeankap if a framework is well design and speed the process then there’s nothing wrong using it… still, if you have to personalize almost every single bit… you can start from scratch and make it work the way you just want it to work |
jeankap | Just thinking… In an ideal world, where the powers that be have been convinced to let you do it right instead of just get it done… No framework could mean cleaner code. I come from the days of SGML and XML. I like clean and valid code… |
anir99 | I might be the odd one out over here maybe, but personally I find bootstraps and frameworks irritating …. nothing wrong in writing code the straight forward way |
Tunbosun | @SHARKIE thanks if i want to add some margins to a content while using bootstrap the layout gets scattered |
SHARKIE | @jeankap Frameworks and boilerplates get you great results quickly, but for long term success I always prefer to roll a custom solution. It’s lean and fast! |
molona | @tonnnnUK how good are you at selling? how much is the business worth? how much money can they do if the design is revamped? |
jeankap | I’ve gone to the local warehouse club to do testing on the 7 inch tablets. Take screenshots and send ‘em to myself. Or just take pictures with my phone… |
HAWK | Can anyone give me any details of the error they were getting about their email address when logging in here? |
PaulOB | @anir99 I feel the same. I’d rather write my own code. |
simonJae | @jeankap – how do you mix IE compliance with RWD? |
SHARKIE | @tunbosun Try adding margins to elements inside the grid, rather than to the elements that structure the grid |
molona | @tonnnnUK if you can estimate how much more the business will earn with the new design, that will help you to set the price right |
jeankap | I’m all in favor of up and running fast – that’s why I bought a WP theme instead of rolling my own. I just don’t have that kind of time… But for a customer project? I’d try to do it right. |
mcynowic… | @TonnnnUK my company is very old school when it comes to designing/re-designing a web project. I couldn’t convince anyone here to ‘approve’ RWD. There’s a learning curve for the designers and no one in marketing really followed my arguments for business value |
ralph.m | @TonnnnUK Businesses might wait until their site needs a revamp anyway. And then they’ll have to decide if a design that reflows for various devices is really the way to go. |
pete | @leanne @ajfisher cheers |
imagesti… | which CSS editor do you recommend? |
ralph.m | @anir99 You are not alone. :-) |
pete | @jeankap lol. great idea. |
Jeff_S | TonnnnUK: Sharkie and Andrew’s first chapter, I think, covers some of the essentials we need to understand before conveying the importance of this to managers and business owners. This is not about mobile anymore. This is about universal design that is device agnostic. And it works. And it’s cool. |
SHARKIE | @imagestic I use CSSEdit, or simply Textmate |
mcynowic… | I got lucky in that this particular project passed under-the-radar and they let me design it on-the-fly while I coded |
simonJae | @mcynowicz – good reason to go “mobile first” |
mcynowic… | they didn’t know ahead of time that it was going to be responsive |
jeankap | @simonJae IE compliance? I plug my ears and say “la la la la I can’t hear you”… and then I go look for a shim, a workaround, or a hack. But only if I can’t convince the client to just move on to a browser that will support their requirements without hacking. |
ajfisher | @tonnnnUK the other thing to consider there as well is that a well implemented piece of RWD will probably last longer now than a “traditionally” built site so your overall cost goes down |
molona | @imagestic for me, Notepad++… because I know how to do macros there and I absolutely love the Zend coding extension |
TonnnnUK | @molona I guess it is a sales pitch…..I think the majority of biz owners will be ignorant of it for a fair while….how long did it take for them to realise they needed a normal website? |
SHARKIE | @jeff_S Thanks Jeff! That’s a great point |
simonJae | @imagestic – I am in the same boat as SHARKIE |
ralph.m | @HAWK If you have used an email address before, it doesn’t seem to let you use it again (say it’s already taken). So I just make up a different one each time.) |
jeankap | I asked a CSS WG member about editors recently. He said most of them work in their favorite ascii editor. With the exception of Daniel Glauzman (BlueGriffon developer). |
simonJae | all hand coding and Firebug etc |
TonnnnUK | Some great responses…..thanks guys |
HAWK | Thanks @ralph.m |
mhenders… | What are some of people favorite solutions for off canvas navigation on mobile? |
Lorraine | @imagestic |
b0ss_ | for me VI or GEdit !!! |
anir99 | @simonJae there are CSS3 Media query polyfills for IE compliance, check this out: |
MarkDSki | @jeankap Same here, I bought a WP theme for use on a personal project. Saved me hours upon hours for minimal cost. It’s been much easier to take an existing theme and make basic modifications than to build from scratch, or even on a framework. That said, this approach is definitely very dependant on the project. |
molona | @tonnnnUK that’s why you need to figure out the results of the competitior your client wants to beat (they will have to tell you who is their competitor, in their eyes) and how the website can help them to reach those figures… they don’t understnad design or the need of a website… but they do understand the value of money… that’s international language |
SHARKIE | @simonJae IE doesn’t play a huge role in a lot of places that you’re design will appear. That means that you’re only gong to need to make sure one of your breakpoints works, in general. And you can always give them a little conditional support |
jeankap | I’ve been testing Espresso, Style Master, and TopStyle 5 (PC). TopStyle was my favorite back in 2000. The newest version is all tricked out for CSS3 and HTML5… And then I just do stuff in Sublime Text 2 because it’s quick and dirty. |
Lorraine | @imagestic css is better without an editor imho |
christos | If you go ‘Mobile First’, what do you do about the browsers that do not support media queries? |
mhenders… | @christos The lack of media query support is the first media query, then use min-width to build up. |
molona | @lorraine care to explain that? Not sure that I understand what you mean |
TonnnnUK | @molona spot on! money talks. |
mcynowic… | a big sell for the Business/Marketing aspect is the opposition to device-specific URLs and redirects – a single URL without a device-sniffer redirect is better for SEO rankings while maintaining the integrity of the user-experience on any device |
SHARKIE | @christos If you’re first target are mobile devices they’ll all support Media Queries |
imagesti… | Thank you for the answers people! |
simonJae | @anir99 – thanks Anir. there are also several other JQuery modules – see here (somewhere) - http://www.unheap.com/ |
jeankap | +1 @mcynowicz ! |
srpsco | any recommendation for calculators |
ajfisher | @christos media query support is pretty good these days ( http://caniuse.com/#feat=css-mediaqueries ) and excellent on mobile but if you need to look after browsers that don’t support it then that’s your fallback test |
jeankap | px2em is an iOS app that is supposed to take the pain out of the math conversion… |
SHARKIE | @srpsco Grid calculators? Have you had a look at https://gridsetapp.com/ |
anir99 | @simonJae Thanks Simon for the link, I’ll check it out :) |
mcynowic… | can someone post a URL example to a Responsive site they’ve built using Bootstrap? |
jeankap | Isn’t the Bootstrap site responsive in itself? |
simonJae | I feel a lot of the heavy lifting should be put on the server – as in device detection |
b0ss_ | Isn’t the Bootstrap site responsive in itself? [2] |
MarkDSki | @mcynowicz Interesting point, can you provide a bit more detail on how a device-sniffer redirect can be a negative in SEO? Do search engines actively look for these redirects and adjust your positioning accordingly? Does this affect search results across different devices? I currently run a website (non-responsive) that redirects to a /mobile URL based on device. |
SHARKIE | @mcynowicz have you had a look at http://builtwithbootstrap.com/? |
jeankap | @simonJae Really? That’s more to the progressive enhancement side of things, then, isn’t it? But what about the UA’s that “lie” about what they are and what they can do? |
mcynowic… | @jeankap @b0ss_ I was under the impression that it was a framework – I was interested in design customizability |
mhenders… | @mcynowicz Take a look at http://builtwithbootstrap.com/ |
ralph.m | @simonJae Device detection requires a lot from you, too—or from someone, at least, as new devices have to be added all the time, and not all devices are easy to detect. |
HAWK | Welcome to anyone that has recently joined us. Feel free to jump in with questions at any time. |
ajfisher | @simonJae a combo of client side and server side detection will usually yield the best results. Clients still have more capacity for feature detection than the server does which can really only interpret the request and make decisions from there. |
joshbyer… | @MarkDSki it can be a negative for SEO based on the fact that it slows the site down. Since site speed is a factor for SEO every redirect and request has an impact |
christos | @ajfisher that’s what confuses me. My fallback is wide sized ie8 or ie7 window? |
simonJae | @ralph.m – agreed. though its time the server worked for us… don’t you agree? |
mcynowic… | @MarkDSki if you are redirecting your visitors to an alternate URL, then you are registering activity at a secondary URL, no? |
SpaceBee… | Not a technical question – Thoughts on showing / hiding content on different sized devices? |
simonJae | @SpaceBeers – absolutely (hiding) |
MarkDSki | @joshbyers Fair point. |
SHARKIE | @spaceBeers That’s where Media Queries excel |
joshbyer… | @MarkDSki also Google prefers responsive design ala one url which doesn’t necessarily hurt you but who’s to say they don’t promote sites with RD more as part of the algorithm somewhere? |
ajfisher | @christos as Sharkie mentioned, having a catch all if you’re targeting mobile first should be enough for those that don’t support it. You’re really just ensuring that you have a reasonable default. |
ralph.m | @simonJae Personally, I’m not too keen to overwork the server too much. Responsive design is more about CSS and perhaps JS, which it browser territory. But there are many factors here … and server stuff is not my thing. |
anir99 | @spaceBeers I think you could just use the display: none; css rule for that |
christos | @ajfisher ok, thanks. I think I’m getting it now |
anir99 | together with the CSS Media query |
SpaceBee… | FYI I know how to do it – Should you be hiding your content from your users just because they’re visiting from a phone? |
pete | so if Ie8 doesn’t support media queries (http://caniuse.com/#feat=css-mediaqueries) do all RWD either use polyfill or settle for a narrow site on that browser? |
SHARKIE | @ralph.m More and more we’ll see Responsive Content becoming a factor too. Especially for Mobile First design. Using the server can be a great tool here |
mcynowic… | overall I would say it was much less work hours spent building a single responsive layout with a single testing URL than to build one layout, and then another separately for Mobile devices |
simonJae | I am surprised nobody is pushing for a “device switch” at the server |
SpaceBee… | Specially as their is no “view full site” available. Your essentially cutting your content off to a certain % of your audience |
blanchrt | @anir99 But ALL users will have to wait till all that hidden content is downloaded anyway |
SpaceBee… | “you’re” of course. |
Jeff_S | @SpaceBeers: Content has to be purpose-driven, has to be prioritized with purpose in mind. Some images are only decorative, and losing the doesn’t hurt. Lose what hinders, keep what your users came for. That’s my rule of thumb, anyway. :) |
molona | @spaceBeers if it is on his and your best interest, definately, you should be hiding content… such as pictures that only serve to delay the delivery of the page |
MarkDSki | @mcynowicz True, visitors are registered as landing at the abcd.com/mobile page. Don’t get me wrong, the plan is to move to a responsive design on the next redesign, however its interesting to hear some opinions/discussion on how a separate mobile version of a website negatively affects SEO. |
SHARKIE | @simonJae we’ll server the server playing a bigger role as Content First design becomes more typical |
joshbyer… | @SpaceBee if you’re hiding content it tells me you haven’t thought through your architecture enough – a mobile first philosophy solves this pretty well |
ajfisher | @simonJae you can also consider routing different templates out of your view that you send to the user based on the broad decisions about their capability (eg UA checking or session variables etc). Then you can tweak the presentation using more standard RWD techniques to deal with the nuance (eg res differences across iPhones). We actually talk about this in the book |
anir99 | @blanchrt I think that would be the case with visibility: hidden; and not with the display: none; rule |
simonJae | @SpaceBeers – but thats a good thing… !! is it not? |
TonnnnUK | ” Lose what hinders, keep what your users came for.” That’s a great mantra |
ralph.m | @SpaceBeers If you mean setting content to display: none, I’m not keen on that … unless maybe for an alternative menu or something small like that. I don’t like the thought of mobile users downloading content they can’t see. If you find that there is a lot on the desktop version of the site that you don’t want to appear on mobile, it’s a good time to ask if that content should even be on the desktop version at all. (I like the way mobile design is making us ask these questions. Many websites are full of unnecessary and distracting content, IMHO.) |
jeankap | They are and they aren’t… One of the things that came out recently is a debate over the @supports conditional that just got added to CSS3. Some people are in favor, others, not so much. They think it’s vague, and should be more specific. They also worry it could lead us down the path to places we’ve already been – like browser extensions. |
molona | @spaceBeers understanding each device and how to interact with it is a must for a good design… and not losing the % of users that you spoke about before |
imagesti… | Given that the majority use other browsers, when we design a site, should we have in mind IE too, or not? |
joshbyer… | @molona hiding pictures doesn’t mean the device doesn’t request them and download them – it just doesn’t display them |
anir99 | @spaceBeers thats a good point you made |
mcynowic… | +1... |