Jump to content

Tablet & Mobile Design


Graeme

Recommended Posts

Hello All,

I read that if you want to remain competitive and avoid Google punishing you with a penalty next year, you will need to make sure that your website is compatible with mobile and tablet devices to offer the best experience to your users. Are there any tutorials or advice on how to design for these? Thank you,

Graeme

Link to comment
Share on other sites

  • 2 weeks later...

Hi!

 

Yep, it is called responsive design and most people will just use a framework (like Bootstrap) to make it happen.

I just wrote about Bootstrap in my book - a quick introduction on it.

 

Responsive websites, respond to the screen size and the browser window size - it resizes itself automatically so it fits nicely. So you will see page elements shift and move position, images, text and video will scale accordingly.

 

Responsive design makes heavy use of CSS media queries and JavaScript as well. You could do from scratch, but it is a better idea to use a framework like Bootstrap - no point reinventing the wheel!

 

Anyway, send me an email and I will give access to our course on the subject:

 

https://webmentor.org/course/introduction-to-twitter-bootstrap

 

It's an introduction that Ben made but it will give you a good idea. I will be working on new stuff soon.

 

I've attached screenshots of webmentor.org, so you can see how a responsive site resizes according to the browser window size.

 

Stefan

webmentor-desktop.png

webmentor-mobile.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...