Web Design
Web design is an art and a science.
The hard work is in the details.
The big impact is in the final product.
Elements of Responsive Design
Fluid Grids
A fluid grid flows and adapts an organized layout to a user's device.
Readable Type
The text automatically adjusts its size to fit the user's screen.
Cross-Device
Websites today need to be viewable on all kinds of devices, browsers, and different sized screens.
Responsive Design
Explained
A responsive website is, put simply, a site that automatically responds to the browser and device it is being accessed from. Responsive design affects the user experience. These sites are those that you can view with ease via a phone, tablet, laptop, and desktop.
Responsive web design increases the likelihood of being found on search engines like Google and has a few main components: flexible and automatically adjusting text and images, a fluid grid, and some behind the scenes work called media queries which tells the device accessing the site which version of the same URL to display.
Responsive design and mobile devices
You need to have a mobile friendly website. More and more people are using their phones to access the internet, about half of all internet traffic is happening via mobile devices. "Global mobile data traffic" is expected to increase by 700% between 2016 and 2021. People are more likely to have a smartphone than a laptop, don't miss out on their business by keeping your website in the age of desktop-only browsing. The next gallery shows a series of screen captures of responsive design. Each page is being displayed in mobile format. Keep in mind that when active, these pages automatically adjusts to the size of the screen. Responsive design is not made to fit only one kind of screen.
One-page Websites
One page sites are designed to guide visitors through the site in a predetermined order thanks to seamless scrolling. One of my favorite things about one page websites is how many possibilities there are for being creative and artistic. One page sites are kind of like a bigger, better, more interactive brochure. You can direct people to a single page where they can get all the info they need quickly without having to search through multiple pages and links. Single page sites are also great for mobile browsing. The mockups below each illustrate a single page website that I designed for two different small businesses. In the examples, there are interactive elements, such as a before and after gallery and a concise services list.
Multi-page Websites
Multi-page websites are a great option for blogs and sites that have a lot of content. They can also be excellent for page speed. A multi-page site is more traditional than a single-page scroller, but that doesn't mean it's boring by any stretch of the imagination.
